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

The example on the docs shows how to use multiple formats along with a plnkr you can edit. Have you tried format M.d.yyyy or d.M.yyyy? — Jasen
– Jasen, Commented Apr 20, 2015 at 17:07
Is the date 4.3.15 supposed to be "April 3, 2015" or "4 March 2015" or "2004 March 15" or ...? — Jasen
– Jasen, Commented Apr 20, 2015 at 17:13
April 3rd.The moment i remove the line datepicker-popup="MM/dd/yyyy" , popup is not opening. — user636525
– user636525, Commented Apr 20, 2015 at 17:16
datepicker-popup is the name of the datepicker directive so without that it won't try to look for ng-model. Share your code with us so others can duplicate the problem to better understand what you're trying to do and where you're going wrong. — Jasen
– Jasen, Commented Apr 20, 2015 at 17:27
Please check this plunkr 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 — user636525
– user636525, Commented Apr 20, 2015 at 18:44

Tom · Accepted Answer · 2015-04-20 17:10:05Z

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.

answered Apr 20, 2015 at 17:10

Tom

7342 gold badges8 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user636525 Over a year ago

The moment i remove the line datepicker-popup="MM/dd/yyyy" , popup is not opening. But if that line is not there then ngModel is not set to undefined.I am getting values in ngModel. is that how its suppose to work ?

user636525 Over a year ago

Please check this plunkr 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 .

user1532976 Over a year ago

Date format works only for defaulted format .e.g. if you enter manually from accepted date format then it doesn't work

user442538 · Accepted Answer · 2018-05-03 09:31:44Z

1

I have used the alt-input-formats on the DateParser to provide alternate formats

alt-input-formats (Default: []) - A list of alternate formats acceptable for manual entry.

answered May 3, 2018 at 9:31

user442538

414 bronze badges

Collectives™ on Stack Overflow

Multiple date formats for angular ui bootstrap datepicker

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related