：minDate似乎不起作用

Question

我不知道如何使我的的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

正如datepicker-options jmoreno所指出的，minDate是对象的属性，需要在元素中传递该对象的属性。

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

这是最基本的。现在，由于要将第二个数据报童器的minDate设置为第一个数据报童的选定日期，可以使用第一个数据报童元素的ng-change来更改第二个数据报童器的vm.dateOptions2对象中的minDate。

<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会给你更清楚的想法。

Answer 2

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