model value not bind with datepicker

[jsmrugank]

I am having problem with binding ng-model value with ui-date date-picker.
below screen shot is for displaying date in a particular format using this code:

{{scorecardData.mdp1.start |date:'dd/MM/yyyy'}}

While editing date :

where,
$scope.scorecardData.mdp1.start = "2015-12-17T18:30:00.000Z"
$scope.dateOptions = { //--> DATE FORMAT
changeYear: true,
changeMonth: true,
yearRange: '2015:2030',
dateFormat: 'dd-mm-yyyy'
};
I've also used ui-date-format="dd-mm-yyyy" . but it didn't work.

[sampie]

I have the same problem. I could not get even the example from the readme to work:

ui-date-format="DD, d MM, yy"
The string "Thursday, 11 October, 2012" was not recognized by the datepicker.

[jsmrugank]

I've solved it. hope it will help you.
but before that this is not understandable to me yet :

ui-date-format="DD, d MM, yy"
The string "Thursday, 11 October, 2012" was not recognized by the datepicker.
here , we are giving format (ui-date-format) and still it expect to give date (as string) in that particular format. what was that mean.

anyway the answer is already given in his documentation.
"The ui-date directive only works with Date objects. If you want to pass date strings to and from the date directive via ng-model then you must use the ui-date-format directive. This directive specifies the format of the date string that will be expected in the ng-model. The format string syntax is that defined by the JQueryUI Date picker. For example"

so, no matter what if we are able to get convert our string date into date object then it will work. i've create another directive which will format our string date into date object. so you won't get any uncertain date selected in datepicker.

Directive:

app.directive('asDate', function() {
 return {
 require: 'ngModel',
 link: function(scope, element, attrs, modelCtrl) {
 modelCtrl.$formatters.push(function(input) {
 var transformedInput;
 if (input) transformedInput = new Date(input);
 else transformedInput = new Date();
 if (transformedInput !== input) {
 modelCtrl.$setViewValue(transformedInput);
 modelCtrl.$render();
 }
 return transformedInput;
 });
 }
 };
});

HTML:

 <input ui-date="dateOptions" ng-model="object[column.name]" as-date type="text" class="form-control"/>

where object[column.name] is the dynamic ng-model name.

[sampie]

I have an object structure containing a date string in Finnish format (dd.mm.yy). So, ui-date's ng-model is pointing to a date as a string. "If you want to pass date strings to and from the date directive via ng-model then you must use the ui-date-format directive." From this, I got an impression that specifying ui-date-format="dd.mm.yy" allows ng-model to have strings like "01.10.2015". It is not so?

I have tried something like this:

<input ui-date="dateOptions" ui-date-format="dd.mm.yy" ng-model="group_membership['start_date']" as-date type="text" class="form-control">

[jsmrugank]

I am already specifying format in ui-date like this

$scope.dateOptions = { //--> DATE FORMAT
 changeYear: true,
 changeMonth: true,
 yearRange: '2015:2030',
 dateFormat: 'mm-dd-yy'
 };

so i have set the format from scope. instead of using ui-date-format.

[sampie]

I took ui-date-format parameter away. The dateOptions look like this:
$scope.dateOptions = {
changeYear: true,
changeMonth: true,
yearRange: '2015:2030',
dateFormat: 'mm.dd.yy'
};

If I type to the input field a date string like: "01.01.2016" The resulting ng-model object looks like: "2015-12-31T22:00:00.000Z". Also for some reason, if I have an empty string as a date the object pointed by ng-model disappears from the object structure.

[alexanderchan]

I think the ui-date-format parameter causes more confusion for some reasons:

• it is mostly used for model changes and only a one way change string -> date. Once it runs the model is changed to a Date.
• there are two dateformats, the ui-date-format and the one that can be passed using the ui-date options

I'll have to think on this a bit more about how to simplify this. Perhaps #127 is the way to go to keep things in synch and returning to having the date in Date or string in a valid ISO format.

[sampie]

I think a consistent behavior would be that the datepicker would not change the object type from ng-model. User might have the object as a date object or as a string. If object type is string and user has specified the date format, then this format should be used on the ng-model string and on the input field.

[jsmrugank]

@sampie 👍
thanks @alexanderchan for reviewing this issue. Great directive. it help me a lot.

[lokenthapa]

@jsmrugank thanks buddy it was awesome......working perfectly