Question

我不知道如何使我的uib-datepicker的minDate属性工作。

这就是我所做的：

<div class="form-group">
    <div class="col-md-6">
        <label class="col-md-4 control-label" for="field_dateDebut">Date Début</label>
        <div class="col-md-5">
            <div class="input-group">
                <input id="field_dateDebut" type="text" class="form-control" name="dateDebut" uib-datepicker-popup="{{dateformat}}" ng-model="vm.mission.dateDebut" is-open="vm.datePickerOpenStatus.dateDebut"
                />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="vm.openCalendar('dateDebut')"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <label class="col-md-4 control-label" for="field_dateFinPrevisionnelle">Date Fin Prévisionnelle</label>
        <div class="col-md-5">
            <div class="input-group">
                <input id="field_dateFinPrevisionnelle" type="text" class="form-control" name="dateFinPrevisionnelle" uib-datepicker-popup="{{dateformat}}" ng-model="vm.mission.dateFinPrevisionnelle" is-open="vm.datePickerOpenStatus.dateFinPrevisionnelle" minDate = "vm.mission.dateDebut"
                />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="vm.openCalendar('dateFinPrevisionnelle')"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </div>
        </div>
    </div>
</div>

当我点击第一个日期时，我想在第二个日期选择器中禁用此日期之前的所有日期。
如果有人有任何想法......

谢谢。

Answer 1

正如您在docs（https://angular-ui.github.io/bootstrap/#/datepicker）上看到的那样，minDate是在datepicker-options中传递给datepicker指令的配置Javascript对象的属性。

Answer 2

正如 jmoreno 指出的那样， minDate 是一个对象的属性，您需要通过该对象传递 datepicker-options 属性元件。

vm.dateOptions2 = {
    minDate: new Date()
};

<input  id="field_dateFinPrevisionnelle" type="text" class="form-control" name="dateFinPrevisionnelle" 
        ng-model="vm.mission.dateFinPrevisionnelle"
        uib-datepicker-popup="{{dateformat}}" 
        datepicker-options="vm.dateOptions2"
        is-open="vm.datePickerOpenStatus.dateFinPrevisionnelle"/>

这是基本的。现在，您希望将第二个datepicker的minDate设置为第一个datepicker的选定日期，您可以使用第一个datepicker元素的ng-change来更改第二个datepicker的minDate对象中的vm.dateOptions2。

<input  id="field_dateDebut" type="text" class="form-control" name="dateDebut" 
        ng-model="vm.mission.dateDebut"
        uib-datepicker-popup="{{dateformat}}"
        ng-change="vm.setSecDatepickerMinDate()" 
        is-open="vm.datePickerOpenStatus.dateDebut" />

vm.setSecDatepickerMinDate = function() {
    // to change the minDate of the second datepicker
    vm.dateOptions2.minDate = vm.mission.dateDebut;

    // updating the current vm.mission.dateFinPrevisionnelle date to vm.mission.dateDebut.
    // I don't want any previous date keep setting in vm.mission.dateFinPrevisionnelle
    vm.mission.dateFinPrevisionnelle = angular.copy(vm.mission.dateDebut);
  }

这plunker会给你更明确的想法。

uib-datepicker：minDate似乎不起作用

2 个答案: