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/
