How to set initial value in ng-model when using ui-date in angularjs

Question

My model is based on a JSON object, and the date is listed as 2012-12-13T00: 00: 00-07: 00

I want to use date and date.

I have the following code that works.

<input ng-model="course.startDate" value="{{item.startDate | date: 'MM/dd/yyyy'}}" ui-date ng-required="true"> 

However, I do not think that I should use the value="{{item.startDate | date: 'MM/dd/yyyy'}}" , but without it, the input does not load with the value from the model.

The model is attached and functions correctly when I selected the date, it just appears blank when the page loads.

What is the correct way to initialize this input?

Answer 1

Using ui-date and ng-model should be enough:

 <div ng-controller="MyCtrl"> <input ng-model="date" ui-date> </div> 

Provided that MyCtrl is defined as follows:

 function MyCtrl($scope) { $scope.date= new Date(); }​ 

Here is jsFiddle: http://jsfiddle.net/MvGFF/2/

What you should know is that ui-date expects the model value to be an instance of Date , maybe you are passing in the value of a string (or another type)?

If your model contains values ​​that are strings, and you still want to use the date picker, you need to add the ui-date-format directive, as in this example:

 <input ng-model="date" ui-date ui-date-format> 

where the controller is defined as follows:

 function MyCtrl($scope) { $scope.date= "2012-12-13T00:00:00-07:00"; }​ 

Here is jsFiddle: http://jsfiddle.net/d4xz2/1/

Answer 2

This works great:

 <input type="text" ng-model="nota.fechaPub" value="{{nota.fechaPub}}" ui-date ui-date-format> 

where the value of $ scope.nota.fechaPub is "2013-01-14T23: 00: 00.000Z"

The value displayed in the text box is "01/15/2013"