2

How can I allow user to type date in input form in different formats? I see option alt-input-formats. I've tried to pass alternate formats with no result. Controller:

vm.altInputFormats = ['M!/d!/yyyy'];

Markup:

        <div class="calendar">
            <label>END DATE</label>
            <input type="text"
                   ng-click="vm.toggleCalendar('endDate')"
                   class="calendar-control"
                   uib-datepicker-popup="{{'MM/dd/yy'}}"
                   ng-model="vm.dateFilter.endDate"
                   is-open="vm.endDateOpened"
                   datepicker-options="vm.datePickerOptions"
                   min-date="vm.dateFilter.startDate"
                   max-date="vm.currentDate"
                   show-button-bar="false"
                   alt-input-formats="vm.altInputFormats"
                   close-text="Close" />
            <i ng-click="vm.toggleCalendar('endDate')" class="glyphicon glyphicon-calendar calendar-btn"></i>
        </div>

Now i'm able only to type date in such format: 01/01/16, but for 01/01/2016 I got undefined in model. What's wrong with my code?

Nikita Reshetnikov
  • 63
  • 2
  • 5

3 Answers3

3

The altInputFormats should be provided not as attribute but as the part of the datepicker-options config object. In your case:

<input type="text"
       ng-click="vm.toggleCalendar('endDate')"
       class="calendar-control"
       uib-datepicker-popup="{{'MM/dd/yy'}}"
       ng-model="vm.dateFilter.endDate"
       is-open="vm.endDateOpened"
       datepicker-options="vm.datePickerOptions"
       min-date="vm.dateFilter.startDate"
       max-date="vm.currentDate"
       show-button-bar="false"
       close-text="Close" />

and then in controller

vm.datePickerOptions = {
  altInputFormats: ['M!/d!/yyyy'],
  // rest of options ...
}
dfsq
  • 191,768
  • 25
  • 236
  • 258
3

alt-input-formats is defined as an attribute in directive uibDatepickerPopup so it can not take vm.altInputFormats as an array. One way to get around this is to insert the array directly into alt-input-formats

<input type="text"
                   ng-click="vm.toggleCalendar('endDate')"
                   class="calendar-control"
                   uib-datepicker-popup="{{'MM/dd/yy'}}"
                   ng-model="vm.dateFilter.endDate"
                   is-open="vm.endDateOpened"
                   datepicker-options="vm.datePickerOptions"
                   min-date="vm.dateFilter.startDate"
                   max-date="vm.currentDate"
                   show-button-bar="false"
                   alt-input-formats="['M!/d!/yyyy', 'yyyy-M!-d!']"
                   close-text="Close" />
Tuan Pham
  • 31
  • 1
  • 5
-1

try to change this line.

alt-input-formats="vm.altInputFormats[0]"
Vinit Solanki
  • 1,863
  • 2
  • 15
  • 29