Date plugin: allow only certain dates?

[RobertG]

Hi,

I'm trying to authorise only certain dates in calendars with the date plugin to select a stay duration.
As I said in another thread, I'm using 2 date plugins: one for the arrival date and one for the departure.
I would like to disallow all dates before the next saturday for arrival and allow only saturday and sunday for arrival and departure.
For departure, all dates before the next saturday after arrival (1 week later) need to be disallowed too.

I learned http://fabrikar.com/forums/index.php?wiki/date-element/ and was able to disallow all dates before today with JS :

var diff = new Date().compare(new Date(date));
var result = diff < 0 ?true : false;

Using

var diff = new Date(this.get('value')).compare(new Date(date));

I can deactivate dates before those for arrivals and departures.

Now I don't understand how to allow only saturdays and sundays for arrival and departure.
How to customize the sample code for

Only allow the last Thursday of the month or Only allow the second Thursday of the month

Thanks in advance

 

[RobertG]

Hi,

I tried this and it seems to work.

var diff = new Date(this.get('value')).compare(new Date(date));
//var result = diff < 0 ?true : false;
if ((diff <0) ) {
   var result = false;
} else {
  var d = new Date(this.get('value'));
  var quantday = d.getDay();
  if ((quantday == 6) || (quantday ===0)){
    var result = false;
  } else {
    var result = true;
  }
}

Now I'm trying to figure out how to add a class name to make it clear which days are allowed and which are not.

 

[troester]

• Allow date function - An eval'ed piece of Javascript code, which is run on each day when the calendar is displayed. You have access to the 'date' variable which is the date being tested. Set a variable called 'result' to:
  • true to stop/prevent this date from being selected;
  • false to allow this date to be selected;
  • a class name to allow this date to be selected, and apply that class name to the day's cell on the calendar to e.g. show the date in a specific colour.

I didn't try. But as far as I understand you can return false or a classname to allow dates.
So something like

  if ((quantday == 6) || (quantday ===0)){
    var result = 'your-class';
  } else {
    var result = true;
  }

 

[RobertG]

Thanks troester,
I used a class to set color red and bold but the disallowed date take this color, not the allowed ones!
And I didn't find how to set a color for all the other cells .

 

[troester]

I just tried:

var d = new Date(date);
  var quantday = d.getDay();
  if ((quantday == 1) || (quantday ===0)){
    var result = 'bg-danger';
  }
  else var result = true;

gives (all but Sunday+Monday disabled, So/Mo in red)

To set all other dates you may add custom CSS for .daysrow .day {....}

 

[RobertG]

Why not for me?

  var d = new Date(this.get('value'));
  var quantday = d.getDay();
  if ((quantday == 6) || (quantday ===0) ){
    var result = 'bg-danger';
  } else {
    var result = true;
  }

Saturday and sunday are allowed, not the other days.

 

[RobertG]

What I want to do is to deactivate all dates before june 17 (because it's the next saturday after today, the first date the visitor will be able to select) and all week dates after june 18 to allow only saturdays and sundays.
I tried some changes in the JS and reached this goal but xhen I clicked on june 24, I could not get back and select june 17 or 18

 

[RobertG]

With this code, I have this display

var diff = new Date(this.get('value')).compare(new Date(date));
 if ((diff <0) ) {
   var result = 'disallowed';
} else {
  var d = new Date(this.get('value'));
  var quantday = d.getDay();
  if ((quantday == 6) || (quantday ===0)){
    var result = 'disallowed';
  } else {
    var result = true;
  }
}

But all saturdays and sundays are allowed, even thus before june 17

 

[troester]

Why var d = new Date(this.get('value')); ?

The code is running for each calendar date in the calendar widget which is in 'date' (not for some user input).
So (following the WIKI)
var d = new Date(date);

 

[RobertG]

You are right, troester, thanks!
Now, I allow and disallow the dates with this code but the class name is not used, all the dates are as if I didn't set a class name.

var diff = new Date().compare(new Date(date));

if ((diff <-1) ) {
   var result = true;
} else {
  var d = new Date(date);
  var quantday = d.getDay(); 
  if ((quantday == 6) || (quantday ===0)){
    var result = 'disallowed';
  } else {
    var result = true;
  }
}

The class:

.disallowed {
font-weight:bold; color:red;
}

 

[troester]

result = false (or a class name) => this date is allowed

result = true => this date is disallowed. You can't set a class this way for disallowed dates. If you want to style disallowed dates you must set CSS for all dates (including the disallowed ones, which are greyed out by default), then add a class to the allowed ones for a different styling.

 

[RobertG]

The class 'disallowed' will set the color red and bold to the disallowed dates. I named it so because only the deactivated dates were concerned.
I want to allow the saturdays and sundays, sot I set this class name to them.
You can see the result in the #8 answer picture, not in the last

 

[RobertG]

I needed to add "!important" to get the right colors (nd renamed the class)

.allowed {
    font-weight:bold!important;
    color:#006633!important;
}

Many thanks troester!