Set default value of HTML5 date input field with angularJS

Question

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/

I changed moment() to new Date() in your fiddle and it seemed to work — pablochan
– pablochan, Commented Nov 28, 2013 at 9:05

Jeffrey W. · Accepted Answer · 2013-11-28 09:23:02Z

31

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/

answered Nov 28, 2013 at 9:23

Jeffrey W.

4,1593 gold badges19 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Frédéric Falliere Over a year ago

this fiddle does not work on chrome33. It works on firefox27.

Abdullah Choudhury Over a year ago

this worked for me on a chrome extension. Any idea why chrome expects yyyy-MM-dd?

prasanthv Over a year ago

The value for date type was designed to follow this standard, tools.ietf.org/html/rfc3339#section-5.6. Thats why :(

Yevgeniy Afanasyev Over a year ago

you better create an object out of your string: scope.date = new Date($filter("date")(Date.now(), 'yyyy-MM-dd'));

dpkk87 · Accepted Answer · 2013-11-28 09:18:04Z

6

Working fiddle

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

I changed the it to date and add date filter.

answered Nov 28, 2013 at 9:18

dpkk87

711 bronze badge

Comments

NoblesCZ · Accepted Answer · 2016-04-24 08:31:45Z

4

value="{{date}}"

causes init error: The specified value "{{datum_default}}" does not conform to the required format, "yyyy-MM-dd".

solution: do not set date in the template!

<input type="date" ng-model="date_code">

assign the date in controller!

$scope.date_code = new Date();

answered Apr 24, 2016 at 8:31

NoblesCZ

412 bronze badges

Comments

Zohra Khan · Accepted Answer · 2023-01-10 09:25:37Z

1

With moment library, you can use this:

$scope.date = new Date()

If the value is already stored in database/ variable:

$scope.date = new Date(moment(varName).tz('Asia/Kolkata').format('L'))

moment.locale();         // en
moment().format('LT');   // 9:58 AM
moment().format('LTS');  // 9:58:18 AM
moment().format('L');    // 12/07/2020
moment().format('l');    // 12/7/2020
moment().format('LL');   // December 7, 2020
moment().format('ll');   // Dec 7, 2020
moment().format('LLL');  // December 7, 2020 9:58 AM
moment().format('lll');  // Dec 7, 2020 9:58 AM
moment().format('LLLL'); // Monday, December 7, 2020 9:58 AM
moment().format('llll'); // Mon, Dec 7, 2020 9:58 AM

answered Jan 10, 2023 at 9:25

Zohra Khan

5,3424 gold badges28 silver badges34 bronze badges

Comments

Whatamidoing · Accepted Answer · 2020-01-08 19:04:26Z

0

You could also do:

$scope.date = new Date().toLocaleDateString('en-CA');

answered Jan 8, 2020 at 19:04

Whatamidoing

4906 silver badges17 bronze badges

Collectives™ on Stack Overflow

Set default value of HTML5 date input field with angularJS

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related