[Resolved] Can't limit dates in jQuery UI Datepicker in front-end Toolset Form

[Author]

Posts

[alisonC]

I have a form field w/ a datepicker. In the front-end form, I'm trying to use the following code to limit the datepicker so the user can't choose a date after today:

jQuery(document).on('cred_form_ready', function() {

jQuery( ".cr-date" ).datepicker({
maxDate: 0
});

});

My code is living in the Javascript box in the form interface. I have confirmed that the code is running and the selector is working by adding some simple CSS to the form, but although the jQuery above doesn't throw any console errors, it doesn't appear to be doing anything. When I look at the jQuery UI datepicker documentation, this looks like it should work. Any insight?

I'm using Toolset Forms 2.6.13, but created the form in CRED forms many versions back. (Not sure if this matters.)

Thanks for your help!

[Nigel]

Hi there

Can you try the following code (note, it is for a custom field "due-date", you'll need to edit that to match the field name you want to apply this to):

jQuery(window).bind("cred_form_ready", function() {
   
    jQuery('input[name="wpcf-due-date[display-only]"]').datepicker('option', 'maxDate', '0' );

});

We do have an internal ticket about making an explicit event for when the datepicker is initialised and available for modification, but for the time being the above should work (I just tested it on my own site).

[alisonC]

Thank you Nigel, that worked like a charm!

One follow-up question -- the field in question is simply the post published date (wpv-post-date). Currently, the date is not populating in the post edit form until a change is made. Can you tell me how to make the currently-saved post date populate the date input field when the form loads?

Apologies for not including this in my original question, and thanks again for your help!

[Minesh]

Hello. Thank you for contacting the Toolset support.

There are multiple ways either using filter hook or using the custom JS code.

Can you please share problem URL where you added the form and with what field you want to set the default value.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site. I have set the next reply to private which means only you and I have access to it.

[Minesh]

I see you have added the "wpv-post-date" field using the generic date field.

Do you really want to display that field or when user save the form the current post date value which user is editing can automatically saved to the generic field "wpv-post-date".

Can you please explain me what is the purpose you are saving the "wpv-post-date" using generic field?

[alisonC]

The functionality I would like to see for the user is to

1. see the current value saved for the post date on form load
2. be able to update the post date value and save
3. if the user saves without updating, the post date remains unchanged (meaning, I do not want to display the "modified on" date anywhere...I only want the date visible to the user to change if they manually change it in this edit form).

I suppose I could use a custom date field, but I thought it would be cleaner to simply use the built-in WP post date.

[Minesh]

Yes - custom date field created using Types would be the good option and will help you later as well as the field values is saved with Types data structure.

What if you create a custom field group and assign this group to display with post type "practices" and add the custom date field created using types and then add this custom date field to your form that will make the life easy. Would you mind to try that.

[alisonC]

Thanks Minesh. I have everything almost working with a new custom date field. In the "Add a Post" form, I have this JS:

jQuery(window).bind("cred_form_ready", function() {

	var today = new Date();
	var todayOptions = { year: 'numeric', month: 'long', day: 'numeric' };
	var now = today.toLocaleDateString('en-US', todayOptions);
  
	jQuery( 'input[name="wpcf-user-date[display-only]"]' ).datepicker('option', 'maxDate', '0' ).val(now);

	jQuery( 'input[name="wpcf-user-date[datepicker]"]' ).val(
		Math.floor(Date.now() / 1000)
	);   
});

This is properly displaying today's date by default in a nice-to-read format, and allowing the user to choose a new date. It also prevents the user from choosing a date in the future. Nice!

The remaining problem is in the edit post form. When I add the datepicker option to limit to today or past dates, the default value doesn't display. I'm not sure what to add for

val( )

to make the currently-saved wpcf-user-date value:

jQuery(window).bind("cred_form_ready", function() {    
    jQuery('input[name="wpcf-user-date[display-only]"]').datepicker('option', 'maxDate', '0' ).val(HOW DO I GET WPCF-USER-DATE HERE?); 
});

[Minesh]

What date you want to set that - publish date of the post that you are currently editing or modified date?

[alisonC]

When the edit form loads, I would like the datepicker field to display whatever is currently saved in the wpcf-user-date field. It should be formatted like this: December 20, 2022.

I am no longer using the WordPress default date field, so no need to worry about or address that field at all.

[Minesh]

Could you please check now.

I've added the following custom JS code to your edit form's JS editor box:

jQuery(window).bind("cred_form_ready", function() {    
  
  jQuery('input[name="wpcf-user-date[display-only]"').each(function() {
                  val = jQuery(this).val();
                  jQuery(this).datepicker("option", "maxDate", 0 );
                  jQuery(this).val(val);
                   
             });
});

Can you please confirm it works as expected:
- hidden link

[alisonC]

Yep, it's working perfectly. Thanks very much for your help!