Search code examples
javascripthtmlangularjsangular-ui-bootstrapangular-ui

Angular-UI Datepicker min-date setting with another date


When user inputs date range using angular-ui Datepicker, I wanna make mindate of EndDate set 'StartDate`.

in my view,

<div class="input-daterange input-group" id="datepicker">
  <input type="text" class="input form-control" name="ev_StartDate"
   ng-model="evStartDate" ng-required="true" is-open="startPop.opened"
   ng-focus="openStart()" uib-datepicker-popup="{{format}}" 
   alt-input-formats="altInputFormats" datepicker-options="startDateOptions" 
   readonly="true">
  <span class="input-group-addon">~</span>
  <input type="text" class="input form-control" name="ev_EndDate" 
   ng-model="evEndDate" ng-required="true" is-open="endPop.opened" 
   ng-focus="openEnd()" uib-datepicker-popup="{{format}}" 
   alt-input-formats="altInputFormats" datepicker-options="endDateOptions" 
   readonly="true">
</div>

which directive is right to use?

$scope.startDateOptions = {
  showWeeks: false,
  startingDay: 1
};

$scope.setOption = function() {
   ????????
  };

$scope.endDateOptions = {
  showWeeks: false,
  startingDay: 1,
  minDate: ?????
};

Solution

  • You can use min-date attribute, where you can directly pass in the scope variable of startdate which is evStartDate. Add below attribute to End date input element.

    min-date="evStartDate"