允许用户使用Angularjs ui引导程序仅选择今天的日期或未来的日期

Allow user to select only todays date or future date using Angularjs ui bootstrap

本文关键字：日期 引导程序 选择 今天 未来 ui Angularjs 许用户 用户      更新时间：2023-09-26

我使用的是ui引导指令ui日期选择器。我想设置日期选择器，用户只能选择今天的日期或未来的日期。这是日期选择器的html：

 <div class="input-group">
                                <input type="text" class="form-control"
                                       uib-datepicker-popup="yyyy-MM-dd"
                                       name="start_date"
                                       ng-model="loan.start_date"
                                       is-open="popup1.opened"
                                       datepicker-options="dateOptions"
                                       ng-required="true"
                                       close-text="Close"
                                       alt-input-formats="altInputFormats"
                                 />
                          <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>

以下是我在javascript方面的内容：

  $scope.inlineOptions = {
    customClass: getDayClass,
    minDate: new Date(),
    showWeeks: true
};
$scope.dateOptions = {
    dateDisabled: disabled,
    formatYear: 'yy',
   maxDate: new Date("2020-04-1"),
    minDate: new Date() ,
    startingDay: 1
};

我该怎么做才能完成这件事呢，提前谢谢。

你的javascript看起来不错，但你的标记似乎有点偏离。看看这个plunker（从Angular original修改而来），它是一个工作示例。

 $scope.dateOptions = {
    dateDisabled: disabled,
    formatYear: 'yy',
    minDate: new Date(),
    startingDay: 1
  };

  <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
相关文章：