CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
user1260928
user1260928

Reputation: 3429

uib-datepicker : minDate doesn't seem to work

I don't know how to make the minDate property of my uib-datepicker work.

Here is what I have done:

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

When I click on the first date, I want to disable all the dates previous to this date in the second datepicker.
If anyone has any idea...

Thank you.

Upvotes: 0

Views: 1177

Answers (2)

Saad
Saad

Reputation: 952

As jmoreno pointed out, minDate is a property of an object and that object you need to pass through datepicker-options attribute in the element.

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

This is the basic. Now as you want to set the second datepicker's minDate to the first datepicker's selected date, you can use ng-change of the first datepicker element to change the minDate in vm.dateOptions2 object of the second datepicker.

<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);
  }

This plunker will give you more clear idea.

Upvotes: 1

jmoreno
jmoreno

Reputation: 81

As you can see on docs (https://angular-ui.github.io/bootstrap/#/datepicker) minDate is a property of a config Javascript object passed in datepicker-options to datepicker directive.

Upvotes: 1

Related Questions