Date Range – Pre-populate End Date

Anonymous

#12639

Hi,

Currently, if a user enters just the Start Date into the date range fields, no results are returned as the End Date hasn’t been populated.

Is is possible to pre-populate the End Date based on the value entered in the Start Date?

For example, I am returning events by date, and I would like the End Date to be pre-populated with the date a month after the Start Date that the user enters.

Hope that makes sense.

Thanks in advance.

Ross Moderator

#12661

Hey Ben

This is not supported but you could do this with regular JS…

Something like (completely untested):

//find the first date picker and wait for a change
$(".searchandfilter .datepicker:first-child").change(function(){
    //find the other date picker and update the value
});

Thanks

Anonymous

#12680

Thanks Ross.

Where should I place this in the theme files? Currently I’ve placed it in the header above the search shortcode (as I have it on all pages).

I’m referencing JQuery in the functions.php and have added the following console.log() to see if it is being triggered.

$(".searchandfilter .datepicker:first-child").change(function(){
    //find the other date picker and update the value
	console.log("Date has changed");
});

However, this is not being triggered. I have a feeling this may be down to code placement, and not the JS.

Thanks,
Ben

Ross Moderator

#12682

Hi Ben

This is a customisation that really is out of scope of support.

There is a chance the selector is not quite right as its untested (you could always do a console log on $(".searchandfilter .datepicker:first-child").length to see if it exists) however in terms of placement, well as its a JS file it probably shouldn’t go in functions.php.

Your theme (or child theme) will usually have a JS file where the JS is placed (this can completely vary depending on the theme you are using), I would add it in here – otherwise you could create a new script and add it yourself – http://stackoverflow.com/questions/11159860/how-do-i-add-a-simple-jquery-script-to-wordpress

Also not in the above link the examples of the proper way to add jQuery code.

Thanks

Anonymous

#13181

Thanks Ross,

Here is my final JQuery solution which others may find useful:

jQuery(document).ready(function($) {

$(".searchandfilter .datepicker:first").datepicker({
        dateFormat: "dd/mm/yy",
        onSelect: function(dateText, instance) {
            date = $.datepicker.parseDate(instance.settings.dateFormat, dateText, instance.settings);
            date.setMonth(date.getMonth() + 1);
            $(".searchandfilter .datepicker:last").datepicker("setDate", date);
        }
    });
    $(".searchandfilter .datepicker::nth-child(1)").datepicker({
        dateFormat: "dd/mm/yy"
});

})

This pre-populates the End Date with a month later when the Start Date is populated.

Thanks.

Ross Moderator

#13182

Many thanks for the update Ben!

[Author]

Posts