CODEWITHSUNDEEP
angularjsdatepickerangular-ui-bootstrap
Bhavesh Chauhan
Bhavesh Chauhan

Reputation: 1053

How to validate dates in datepicker with xeditable+angularjs?

I have two date start date and end date.once i select start date then end date should not be less then start date.means these date should be disabled to click which less then start date in end date datepicker.

Html

<div class="col-sm-8">
                      <p class="form-control-static">
                        <span editable-bsdate="data.season_start" e-ng-click="openPicker()"  e-is-open="picker.opened" e-datepicker-popup="dd-MMMM-yyyy">{{ (data.season_start | date:"dd/MM/yyyy") || 'empty' }}</span>
                      </p>
 </div>

<div class="col-sm-8">
                      <p class="form-control-static">
                        <span editable-bsdate="data.season_end" e-ng-click="openPicker2()"  e-is-open="picker2.opened" e-datepicker-popup="dd-MMMM-yyyy">{{ (data.season_end | date:"dd/MM/yyyy") || 'empty' }}</span>
                      </p>
 </div>

Angular :

 $scope.picker = {opened: false};
 $scope.openPicker = function (data) {
                    $scope.picker.opened = true;
             });
  };
    $scope.picker2 = {opened: false};
    $scope.openPicker2 = function (data) {
                    $scope.picker.opened = true;
                });
        };

My date picker is working fine.but i want to validate in season_end datepicker as per season_start.thanks

Upvotes: 1

Views: 965

Answers (1)

Jony-Y
Jony-Y

Reputation: 1579

as akashrajkn wrote in the comments above you can simple use the min-date with a scope variable here is an example on how to use min and max dates.plunker

taken from AngularUI Datepicker dynamic date disabling

 <h4>Start</h4>
<div class="form-horizontal">
    <p>
        <input type="text" datepicker-popup="{{format}}" ng-model="start" is-open="startOpened" min="minStartDate" max="maxStartDate" datepicker-options="dateOptions" close-text="Close" />
        <button class="btn" ng-click="openStart()"><i class="icon-calendar"></i></button>
    </p>
</div>
<h4>End</h4>
<div class="form-horizontal">
    <p>
        <input type="text" datepicker-popup="{{format}}" ng-model="end" is-open="endOpened" min="minEndDate" max="maxEndDate" datepicker-options="dateOptions" close-text="Close" />
        <button class="btn" ng-click="openEnd()"><i class="icon-calendar"></i></button>
    </p>
</div>

and in the controller do what it is that you need.

Upvotes: 1

Related Questions