I have an HTML5 date input and I would like its value to be set to the value of the date property in my model by default. I\'m not too fussy about formatting since Chrome se
In my case, I have solved this way:
$scope.MyObject = // get from database or other sources;
$scope.MyObject.Date = new Date($scope.MyObject.Date);
and input type date is ok
The problem is that value is ignored when ng-model is present.
Firefox, which doesn't currently support type="date"
, will convert all the values to string. Since you (rightly) want date
to be a real Date
object and not a string, I think the best choice is to create another variable, for instance dateString
, and then link the two variables:
<input type="date" ng-model="dateString" />
function MainCtrl($scope, dateFilter) {
$scope.date = new Date();
$scope.$watch('date', function (date)
{
$scope.dateString = dateFilter(date, 'yyyy-MM-dd');
});
$scope.$watch('dateString', function (dateString)
{
$scope.date = new Date(dateString);
});
}
Fiddle
The actual structure is for demonstration purposes only. You'd be better off creating your own directive, especially in order to:
yyyy-MM-dd
,dateString
variable (see the documentation on this subject).Please notice that I've used yyyy-MM-dd
, because it's a format directly supported by the JavaScript Date
object. In case you want to use another one, you must make the conversion yourself.
EDIT
Here is a way to make a clean directive:
myModule.directive(
'dateInput',
function(dateFilter) {
return {
require: 'ngModel',
template: '<input type="date"></input>',
replace: true,
link: function(scope, elm, attrs, ngModelCtrl) {
ngModelCtrl.$formatters.unshift(function (modelValue) {
return dateFilter(modelValue, 'yyyy-MM-dd');
});
ngModelCtrl.$parsers.unshift(function(viewValue) {
return new Date(viewValue);
});
},
};
});
Fiddle
That's a basic directive, there's still a lot of room for improvement, for example:
yyyy-MM-dd
,If using Angular Material Design, you can use the datepicker component there and this will work in Firefox, IE etc.
https://material.angularjs.org/latest/demo/datepicker
Fair warning though - personal experience is that there are problems with this, and seemingly it is being re-worked at present. See here:
https://github.com/angular/material/issues/4856
You can use this, it works fine:
<input type="date" class="form1"
value="{{date | date:MM/dd/yyyy}}"
ng-model="date"
name="id"
validatedateformat
data-date-format="mm/dd/yyyy"
maxlength="10"
id="id"
calendar
maxdate="todays"
ng-click="openCalendar('id')">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" ng-click="openCalendar('id')"></span>
</span>
</input>
Why the value had to be given in yyyy-MM-dd?
According to the input type = date spec of HTML 5, the value has to be in the format yyyy-MM-dd
since it takes the format of a valid full-date
which is specified in RFC3339 as
full-date = date-fullyear "-" date-month "-" date-mday
There is nothing to do with Angularjs since the directive input doesn't support date
type.
How do I get Firefox to accept my formatted value in the date input?
FF doesn't support date
type of input for at least up to the version 24.0. You can get this info from here. So for right now, if you use input with type being date
in FF, the text box takes whatever value you pass in.
My suggestion is you can use Angular-ui's Timepicker and don't use the HTML5 support for the date input.
Check this fully functional directive for MEAN.JS (Angular.js, bootstrap, Express.js and MongoDb)
Based on @Blackhole ´s response, we just finished it to be used with mongodb and express.
It will allow you to save and load dates from a mongoose connector
Hope it Helps!!
angular.module('myApp')
.directive(
'dateInput',
function(dateFilter) {
return {
require: 'ngModel',
template: '<input type="date" class="form-control"></input>',
replace: true,
link: function(scope, elm, attrs, ngModelCtrl) {
ngModelCtrl.$formatters.unshift(function (modelValue) {
return dateFilter(modelValue, 'yyyy-MM-dd');
});
ngModelCtrl.$parsers.push(function(modelValue){
return angular.toJson(modelValue,true)
.substring(1,angular.toJson(modelValue).length-1);
})
}
};
});
The JADE/HTML:
div(date-input, ng-model="modelDate")