使用angularJS设置HTML5日期输入字段的默认值

时间:2021-03-11 17:11:39

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?

我希望将我生成的默认值绑定到日期和时间输入字段。我尝试了ng-model并将其直接绑定到value属性。但它似乎都没有用。有没有办法让它发挥作用?

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/

这是一个小提琴:http://jsfiddle.net/chrisyeung/bF9Pq/

3 个解决方案

#1


28  

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

如果您使用的是chrome,则必须将Date格式指定为'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/

它根本不会起作用。这是一个工作版本http://jsfiddle.net/bF9Pq/4/

#2


6  

Working fiddle

工作小提琴

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

I changed the it to date and add date filter.

我将它更改为日期并添加日期过滤器。

#3


3  

value="{{date}}" 

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

导致初始化错误:指定值“{{datum_default}}”不符合所需格式“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();

#1


28  

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

如果您使用的是chrome,则必须将Date格式指定为'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/

它根本不会起作用。这是一个工作版本http://jsfiddle.net/bF9Pq/4/

#2


6  

Working fiddle

工作小提琴

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

I changed the it to date and add date filter.

我将它更改为日期并添加日期过滤器。

#3


3  

value="{{date}}" 

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

导致初始化错误:指定值“{{datum_default}}”不符合所需格式“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();