Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set default value of HTML5 date input field with angularJS

I am hoping to bind the default value I generated in moment to the date and time input field. I tried ng-model and directly binding it to the value attributes. But none of it seems to work. Is there a way to make it work?

Edit: Also, how to bind the time input field as well?

<body ng-app="myApp">
<div ng-controller="MyCtrl">
    <input type="date" ng-model="date" value="{{date}}">
        <p>{{date}}</p>
    <input type="time" ng-model="time" value="{{time}}">    
</div>

Here is a fiddle for it: http://jsfiddle.net/chrisyeung/bF9Pq/

like image 748
Chris Yeung Avatar asked Nov 28 '13 08:11

Chris Yeung


People also ask

How do I format a date in YYYY-MM-DD in HTML?

The HTML5 date input specification refers to the RFC 3339 specification, which specifies a full-date format equal to: yyyy-mm-dd . See section 5.6 of the RFC 3339 specification for more details. This format is used by the value HTML attribute and DOM property and is the one used when doing an ordinary form submission.

Which HTML5 attribute can be used with HTML5 data input type to limit date selection?

The min and max Attributes The input min and max attributes specify the minimum and maximum values for an input field. The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.


2 Answers

If you're using chrome you have to specify the Date format as 'yyyy-MM-dd'.

$scope.date = $filter("date")(Date.now(), 'yyyy-MM-dd');

It simply won't work otherwise. Here's a working version http://jsfiddle.net/bF9Pq/4/

like image 130
Jeffrey W. Avatar answered Oct 13 '22 12:10

Jeffrey W.


Working fiddle

{{date | date:'MM/dd/yyyy'}}

I changed the it to date and add date filter.

like image 28
dpkk87 Avatar answered Oct 13 '22 14:10

dpkk87