uib-datepicker：minDate 似乎不起作用

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

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

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

这是最基本的。现在，如果您想将第二个日期选择器的 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会让你思路更清晰。

uib-datepicker：minDate 似乎不起作用

uib-datepicker : minDate doesn't seem to work

angularjs

angular-ui-bootstrap