Support

Account

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

Solving

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();
    $(“#seconddate”).find(‘input[type=text]’).val(date.toLocaleDateString(‘en-GB’));
    $(“#seconddate”).find(‘input[type=hidden]’).val(gyear+gmonth+gday);
    } else {
    alert(“Invalid Date”);
    }
    }
    });
    })(jQuery);

    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, http://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/
    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:

    https://www.damiencarbery.com/2021/10/acf-date-time-picker-set-end-date-to-after-start-date/

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

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