angular-ui-date is a wrapper around jqueryui's datepicker. Please refer to their documentation and option list for more information about supports parameters. To set jqueryui datepicker options you must pass the configuration object to the directive as follows: ui-date="{..}"
This plugin works has 2 different sides.
- The value being rendered to the client as the input value.
- The ngModel property which is a Date object (by default) that reflects the value in the same input
The last topic might not be desired as we are going to see and for that we must use the ui-date-format directive as we are about to see.
**First example: ngModel is converted from string to a date object even if we provide a dateFormat option to ui-date="{...}" ** Well, it's normal but it wasn't evident for me.
//we provide a date string as follows as a initial value
$scope.myDate = '29-08-2016'; <!-- and we expect our picked date to be printed in the same 'dateFormat' so we added ui-date with settings below -->
<input type="text" ui-date="{dateFormat: 'dd-mm-yy'}" />
<!-- surprisingly our model value is converted into a date object and there's a reason for that. See next example -->Second example: Instructing ngModel to be converted into string in a particular format
<input type="text" ui-date="{dateFormat: 'dd-mm-yy'}" ui-date-format="dd-mm-yy"/>