[Resolved] How to restrict date picker field on CRED form with year range

[Author]

Posts

[annaA-2]

Tell us what you are trying to do?
I'm trying to restrict date picker field on CRED form with year range

Is there any documentation that you are following?
Yes, this Minesh post solution (https://toolset.com/forums/topic/cred-module-restrict-date-range/)

Is there a similar example that we can see?
I've added his custom code with no result:

jQuery(document).ready(function($) {

field_id_display = jQuery('input[name="wpcf-data-di-nascita[display-only]"').attr('id');
field_id_picker = jQuery('input[name="wpcf-data-di-nascita[datepicker]"').attr('id');

jQuery( "#"+field_id_display ).datepicker({
showOn: "button",
altFormat: '@',
altField: '#'+field_id_picker,
changeMonth: true,
changeYear: true,
buttonImage: "<u>hidden link</u>",
yearRange: "1900:2000",
buttonImageOnly: true,
onClose: function( selectedDate ) {
stamp = jQuery('#'+field_id_picker).val()/1000;
jQuery('#'+field_id_picker).val(stamp);
}

});

});

What is the link to your site?
It's a develop site (www.demunc.it)

Could you help me please. Thanks for help. Best.

Anna

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please tell me where you added the date field on what post/page (please share problem URL) and send me temporary admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[annaA-2]

UPDATE::
I was able to add a personal image fo data picker editing the code:

jQuery(document).ready(function($) {

field_id_display = jQuery('input[name="wpcf-data-di-nascita[display-only]"').attr('id');
field_id_picker = jQuery('input[name="wpcf-data-di-nascita[datepicker]"').attr('id');

jQuery( "#"+field_id_display ).datepicker({
showOn: "button",
altFormat: '@',
altField: '#'+field_id_picker,
changeMonth: true,
changeYear: true,
buttonImage: "hidden link",
yearRange: "1900:2050",
buttonImageOnly: true,
onClose: function( selectedDate ) {
stamp = jQuery('#'+field_id_picker).val()/1000;
jQuery('#'+field_id_picker).val(stamp);
}

});

});

But now when I save system doesn't save the date I select.

Thanks in advance for your help.

[annaA-2]

UPDATE:

I change code and now I see my pic.

jQuery(document).ready(function($) {

field_id_display = jQuery('input[name="wpcf-data-di-nascita[display-only]"').attr('id');
field_id_picker = jQuery('input[name="wpcf-data-di-nascita[datepicker]"').attr('id');

jQuery( "#"+field_id_display ).datepicker({
showOn: "button",
altFormat: '@',
altField: '#'+field_id_picker,
changeMonth: true,
changeYear: true,
buttonImage: "hidden link",
yearRange: "1900:2050",
buttonImageOnly: true,
onClose: function( selectedDate ) {
stamp = jQuery('#'+field_id_picker).val()/1000;
jQuery('#'+field_id_picker).val(stamp);
}

});

});

But if I change data system doesn't save it.
I can I solve it?

Thanks in advance.

[Minesh]

What you mean by change the data - do you mean if you change the date, the selected date is not shown?

[annaA-2]

Yes, sorry, if I changed the date of birth it didn't save it.

Now it saves it but when Igo into the form I don't see the date...

The issue changes any time...I don't know why and what I have to solve before...

I'm getting mad 🙁

[Minesh]

I've commented out the code you added and replace it with the following code:

jQuery(window).bind("cred_form_ready", function() {
   
              jQuery('input[name="wpcf-data-di-nascita[display-only]"').each(function() {
                   value = jQuery(this).val();
                  jQuery(this).datepicker("option","yearRange","1900:2050");
                jQuery(this).datepicker('option', 'buttonImage','<em><u>hidden link</u></em>');
                jQuery(this).val(value);
             });
 
});

Please try to clear the browser cache and test, it should work now.

[annaA-2]

My issue is resolved now. Thank you!