How to validate dates in datepicker with xeditable+angularjs?

Question

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

are you using any libraries? or did you make your own custom date-picker? Did you use the one provided by 'ui-bootstrap' ? — akashrajkn
– akashrajkn, Commented Jun 16, 2015 at 6:22
use the min-date attribute.... after selecting the first date, update minDate variable — akashrajkn
– akashrajkn, Commented Jun 16, 2015 at 6:32

Community · Accepted Answer · 2017-05-23 12:22:25Z

1

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.

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Jun 16, 2015 at 6:46

Jony-Y

1,5791 gold badge13 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bhavesh Chauhan Over a year ago

also $watch will not work in editable bcz it's model name would change on edit

Jony-Y Over a year ago

I assume that using xeditable is mandatory for you? so provide a jsfiddle or plunker and we can try to help.

Collectives™ on Stack Overflow

How to validate dates in datepicker with xeditable+angularjs?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related