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
Related
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 ?
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 am getting date in loop from database. The format is like "2015-09-21 18:30:00". But I want to change it as 'dd/MM/yyyy'.
I tried like this
{{obj.added_date | date : 'dd/MM/yyyy'}}
It shows like
2015-09-21 18:30:00 | date : 'dd/MM/yyyy'}}
If I use fulldate is shows me like:
2015-09-21 18:30:00 | date : 'fullDate'}}
for shortDate it shows like this:
2015-09-21 18:30:00 | date : 'shortDate'}}
The date your passing to view is actually a string and hence angular date filter does not recognise it as date object. You need to convert it to date object first.
Also be careful with firefox, it doesn't work for new Date(); if date separator in '-' instead '/'. So I would also suggest below
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope','$filter', function ($scope,$filter) {
var dateStr = '2015-09-21 18:30:00';
$scope.dt = $filter('date')(new Date(dateStr.split('-').join('/')), "d/M/yyyy 'at' h:mm a");
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<bod ng-app="myApp">
<div ng-controller="MyCtrl">
<div>{{dt}}</div>
</div>
</body>
EDIT: I have created a filter which will work for converting string to date object and will work in loop too
var myApp = angular.module('myApp',[]);
myApp.controller("MyCtrl", function ($scope) {
$scope.dt = '2015-09-21 18:30:00';
});
myApp.filter('formatDate', function(dateFilter) {
var formattedDate = '';
return function(dt) {
console.log(new Date(dt.split('-').join('/')));
formattedDate = dateFilter(new Date(dt.split('-').join('/')), 'd/M/yyyy');
return formattedDate;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<bod ng-app="myApp">
<div ng-controller="MyCtrl">
<div>{{dt | formatDate: dt:'d/M/yyyy'}}</div>
</div>
</body>
Hope this helps
The date format that you have specified doesn't match the input specifications provided in the AngularJS documentation. The following is taken from https://docs.angularjs.org/api/ng/filter/date
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.
I would suggest that you convert the date value into milliseconds and then pass it into the filter.
What i have done is before bindind the data in angular JS you can format the data
//Here i am taking the DOB from session and converted the format in dd-MM-yyyy format
string DOB = ((ABC.Models.Student)Session["Student"]).DOB.ToString("dd-MM-yyyy");
//Here i have used a hidden field where i am going to store DOB in ng-Init
<input type="hidden" name="DOB" id="DOB" ng_init = "DOB=' " + "Date of Birth: " + DOB + "'" /><br />
Later can call your ng-bind method for displaying.
<p ng-bind="DOB"></p>
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
I have two datepicker textbox From date and To Date... I need default in From date this month start date and To date today's day...
How to set default dates in Angularjs Datepicker textbox..?
I am not sure what you mean by a datepicker textbox.
Are you using a date input?
<input name="dateInput" type="date" ng-model="date"/>
If so in the controller you need to set the ng-model variable, in this case, $scope.date to the default date you want to use
e.g. to use today's date
var d=new Date();
var year=d.getFullYear();
var month=d.getMonth()+1;
if (month<10){
month="0" + month;
};
var day=d.getDate();
$scope.date=year + "-" + month + "-" + day;
I have set up a plunkr at http://plnkr.co/edit/WJ86aB?p=preview
If so in the controller you need to set the ng-model variable, in this case, $scope.date to the default date you want to use
e.g. to use today's date
$scope.date = new Date();
In your html:
<input name="dateInput" type="date" ng-model="date"/>
$scope.date = new Date().toLocaleDateString()
<input datepicker data-ng-model="date" type="date" />