0

如果日期模型小于当前日期或日期已“过期”，我如何禁用每个单独的日期选择器。

我正在开发一个带有日期选择器的用户界面，用于开始和结束日期。最初，根据从后端返回的数据，UI 可以根据需要拥有尽可能多的日期选择器。用户还可以添加更多日期选择器。

这是我用来构建日期选择器的示例数据ngRepeat。

        {
            "id": 1234,
            "seasons": [{
                "endDate": "2016-01-03",
                "startDate": "2015-09-10",
                "description": "2015"
            }, {
                "endDate": "2017-01-03",
                "startDate": "2016-09-10",
                "description": "2016"
            }]
        }

我正在创建一个用户界面，只有在开始和结束日期未过期的情况下，用户才能通过日期选择器更改日期。如果日期已过期，则需要禁用日期选择器。

这是我的用户界面供参考。在此处输入图像描述

我目前的方法是遍历季节数组并检查 startDate 是否小于今天。 

        ss.datePickerStartDateEnabled = false;

        angular.forEach(ss.seasonSet.seasons, function(season, key) {
            if (season.startDate < today) {
                console.log('Less than today');
                ss.datePickerStartDateEnabled = true;
            }
        });

到目前为止它有效，但它禁用了不少于今天的 startDate。

这是我的html

<div class="row" ng-repeat="s in ss.seasonSet.seasons track by $index">
   <div ng-controller="DatePickerCtrl as datePicker">
      <div class="col-md-3">                      <!-- StartDate datepicker-->
         <div class="form-group has-feedback">
            <label for="username">Start Date</label>
            <input 
               type="text" 
               class="form-control" 
               id="startDate{{$index}}" <!-- id=startDate1 -->
               uib-datepicker-popup="{{}}" 
               ng-model="s.startDate" 
               is-open="datePicker.isOpen.startDate" 
               datepicker-options="datePicker.dateOptions" 
               ng-required="true"
               ng-disabled="ss.datePickerStartDateEnabled" 
               close-text="Close"
               ng-click="datePicker.open($event, 'startDate')"/>
            <span class="form-control-feedback glyphicon glyphicon-calendar"></span>
         </div>
         <div class="form-group has-feedback">
            <label for="username">End Date</label>
            <input 
               type="text" 
               class="form-control"
               id="endDate+{{$index}}" 
               uib-datepicker-popup="{{}}" 
               ng-model="s.endDate" 
               is-open="datePicker.isOpen.endDate" 
               datepicker-options="datePicker.dateOptions" 
               ng-required="true"
               close-text="Close"
               ng-click="datePicker.open($event, 'endDate')"/>
            <span class="form-control-feedback glyphicon glyphicon-calendar"></span>
         </div>
      </div>
   </div>
</div>

我如何id="endDate+{{$index}}"在 datepicker 输入中使用ng-disabled="ss.datePickerStartDateEnabled"和ss.datePickerEndtDateEnabled在我的控制器中根据上面的条件禁用单个日期选择器。

我需要进行其他验证，例如没有重叠的日期，并且开始日期必须在上一个结束日期之后。我试图先解决简单的情况。

提前致谢。这是 plunker代码，这是UI，但日期时间选择器不起作用。全屏查看以获得更好的用户界面。

4

2 回答 2

0

我能够使用以下模式解决此问题。

如果日期已过期，我委托 UI 逻辑禁用 datepicker(s) DatePickerCtrl。

angular.module('someApp')
.controller('DatePickerCtrl', ['$filter', function($filter) {

    var datePicker = this;

    datePicker.dateOptions = {
        formatYear: 'yy',
        startingDay: 1,
    };

    var today = $filter('date')(new Date(), "yyyy-MM-dd");

    datePicker.startDateDisable = startDateDisable;
    datePicker.endDateDisable = endDateDisable;
    datePicker.open = open;

    //Useful to manage more than one datepicker in the same view
    //E.g. datepickers created in a ngRepeat
    datePicker.isOpen = {};

    function open($event, which) {
        $event.preventDefault();
        $event.stopPropagation();
        datePicker.isOpen[which] = true;
    }

    function startDateDisable(startDate) {
        return startDate <= today ? true : false;
    }

    function endDateDisable(endDate) {
        return endDate <= today ? true : false;
    }

    //Date format could come from user's profile preferences
    datePicker.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    datePicker.format = datePicker.formats[2];
}])

startDateDisable(startDate)和endDateDisable(endDate)函数是唯一相关的函数 。

接下来，我ng-disabled在 datepicker 输入上使用了指令，如下所示：

<div class="form-group has-feedback">
   <label for="username">Start Date</label>
   <input 
      type="text" 
      class="form-control" 
      id="startDate{{$index}}"
      uib-datepicker-popup="{{format}}" 
      ng-model="s.startDate" 
      is-open="datePicker.isOpen.startDate" 
      datepicker-options="datePicker.dateOptions" 
      ng-required="true"
      ng-disabled="datePicker.startDateDisable(s.startDate)"
      close-text="Close"
      ng-click="datePicker.open($event, 'startDate')"
      date-validation/>
   <span class="form-control-feedback glyphicon glyphicon-calendar"></span>
</div>

相关代码ng-disabled="datePicker.startDateDisable(s.startDate)"在s.startDate我的输入模型中。DatePickerCtrl负责管理 UI 状态。数据来自另一个控制器。

相同的逻辑适用于 endDate。

于 2016-04-05T18:06:03.100 回答
0

使用 ng-disabledinput是正确的方法。

你的评论，

到目前为止它有效，但它禁用了不少于今天的 startDate。

让我认为您的日期比较可能存在缺陷，例如，如果他们比较不同的日期格式。在日期比较之后，禁用inputvia ng-disabled 应该就是所有这些了。

ng-disabled="ss.datePickerStartDateEnabled" 您在其本质上说“如果启用则禁用”的地方也有一些语义混淆 。

于 2016-04-05T16:25:53.237 回答