My HTML for date field is
<input class="form-control"type="text" name="txtOrderContractFinishDate" id="txtOrderContractFinishDate" ng-model="SelectedOrder.OrderContractFinishDate | jsDate | date:'MM/dd/yyyy'" placeholder="mm/dd/yyyy" />
jsDate function is as below
app.filter("jsDate", function () {
return function (x) {
return new Date(parseInt(x.substr(6)));
};
});
the date gets converted from JSON date format to MMddyyy format without any problem. But once after data is displayed if I try to edit the date field it is not allowing me to do so. I am new to angularjs. Can anyone help, please ?
Related
In my application i use $scope variables of momemt type.
I'am use md-datepicker from Angular Materialjs for change dates variables at ng-model.
md-datepicker work only with Date type, which I can convert from moment, but after change data by md-datepicker $scope variables change type from Moment to Date.
How to convert result md-datepicker Date type back to moment type?
This is need for use it in other functions which use moment.
<md-datepicker ng-model="momentfrom" md-open-on-focus="true" name="dateFrom" >
</md-datepicker>
The momentfrom variable after work with md-datepicker change type to Date, which need convert to moment.
app.config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) {
$mdDateLocaleProvider.parseDate = function(dateString) {
var m = moment(dateString, ["DD.MM.YYYY"],true);
return m.isValid() ? m.toDate() : new Date(NaN);
};
$mdDateLocaleProvider.formatDate = function (date) {
return date ? moment(date).format('DD.MM.YYYY') : '';
};
}]);
Your formatting for moment is wrong. Use this in the formatDate function:
return moment(date).format('YYYY-MM-DD');
if you want to set the date to be null on load, then use change the return to this:
return date ? moment(date).format('YYYY-MM-DD') : '';
Refer to the AngularJS Material docs for further information on $mdDateLocaleProvider functionalities.
Getting below warning and I don't see the format being displayed in input.
The specified value "{{start_time | date:'HH:mm'}}" does not conform
to the required format. The format is "HH:mm", "HH:mm:ss" or
"HH:mm:ss.SSS" where HH is 00-23, mm is 00-59, ss is 00-59, and SSS is
000-999.
<input type="time" value="{{start_time | date:'HH:mm'}}">
Current output
Expected hh:mm
Looks like you have your date in start_date and are trying to use start_time on the front-end. This should work:
<input type="time" ng-value="start_date | date : 'HH:mm'">
Example: Working Plunker
UPDATE: to allow for updating the model, you should add a filter:
.filter('parseDate', function () {
return function (date) {
if (angular.isDate(date)) return date;
return new Date(Date.parse(date.replace(/:\d{2}[.,]\d{3}Z$/, '')));
};
});
var start_time = "2017-08-29T17:15:16.814Z";
$scope.start_date = $filter('parseDate')(start_time);
Example: Working Plunker
I want to convert below date and time to UTC format
"1970-05-11T18:30:00.000+0000"
I am able to do this inside view, but i want to do it in the controller.
{{stmt.tranDate | date:"dd/MM/yyyy": 'UTC'}}
controller
$scope.kycinfo.dob = "1970-05-11T18:30:00.000+0000";
$scope.dob = $filter('date')($scope.kycinfo.dob, "dd/MM/yyyy");
view
<input type="text" id="dateOfBirth" placeholder="Please Select ..." data-ng-model="dob" name="dob" ng-required="true" mobi-date=true />
Pass "UTC" as third parameter to $filter('date).
$scope.kycinfo.dob = "1970-05-11T18:30:00.000+0000";
$scope.dob = $filter('date')($scope.kycinfo.dob, "dd/MM/yyyy", "UTC");
https://docs.angularjs.org/api/ng/filter/date
i think you can try the following code:
var toUTCDate = function(date){
var _utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
return _utc;
};
you can also visit Using AngularJS date filter with UTC date
I've got a date coming in from an API that returns the date like this: 2012-10-12 00:00:00
I'm printing it to my page like this:
<span class="year" ng-bind-html="hit._highlightResult.original_release_date.value"></span>
with original_release_date.value being that date (2012-10-12 00:00:00). Does anyone know a quick and easy way to just return the year?
Any help is appreciated. Thanks in advance!
you can use the date api in angularjs
<span class="year"> {{ hit._highlightResult.original_release_date.value | date:"yyyy" }} </span>
hit._highlightResult.original_release_date.value should be a (according to doc)
Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.
so create javascript date object and format it to show only the year,
step 1 - create a filter to get a date object from a string (2012-10-12 00:00:00)
app.filter('dateToISO', function() {
return function(input) {
var dateTime = input.split(" ");
var date = dateTime[0];
var datePartials = date.split("-");
var time = dateTime[1];
var timePartials = time.split(":");
var formattedDate = new Date();
formattedDate.setFullYear(datePartials[0]);
formattedDate.setMonth(datePartials[1]-1);
formattedDate.setDate(datePartials[2]);
formattedDate.setHours(timePartials[0]);
formattedDate.setMinutes(timePartials[1]);
return formattedDate;
};
});
step 2 - create a controller function to get the date object
$scope.getDate = function() {
return $filter('dateToISO')('2012-10-12 00:00:00');
};
step 3 - call that function and get the date object to format in the HTML
<span class="year"> {{ getDate() | date:"yyyy" }} </span>
here is the working Demo Plunker
This may be a bit off and cheating but I think '2012-10-12 00:00:00'.split('-')[0] will do the trick
I am a novice in Angular and need help regarding the Custom Directive.
I have a date picker Directive where the user selects Date, Month and Year from a Drop Down which is then displayed in a textbox in the format : YYYY-MM-DD
$scope.$watch('model', function ( newDate ) {
$scope.dateFields.day = new Date(newDate).getUTCDate();
$scope.dateFields.month = new Date(newDate).getUTCMonth();
$scope.dateFields.year = new Date(newDate).getUTCFullYear();
});
The Drop Down is displayed using :
<select required name="dateFields.month" data-ng-model="dateFields.month" p ng-options="month.value as month.name for month in months" value="{{dateField.month}}" ng-change="checkDate()" ng-disabled="disableFields"></select>
<select required ng-if="!yearText" name="dateFields.year" data-ng-model="dateFields.year" ng-options="year for year in years" ng-change="checkDate()" ng-disabled="disableFields"></select>
When all above Dropdowns are selected, the Input Textbox shows only the Year whic I want to show the complete date in the Format : YYYY-MM-DD
The Code for that is :
<input required ng-if="yearText" type="text" name="dateFields.year" data-ng-model="dateFields.year" placeholder="Year" class="form-control" ng-disabled="disableFields">
In the above code there is data-ng-model="dateFields.year". is there any method where I can customize this to show dateFields.year-dateFields.month-dateFields.date
The simplest solution is to use dedicated model for complete date. I can see that you are using ngChange directive. In this case you could set proper model value in this function:
$scope.checkDate = function() {
// checking date ...
// all is fine set full date model
$scope.dateFields.fullDate = $scope.dateFields.year + '-' + $scope.dateFields.month + '-' + $scope.dateFields.day;
}
and use in in HTML:
<input data-ng-model="dateFields.fullDate" required ng-if="yearText" type="text" name="dateFields.year" placeholder="Year" class="form-control" ng-disabled="disableFields">
I think it should work in your case.
Demo: http://plnkr.co/edit/SKCbABDifkbnIT2FTV6X?p=preview