Multiple date formats for angular ui bootstrap datepicker
I have the following HTML code in my application.
<p class="input-group">
<input ng-model="myDate" datepicker-popup="MM/dd/yyyy"
is-open="isopen" />
<span style="cursor:pointer" ng-click="opendate($event)" class="input-group-addon input-sm"><i class="glyphicon glyphicon-calendar"></i></span>
</p>
I would like the ngModel to populate when the user enters a date in the format 4.3.2015
or 4.3.15
, but currently I am getting ngModel as undefined. How can I tell the datepicker accepts other date formats?
Please check this plunkr http://plnkr.co/edit/t1f9AkHeKzvyPTQNzvxf?p=preview . This works in Chrome, but not IE. You can type 4.4.15 in chrome and it works, the same doesn't work in IE
source to share
If I understand correctly, you want to let the user decide how they fit their date format?
As far as I know, the date format must be predefined and cannot be "discovered" when the user fills in it. But you can create an array with accepted date formats in your controller:
// Accepted date formats.
$scope.formats = ['MM/dd/yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
// Default date format.
$scope.format = $scope.formats[0];
Change the datepicker-popup attribute to datepicker-popup="{{format}}"
in the HTML input field.
The user can have a dropdown menu (HTML) in the view where they can select their preferred date format which will change the value $scope.format
. The datapicker will change accordingly.
source to share