Question

在这里，我们有两个日期选择器组件，事件的开始日期和结束日期。目的是确保始终使用“开始日期”中的更改来更新“结束日期”日期选择器的最小日期（因此，您不能选择结束日期早于开始日期的日期）；并且“开始日期”日期选择器始终会随着“结束日期”的更改而更新（因此您不能在结束日期之后开始事件）。

在下面的代码中，一切都很好地初始化了（其中scope.datePickerEnd和scope.datePickerStart是js Date对象）

     scope.datePickerOptionsStart = {
        showWeeks: false,
        formatDay: 'd',
        minDate: moment().startOf('day'),
        maxDate: scope.datePickerEnd
      };


      scope.datePickerOptionsEnd = {
        showWeeks: false,
        formatDay: 'd',
        minDate: scope.datePickerStart
      };

<div
    uib-datepicker="dd MMMM, yyyy"
    datepicker-options="datePickerOptionsStart"
    maxDate="datePickerEnd"
    ng-if="datePickerStart"
    ng-model="datePickerStart"
    class="date-picker-start"
    ng-change="dateChanged('start')">
</div>
<div
    uib-datepicker="dd MMMM, yyyy"
    datepicker-options="datePickerOptionsEnd"
    ng-model="datePickerEnd"
    ng-if="datePickerEnd"
    class="date-picker-end"
    ng-change="dateChanged('end')">
</div>

以下是更改日期时正在运行的代码：

scope.dateChanged = (type) => {
if(!scope.item || !!scope.updating) { return; }
scope.updating = true;
switch(type) {
  case 'start':
    scope.datePickerStart = new Date(scope.item.start_at);
    scope.datePickerOptionsEnd.minDate = scope.datePickerStart;
    scope.updating = false;
    break;
  case 'end':
    scope.datePickerEnd = new Date(scope.item.start_at);
    scope.datePickerOptionsStart.maxDate = scope.item.end_at = scope.datePickerEnd;
    scope.updating = false;
    break;
  default:
  scope.updating = false;
    break;
}
};

如果您选择一个新的“开始日期”，则“结束日期”日期选择器的minDate更新会很好。但是，如果您选择一个新的“结束日期”，并使用scope.datePickerOptionsStart（如上）更新“开始日期”的MaxDate datepicker-选项，它将按预期工作，以禁用适当的日期，但是它将删除活动日期。从当前日期开始上课。有人在这里有任何解决方案/想法吗？

Angular ui Datepicker问题：实时更新maxDate（datepicker-option）会清除活动日期

0 个答案: