Forums

Hi there!

A blast from the past but I can't figure out how I did this in the past. I need to block specific dates (12/24, 12/25, 12/31, 1/1) on a datepicker.

How can I achieve this? I've searches high and low and can't find anything.

Is it possible?

Thanks in advance.

Hello afterimage,
I'm not a Chrono professional, but after checking your new post, I think that the following links may help:
How can I set start and end dates for a datepicker?
P.S: I'm just an automated service😉

HI afterimage

That is from the past - I think that CFv3 used Aeron Glemann's Calendar component - the docs here show that there is a 'blocked' option that might do what you need.

Bob

Wonderful, thanks for your great support!

HI afterimage

That is from the past - I think that CFv3 used Aeron Glemann's Calendar component - the docs here show that there is a 'blocked' option that might do what you need.

Bob

Does this still work for Chronoforms 5? Or will there be an implementation in an update to do this function?

Hi toad,

I don't think there's an easy way to do that with the standard CF datepicker - if you use the jQuery UI datepicker instead then there are some flexible blocking methods. There's a good tutorial here from SpiceForms.

Bob

Okay, I will give it a whirl and see how it works.

So after trying this example, the first two dates I've entered to be unavailable work, except for the last date.

jQuery(document).ready(function (jQ) {
  jQ( '#dp_a' ).datepicker({
    minDate: 0,
    onSelect: checkDate
  });

  function checkDate(start_date, el) {
    jQ( '#dp_b' ).datepicker('option', 'disabled', false);
    jQ( '#dp_b' ).datepicker('option', 'minDate', start_date);
  }

  // note the following line would be set dynamically in a real application
  var unavailableDates = ['9-3-2016','19-3-2016','29-3-2016'];

  jQ( '#dp_b' ).datepicker({
    numberOfMonths: 6,
    minDate: +10,
    maxDate: '+1M +10D',
    beforeShowDay: unavailable
  });

  jQ( '#dp_b' ).datepicker('option', 'disabled', true);

  function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    if (jQ.inArray(dmy, unavailableDates) == -1) {
       return [true, ''];
    } else {
      return [false, '', 'Unavailable'];
    }
  }
});

The last date is not only highlighted but the last week of the month is selected and the other months afterwards. This is odd behavior and doesn't match the example screenshot shown on this page.

[attachment=0]calendar-unavailable-dates.GIF[/attachment]

So then where is the malfunction coming from?

I've managed to fix that problem. Apparently there was a missing comma in the dates variable.