I have two datepickers (Materializecss) one for the check in date and another one for check out date. what I want is I want the check out date min date is 1 day ahead to the check in date. i got this code on pickadate js but the problem is the selected date on the first datepicker is enabled in the end datepicker. What I want to happen is when I select 9/22/2017, the minimum date on the end datepicker should be 9/23/2017
$('#dp_ci').pickadate(
{
selectMonths: true, // Creates a dropdown to control month
today: 'Today',
clear: 'Clear',
close: 'Ok',
min: new Date()
});
var from_$input = $('#dp_ci').pickadate(),
from_picker = from_$input.pickadate('picker')
var to_$input = $('#dp_co').pickadate(),
to_picker = to_$input.pickadate('picker')
// Check if there’s a “from” or “to” date to start with.
if ( from_picker.get('value') )
{
to_picker.set('min', from_picker.get('select'))
}
if ( to_picker.get('value') )
{
from_picker.set('max', to_picker.get('select'))
}
// When something is selected, update the “from” and “to” limits.
from_picker.on('set', function(event)
{
if ( event.select )
{
to_picker.set('min', from_picker.get('select'))
}
else if ( 'clear' in event )
{
to_picker.set('min', false)
}
})
to_picker.on('set', function(event)
{
if ( event.select )
{
from_picker.set('max', to_picker.get('select'))
}
else if ( 'clear' in event )
{
from_picker.set('max', false)
}
})
$('#dp_ci').pickadate(
{
selectMonths: true, // Creates a dropdown to control month
today: 'Today',
clear: 'Clear',
close: 'Ok',
min: new Date()
});
var from_$input = $('#dp_ci').pickadate(),
from_picker = from_$input.pickadate('picker')
var to_$input = $('#dp_co').pickadate(),
to_picker = to_$input.pickadate('picker')
// Check if there’s a “from” or “to” date to start with.
if ( from_picker.get('value') )
{
var today = new Date($('#dp_ci').val());
today.setDate(today.getDate() + 1)
to_picker.set('min', today)
}
if ( to_picker.get('value') )
{
var today = new Date($('#dp_co').val());
today.setDate(today.getDate() - 1)
from_picker.set('max', today)
}
// When something is selected, update the “from” and “to” limits.
from_picker.on('set', function(event)
{
if ( event.select )
{
var today = new Date($('#dp_ci').val());
today.setDate(today.getDate() + 1)
to_picker.set('min', today)
}
else if ( 'clear' in event )
{
to_picker.set('min', false)
}
})
to_picker.on('set', function(event)
{
if ( event.select )
{
var today = new Date($('#dp_co').val());
today.setDate(today.getDate() - 1)
from_picker.set('max', today)
}
else if ( 'clear' in event )
{
from_picker.set('max', false)
}
})
I added today variable (sorry wasn't able to change the name anymore :)