I am trying to last one week to customize Semantic UI Calendar Disable past dates it is possible. I want like this I pasted example URL below. and my condition is if I select end date then if I open start date so whatever end date I have selected in start calendar after that day all days will be disabled.
Example:
http://jsfiddle.net/nicolapeluchetti/dAyzq/1/
$containerEventsAlerts.find('#rangeStart').calendar({
type: 'date',
maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
endCalendar: $containerEventsAlerts.find('#rangeEnd'),
onChange: function(date, text, mode) {
var $rangeEnd = $('#rangeEnd input');
if (spa.isBlank($rangeEnd.val())) {
//console.log($rangeEnd.val());
$('#rangeEnd input').val(text);
}
},
isDisabled: function(date, mode) {
return true;
},
onHidden: function() {
var $rangeStart = $('#rangeStart input');
if (spa.isBlank($rangeStart.val())) {
$rangeStart.val($('#rangeEnd input').val())
}
}
});
$containerEventsAlerts.find('#rangeEnd').calendar({
type: 'date',
maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
startCalendar: $containerEventsAlerts.find('#rangeStart'),
onChange: function(date, text, mode) {
var rangeStart = $('#rangeStart input');
if (spa.isBlank(rangeStart.val())) {
$('#rangeStart input').val(text);
}
},
onHidden: function() {
var $rangeEnd = $('#rangeEnd input');
if (spa.isBlank($rangeEnd.val())) {
$rangeEnd.val($('#rangeStart input').val())
}
}
});
There is no inbuilt solution for this in the library you are using. But there is a hack that can you do like below.
var today = new Date();
$('#rangestart').calendar({
type: 'date',
onChange: function(date, text, mode) {
$('#rangeend').calendar({
type: 'date',
minDate: date
})
}
});
$('#rangeend').calendar({
type: 'date',
onChange: function(date, text, mode) {
$('#rangestart').calendar({
type: 'date',
maxDate: date
})
}
});
There can be some more modifications required as per your need. But you have to do it all manually.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.