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/
5 answers
solution1
31 ACCPTED 2013-11-28 09:23:02
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/
solution2
6 2013-11-28 09:18:04
solution3
3 2016-04-24 08:31:45
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();
solution4
0 2020-01-08 19:04:26
你也可以这样做：
$scope.date = new Date().toLocaleDateString('en-CA');
solution5
0 2023-01-10 09:25:37
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.