Home Forums Backend Issues (wp-admin) Restrict datepicker ending date by starting date


Restrict datepicker ending date by starting date

  • If i have two datepickers, is there a way to restrict the second datepicker to start a day after the chosen date of the first datepicker?

  • Hi @yarongo

    The datepicker uses jquery UI datepicker and you can update the minDate and/or maxDate values like this:

    //This is an example field key. You need to use your own
    jQuery( '.acf-field-54cfe68700b24 .acf-date_picker input.input' ).datepicker( 'option', 'minDate', date.format() );

    so if you target a change in the first datepicker, find out the value set and use it to set the minDate with the above code it should work. I’ve done something similar before myself 🙂

  • I know this is an old post but it is exactly what I need to do. I am using a date and time picker field for both start and end of an event. I need to make it so that the end date and time can only be after the start date and time. I have googled for hours trying to find a solution but this one is as close as i have gotten. What i could really use is an elaboration on your suggestion.

    I am currently using a repeater field with start and end fields. What else would you need to assist me in this, or can you recommend a place for me to look. Thank you so much for helping me out.

  • Hi
    this is the code that i used:
    (function($) {
    $(‘#firstdate .acf-date-picker input.hasDatepicker’).live(“change”, function(e) {
    var getval = $(this).val();
    var dataname = $(“#firstdate”).attr(“data-name”);
    if (dataname == “fecha_de_llegada”) {
    var makedate = $(this).val().split(“/”);
    var date = new Date(makedate[1] + “/” + makedate[0] + “/” + makedate[2]);
    date.setDate(date.getDate() + 1);
    if (!isNaN(date.getTime())) {
    var getnew = date.toLocaleDateString(‘en-GB’);
    var getmyd = getnew.split(‘/’);
    var gyear = getmyd[2].toString();
    var gmonth = getmyd[1].toString();
    var gday = getmyd[0].toString();
    } else {
    alert(“Invalid Date”);

    make sure that you change the ID/classes of you element:
    #firstdate, #seconddate

    hope it helps

  • This is great and I know I am so close but should this be working for the datetimepicker field?

    I have implemented what you suggested and it looks great but I am still not getting it right. I am pretty sure that it is because I am using the ‘Date Time Picker’ field and not the ‘Date Picker’.

    Can you suggest the change I need? Thank you very much for your time and help!

  • hi
    yes, i think that i know what is the problem
    in this line: $(‘#firstdate .acf-date-picker input.hasDatepicker’).live(“change”, function(e) {

    you have to change
    acf-date-picker input.hasDatepicker -> acf-date-time-picker input.hasDatepicker

    your classes are different when you use the time picker.

  • hello to everyone, it’s just what I was looking for. However I do not know exactly where to enter the code. I do not know if the first code suggested by Jonathan is to be inserted (if it is linked in some way to the second or less), in case I do not know where. I do not even know where to put the second piece of code suggested by yarongo.
    I tried to integrate a js as suggested by this procedure,
    The code is in the page source but it does not work.
    The parameters #firstdate, #seconddate have been changed to those set by me.
    I use datapickers inside a repeating field. Thank you so much for any response.

  • This fellow explains how to use javascript to restrict the dates of the DatePickers, just used it in a project of mine:

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Restrict datepicker ending date by starting date’ is closed to new replies.