Autocomplete end date when start date is selected

WP Datepicker is an awesome plugin but I wasn’t able to do that so had to go with jQuery UI Widgets plugin in order to pull that off.

Thanks!
Do you have ab example and info how to do this?

Once you install the plugin and enable the datepicker plus al lthe required ones all the scripts are identical to the jQuery version found in jQuery UI. This example might not work for you but in the “Custom jQuery Code” box under the settings I added this: #CheckIn is the ID my first date box and #CheckOut is the ID of my second. Also you might need to change the dateFormat to you one prefer. The last lines I also included on how to set Sunday as the first day of the week for the calendar. Keep in mind that in WordPress you need to replace $ for the word jQuery when using code from jQuery UI. I was desperate for it to work so I actually enabled everything under “use These jQuery UI Scripts” and everything under “Use These jQuery Effect Scripts”

jQuery( function() {
var dateFormat = “dd-MM-yy”,
from = jQuery( “#CheckIn” )
.datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 1
})
.on( “change”, function() {
to.datepicker( “option”, “minDate”, getDate( this ) );
}),
to = jQuery( “#CheckOut” ).datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 1
})
.on( “change”, function() {
from.datepicker( “option”, “maxDate”, getDate( this ) );
});

function getDate( element ) {
var date;
try {
date = jQuery.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );

jQuery( function() {
var dateFormat = jQuery( “#CheckIn” ).datepicker( “option”, “dateFormat” );
jQuery( “#CheckIn” ).datepicker( “option”, “dateFormat”, “dd-MM-yy” );
var dateFormat = jQuery( “#CheckOut” ).datepicker( “option”, “dateFormat” );
jQuery( “#CheckOut” ).datepicker( “option”, “dateFormat”, “dd-MM-yy” );

//getter
var firstDay = jQuery(‘#CheckIn’).datepicker(‘option’, ‘firstDay’);
//setter
jQuery(‘#CheckIn’).datepicker(‘option’, ‘firstDay’, 0);
//getter
var firstDay = jQuery(‘#CheckOut’).datepicker(‘option’, ‘firstDay’);
//setter
jQuery(‘#CheckOut’).datepicker(‘option’, ‘firstDay’, 0);

ok, thanks! ??
I tried but no luck ??

Here is your code edited:
jQuery( function() {
var dateFormat = “dd.mm.yy”,
from = jQuery( “#haaheim_date_in” )
.datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 1
})
.on( “change”, function() {
to.datepicker( “option”, “minDate”, getDate( this ) );
}),
to = jQuery( “#haaheim_date_out” ).datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 1
})
.on( “change”, function() {
from.datepicker( “option”, “maxDate”, getDate( this ) );
});

function getDate( element ) {
var date;
try {
date = jQuery.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );

jQuery( function() {
var dateFormat = jQuery( “#haaheim_date_in” ).datepicker( “option”, “dateFormat” );
jQuery( “#haaheim_date_in” ).datepicker( “option”, “dateFormat”, “dd.mm.yy” );
var dateFormat = jQuery( “#haaheim_date_out” ).datepicker( “option”, “dateFormat” );
jQuery( “#haaheim_date_out” ).datepicker( “option”, “dateFormat”, “dd.mm.yy” );

//getter
var firstDay = jQuery(‘#haaheim_date_in’).datepicker(‘option’, ‘firstDay’);
//setter
jQuery(‘#haaheim_date_in’).datepicker(‘option’, ‘firstDay’, 0);
//getter
var firstDay = jQuery(‘#haaheim_date_out’).datepicker(‘option’, ‘firstDay’);
//setter
jQuery(‘#haaheim_date_out’).datepicker(‘option’, ‘firstDay’, 0);

And my input fields:
<div class=”con”>
<label for=”ankomstdato”>Ankomstdato</label><input id=”haaheim_date_in” type=”text” class=”dato” id=”ankomstdato” name=”arrive” />
</div>

<div class=”con”>
<label for=”avreisedato”>Avreisedato</label><input id=”haaheim_date_out” type=”text” class=”dato” id=”avreisedato” name=”depart” />
</div>

• This reply was modified 5 years, 9 months ago by kjetilwaage.

Look at your fields you have 2 ID’s on them, can only have 1. id=”haaheim_date_in” type=”text” class=”dato” id=”ankomstdato”

ok, sorry..
I’ve tried to remove the second id’s, still not working.
I don’t think i understand this? :p

Do i use WP Datepicker and jQuery UI Widgets plugin together or just jQuery UI Widgets plugin alone?

Link to test form: https://www.haaheimgaard.no/test_date/

Just jQuery UI Widgets

Sorry, can’t get it to work! ??
I think i might look for another solution?

Your code that i added in Custom jQuery Code:
jQuery( function() {
var dateFormat = “dd.mm.yy”,
from = jQuery( “#haaheim_date_in” )
.datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 1
})
.on( “change”, function() {
to.datepicker( “option”, “minDate”, getDate( this ) );
}),
to = jQuery( “#haaheim_date_out” ).datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 1
})
.on( “change”, function() {
from.datepicker( “option”, “maxDate”, getDate( this ) );
});

function getDate( element ) {
var date;
try {
date = jQuery.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );

jQuery( function() {
var dateFormat = jQuery( “#haaheim_date_in” ).datepicker( “option”, “dateFormat” );
jQuery( “#haaheim_date_in” ).datepicker( “option”, “dateFormat”, “dd.mm.yy” );
var dateFormat = jQuery( “#haaheim_date_out” ).datepicker( “option”, “dateFormat” );
jQuery( “#haaheim_date_out” ).datepicker( “option”, “dateFormat”, “dd.mm.yy” );

//getter
var firstDay = jQuery(‘#haaheim_date_in’).datepicker(‘option’, ‘firstDay’);
//setter
jQuery(‘#haaheim_date_in’).datepicker(‘option’, ‘firstDay’, 0);
//getter
var firstDay = jQuery(‘#haaheim_date_out’).datepicker(‘option’, ‘firstDay’);
//setter
jQuery(‘#haaheim_date_out’).datepicker(‘option’, ‘firstDay’, 0);

My input fields in my form:
<div class=”con”>
<label for=”ankomstdato”>Ankomstdato</label><input id=”haaheim_date_in” type=”text” class=”dato” name=”arrive” /></div>

<div class=”con”>
<label for=”avreisedato”>Avreisedato</label><input id=”haaheim_date_out” type=”text” class=”dato” name=”depart” /></div>

Still not working? If not, i can help you.

No, still not working…
A little help would have been fantastic! ??

If you are comfortable so we can test it together on demo environment, here. Can you please reach me so i can assign you login access for this?

Thanks!
Can you please send me a mail to: kjetil(a)vestbris.no ?
You can help me directly on my site if it’s possible?