Multiple date formats for angular ui bootstrap datepicker

Question

I have the following HTML below in my app.

<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 to have the ngModel populated when the user enters the 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 to accept other date formats as well?

Please check this plunkr http://plnkr.co/edit/t1f9AkHeKzvyPTQNzvxf?p=preview, This works in Chrome but not in IE . You can type 4.4.15 in chrome and it works, the same does not work in IE

Answer 1

If I understand correctly, you want to allow the user to decide how they enter their date format?

As far as I know, the date format needs to be defined beforehand and cannot be "detected" as the user fills it in. But, you could 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 your HTML input field.

The user could have a dropdown (HTML select) menu in the view where they can select their preferred date format, which will change the value of $scope.format. The datepicker will change accordingly.