Angular daterangepicker - min date on "FROM" - angularjs

Question

i need to set "from" and "to" date. I want on "from" set only from tomorow or any date in future, not in past. And after select start date, then enable "to" picker and set end date, but with min day range. And show day range in dom.
I try github solution from official page, but everything is from bootstrap daterange not for angular daterange. Thnx
here is html code
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p class="input-group">
<input type="text"
class="form-control"
datetime-picker="yyyy-MM-dd"
ng-model="ctrl.picker4.date"
is-open="ctrl.picker4.open"
enable-time="false"
datepicker-options="ctrl.picker4.datepickerOptions"
myformat
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker4')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12 form-group">
<label class="col-lg-2 col-xs-2 control-label" style="color: #fff">To</label>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p class="input-group">
<input type="text"
class="form-control"
datetime-picker="yyyy-MM-dd"
ng-model="ctrl.picker5.date"
is-open="ctrl.picker5.open"
enable-time="false"
datepicker-options="ctrl.picker5.datepickerOptions"
myformat
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker5')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
and here is controller
//date picker
var that = this;
// date picker
// min date picker
this.picker4 = {
date: new Date(),
datepickerOptions: {
showWeeks: true,
startingDay: 1,
maxDate: null
}
};
// max date picker
this.picker5 = {
date: new Date(),
datepickerOptions: {
showWeeks: true,
startingDay: 1,
minDate: null
}
};
/*
// set date for max picker, 10 days in future
this.picker5.date.setDate(this.picker5.date.getDate() + 10);
*/
// when closed picker
this.picker13 = {
date: new Date(),
closed: function (args) {
that.closedArgs = args;
}
};
this.openCalendar = function (e, picker) {
that[picker].open = true;
};
// watch min and max dates to calculate difference
var unwatchMinMaxValues = $scope.$watch(function () {
return [that.picker4, that.picker5, that.picker10, that.picker11];
}, function () {
// min max dates
that.picker4.datepickerOptions.maxDate = that.picker5.date;
that.picker5.datepickerOptions.minDate = that.picker4.date;
if (that.picker4.date && that.picker5.date) {
var diff = that.picker4.date - that.picker5.date;
that.dayRange = Math.round(Math.abs(diff / (1000 * 60 * 60 * 24)))
} else {
that.dayRange = 'n/a';
}
}, true);
// destroy watcher
$scope.$on('$destroy', function () {
unwatchMinMaxValues();
});

Answer 1

if you are using date ranges better to use daterangepicker (http://www.daterangepicker.com/). This will avoid hassles to write validation code for start date and end date. If you select Start date you will be able to select End Date after the Start Date only. no need to write validation code.

Answer 2

here is simply solution. We need to delete this from controller
that.picker4.datepickerOptions.maxDate = that.picker5.date;
and everything work. Now i dont need enable end date because this is working solution. But from code in my first question, i need to show daterange. I make code but i think, because i change date format, dayRange can not calculate.
if (that.picker4.date && that.picker5.date) {
var diff = that.picker4.date - that.picker5.date;
that.dayRange = Math.round(Math.abs(diff / (1000 * 60 * 60 * 24)))
} else {
that.dayRange = 'n/a';
}
Please take a look on code. Thnx

Answer 3

i have using the directive for date picker for start date minimum minDate:new Date().getDate+0, and maximum maxDate:new Date().getDate+30 ihave using bootstrap-datetimepicker
module.directive('examdatepicker1', function() {
return function(scope, element, attrs) {
var currentYear=new Date().getFullYear();
var finalYear=parseInt(new Date().getFullYear())+1;
$(element).datepicker({
dateFormat: 'yy/mm/dd',
changeYear: true,
changeMonth: true,
yearRange: currentYear+":"+finalYear,
minDate:new Date().getDate+0,
//maxDate:new Date().getDate+30,
onClose: function(date){
//var datearray = date.split("/");
//var newdate = datearray[1] + '/' + datearray[0] + '/' + datearray[2];
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var minimum = new Date(selectedDate.getTime());
//var maximum = new Date(selectedDate.getTime() + (30*msecsInADay));
$("#end_exam_date").datepicker( "option", "minDate", minimum );
}
});
return false;
}
});
and for second datepicker
module.directive('examdatepicker2', function() {
return function(scope, element, attrs) {
var currentYear=new Date().getFullYear();
var finalYear=parseInt(new Date().getFullYear())+1;
$(element).datepicker({
dateFormat: 'yy/mm/dd',
changeYear: true,
changeMonth: true,
yearRange: currentYear+":"+finalYear
});
return false;
}
});
In Html
<input class="form-control bg-color-white" id="end_exam_date" name='end_exam_date' ng-model="end_exam_date" class="form-control" examdatepicker1 readonly required>