如果日期小于当前日期，则禁用ui bootstrap datepicker-AngularJS ngRepeat

Question

How can I disable each individual datepicker if the date model is less than the current date or if the date has "expired".

I am developing a UI with datepickers for start and end dates. Initially, the UI can have as many datepickers as needed depending on the data returned from a backend. Users can also add more date pickers.

Here is a sample data I am using to build datepickers with ngRepeat .

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

I am creating a UI where users can change dates via datepickers only if the start and end date has not expired. In cases where the date has expired the datepicker needs to be disable.

Here is my UI for reference.

My current approach is to iterate through seasons array and check if the startDate is less than today.

        ss.datePickerStartDateEnabled = false;

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

So far it works but it disables startDate that is not less than today.

Here's my 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>

How could I use id="endDate+{{$index}}" in the datepicker input along with the ng-disabled="ss.datePickerStartDateEnabled" and ss.datePickerEndtDateEnabled in my controller to disable a single date picker based on the condition from above.

There are other validations that I need to do eg no overlapping dates and start date must be after the previous end date. I am trying to solve the easy case first.

Thanks in advance. Here is the the plunker code and here is the UI , tho the datetime picker is not working. See it full screen for better UI.

Answer 1

Using ng-disabled on the input is the right approach.

Your comment,

So far it works but it disables startDate that is not less than today.

Makes me think that your date comparison may be flawed, for example, if they are comparing different date formats. After the date comparison, disabling the input via ng-disabled should be all there is to this.

You also have some semantic confusion in ng-disabled="ss.datePickerStartDateEnabled" Where it essentially says "disable if enabled".

Answer 2

I was able to solve this problem using the following pattern.

I delegated the UI logic to disable datepicker(s) if the date has expired to my 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];
}])

The startDateDisable(startDate) and endDateDisable(endDate) functions are the only relevant ones.

Next, I used ng-disabled directive on the datepicker input as such:

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

The relevant code is ng-disabled="datePicker.startDateDisable(s.startDate)" where s.startDate in my input model. The DatePickerCtrl is responsible for managing the UI state. The data comes from another controller.

The same logic applies for endDate.