Recent searches
No recent searches
Help Center Form - Date Picker Set by Javascript
Posted Jun 22, 2023
Hi! I have two custom fields on my Help Center form, both are date-picker fields. I am looking to auto-set the second field when the first field changes.
The two fields are similar to reservation fields, like a "check in" and "check out" date. When the "check in" date is selected, I would like the "check out" date to auto-set to the "check in" date, so its easier for the user to find their "check out" date.
Ideally, it would be great to only do this when the "check out" date is null, and to set the "check out" to 1 day after the "check in" by default, but for now just matching the two fields would be a great start!
I was able to get the following code to work (just as a starting place):
document.addEventListener('DOMContentLoaded', function() {
$('#request_custom_fields_1').val("2022-02-01");
$('#request_custom_fields_2').val($('#request_custom_fields_1').val());
})
So I got the two fields talking to each other (when the first field is manually set by code rather than by user). I need to now set it so it changes when the USER updates the first field. I tried some various online solutions about using the change event, but it didnt work.
Any ideas? Seems like a good ask for Ifra Saqlain if they are available :)
0
10 comments
Ifra Saqlain
Hey Alek Reed, try this plugin, it works amazing as you want, also I tried it for my form -
https://jqueryui.com/datepicker/#date-range
If any issue occurs during the implementation, let me know :)
Thanks
0
Dustin Swayne
Ifra Saqlain I tried using the following per your link and its not setting the restrictions. <script>
$( function() {
$( "#request_custom_fields_XXXXXXXXXXX" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
} );
</script>
0
Dustin Swayne
0
Ifra Saqlain
Hi Mr. Dustin Swayne,
I'll get back to you soon :)
Thanks
1
Dustin Swayne
Ifra Saqlain Trying to set the minDate of the calendar to 60+ days from today's date so that no dates prior to 60 days out can be selected. Is this possible with javascript or is it something with pikaday?
Thanks for your help in advance.
0
Dustin Swayne
@Ifra Saqlain
I was able to get the following to work, however, I cannot clear the date after alert automatically. Any thoughts?
0
Dustin Swayne
Was able to fix it by adding these two lines after the alert:
0
Dustin Swayne
Ifra Saqlain any luck on being able to set min or max date range with the date picker in the form?
0
Ifra Saqlain
Hi Mr. Dustin,
Please try this code to set the minimum and max date in the above plugin.
0
Jérémy
Hi Dustin Swayne
I believe the issue with this approach is exactly that:
To work around the problem while still using the method Ifra suggested, here is how you could potentially make it work:
The idea is to completely get rid of the native field (be mindful of which element(s) you remove - I only had 1 date field in the form when testing) and create your own custom one while replicating the logic that makes it sync to the backend (as a bonus, you can even choose the way it displays in the field after a selection).
You can add some extra logic to check for a specific form, etc… if needed.
Of course, remember to:
I hope that helps!
0