[Closed] disabling dates in the datepicker

[Author]

Posts

[ianG-5]

I have a lot of different date pickers and I need to be able to disable dates (or more accurately only allow dates based on a list [ from backend ajax])

I have tried :

var array = ["2021-07-14","2021-07-15","2021-07-16"]
$('input.hasDatepicker').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
}
});

which should do the inverse of what I need, but nothing.

I have tried:
$( "input.hasDatepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
but also does nothing.

I have even tried:
jQuery(document).ready(function(){
jQuery('input.hasDatepicker').datepicker('option','onClose',function(){
console.log('close');
});
jQuery('input.hasDatepicker').datepicker('option','onSelect',function(){
console.log('select');
});
});

from https://toolset.com/forums/topic/datepicker-change-event/ still nothing...

[Minesh]

Hello. Thank you for contacting the Toolset support.

As I understand - you want to disable the selection of specific dates on the date picker?

If yes, can you please share admin access details as well as on what page/post you added the datepicker field?

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) 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.

[ianG-5]

I appreciate you are trying to help in the easiest way possible.
Should the code I've been trying work? Is what I'm trying to do possible?
Please provide code, there is no need for admin access.

[Minesh]

Here is the sample code that shows how you can disable specific dates using jQuery date picker:
- https://stackoverflow.com/questions/9742289/jquery-ui-date-picker-disabling-specific-dates

You will have to target your field using CSS ID or CSS class if you do not know how to do it, that is why I will require admin access details so that I can review where you added the date picker field on what page/post and what dates you would like to hide.

You should try it first on your own and let me know if you will require further assistance.

[ianG-5]

Can you please answer some of the questions I have asked.
- Should the code I've been trying work?
- Is what I'm trying to do possible?

One of the code samples was from a Toolset post (as linked) but the jQuery('input.hasDatepicker') selector doesn't seem to work. (is present in the html).

Have you tried the code you are suggesting?

I have previously tried that code and again now:

                  
var unavailableDates = ["20-7-2021", "22-7-2021", "15-7-2021"];

    function unavailable(date) {
        dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
        if (jQuery.inArray(dmy, unavailableDates) == -1) {
            return [true, ""];
        } else {
            return [false, "", "Unavailable"];
        }
    }
    jQuery(function() {
        jQuery('input[name="testing[display-only]"]').datepicker({
            dateFormat: 'dd MM yy',
          	beforeShowDay: unavailable
        });

      jQuery("#cred_form_6903_1_testingdatepicker").attr('type', 'text');

    });

When applied these edits work, but they prevent the hidden field from being populated.

[Minesh]

I cant say anything until I check where exactly you are looking to apply the above code as there are lots of possibilities that code should not run as expected due to conflicts or as you shared even if code applied it could not work.

That is why its important for me to look at where exactly you are trying to apply the code and once I review that I'll be able to guide you in the right direction.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) 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.

[ianG-5]

Please refer this ticket to a different staff member.

[Luo Yang]

Hello,

I assume we are talking about a custom date field of Toolset post form.

If it is, you can try the JS event "cred_form_ready", for example:

var unavailableDates = ["20-7-2021", "22-7-2021", "15-7-2021"];
 
function unavailable(date) {
	dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
	if (jQuery.inArray(dmy, unavailableDates) == -1) {
		return [true, ""];
	} else {
		return [false, "", "Unavailable"];
	}
}
jQuery(document).on('cred_form_ready', function(){
	jQuery('input[name="testing[display-only]"]').datepicker({
		dateFormat: 'dd MM yy',
		beforeShowDay: unavailable
	});
});

I have tried it in my localhost, it works fine, see my screenshot datepicker2.JPG

[ianG-5]

Thank Luo,

Exactly that, for me it displays correctly with or without the

(document).on('cred_form_ready',

But as you will see if you add the

jQuery("#cred_form_6903_1_testingdatepicker").attr('type', 'text');

The hidden field is never populated and so data is never saved to the datebase!

I have just change the field from a generic field to a custom field to prove the point and definitely no data is saved.

                  
var unavailableDates = ["20-7-2021", "22-7-2021", "15-7-2021"];

    function unavailable(date) {
        dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
        if (jQuery.inArray(dmy, unavailableDates) == -1) {
            return [true, ""];
        } else {
            return [false, "", "Unavailable"];
        }
    }
    jQuery(document).on('cred_form_ready', function(){
        jQuery('input[name="wpcf-date-c9c197b4[display-only]"]').datepicker({
            dateFormat: 'dd MM yy',
          	beforeShowDay: unavailable
        });

      jQuery('input[name="wpcf-date-c9c197b4[datepicker]"]').attr('type', 'text');

    });

[cred_field field='date-c9c197b4' force_type='field' class='form-control' output='bootstrap']

[Luo Yang]

You need to set the hidden date field "wpcf-date-c9c197b4[datepicker]" as timestamp value, for example, you can modify your JS codes as below:

var unavailableDates = ["20-7-2021", "22-7-2021", "15-7-2021"];
 
function unavailable(date) {
	dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
	if (jQuery.inArray(dmy, unavailableDates) == -1) {
		return [true, ''];
	} else {
		return [false, "", "Unavailable"];
	}
}
jQuery(document).on('cred_form_ready', function(){
	jQuery( 'input[name="wpcf-date-c9c197b4[display-only]"]' ).datepicker({
		dateFormat: 'dd MM yy',
		beforeShowDay: unavailable,
      	onSelect: function(mydate){
          jQuery('input[name="wpcf-date-c9c197b4[datepicker]"]').val(Date.parse(mydate)/1000);
        }
	});
});

More help:
hidden link

[ianG-5]

I see so rather than changing or updating the toolset datepicker instance, this is creating a new one and therefore this function needs to be added back in?

[Luo Yang]

Above JS codes works fine in my localhost, since it is a custom JS codes problem, if you need more assistance for it, please provide a test site with the same problem, also point out the problem page URL and form URL, I need a live website to test and debug.