Question

如何允许用户以不同格式在输入表单中键入日期？我看到选项alt-input-formats。我试图传递其他格式没有结果。控制器：

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

标记：

        <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>

现在我只能以这样的格式输入日期：01/01/16，但是2016年1月1日我在模型中未定义。我的代码出了什么问题？

Answer 1

altInputFormats不应作为属性提供，而应作为datepicker-options配置对象的一部分提供。在你的情况下：

<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" />

然后在控制器中

vm.datePickerOptions = {
  altInputFormats: ['M!/d!/yyyy'],
  // rest of options ...
}

Answer 2

alt-input-formats被定义为指令uibDatepickerPopup中的一个属性，因此它不能将vm.altInputFormats作为数组。解决此问题的一种方法是将数组直接插入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" />

Answer 3

尝试更改此行。

alt-input-formats="vm.altInputFormats[0]"

ui bootstrap datepicker备用日期格式

3 个答案: