Disable weekend days from the Date Picker

[kootjoo]

Hi all,

I am using the date picket for reservations in a restaurant. With the code below from the Wiki I have managed to block certain dates in the Calendar. What I also want to do is to block out all the mondays and tuesdays because we are closed then. I have looked at the .js examples and tried some things but was not succesfull so far. Can anyone provide me with the code to be used.

Many Thanks,
KooTjoo

$myDb = JFactory::getDbo();
$myQuery = $myDb->getQuery(true);
$myQuery
->select ('DATE(book_bookingstartdate)')
->from('fab_booking');
$myDb->setQuery($myQuery);
$bookedDates = $myDb->loadColumn();

$begin = new DateTime();
$end = new DateTime('2016-12-31');

$interval = DateInterval::createFromDateString('1 day');
$period = new DatePeriod($begin, $interval, $end);

$myAllowedDates = array();

foreach( $period as $dt ) {
$thisDate = $dt->format("Y-m-d");
if (!in_array($thisDate, $bookedDates)) {
$myAllowedDates[] = $thisDate;
}
}
return $myAllowedDates;

 

[achartier]

I assume you want the allow date function of the date element. This function passed dates into it in the date var. This is a text representation of the date. Your js function should determine if the date is allowed or not and return true if allowed and false if not. You will get one date at a time.

Here is a sample of something I used, maybe it can help:

 function start_date_allowed_dates ( date ) {
     var theDay = moment(date).startOf('day');
    result = false;
    if (theDay.isBefore(moment().startOf('day'))) {
    //  console.log("isBeforeToday: "+theDay.format("YYYY-MM-DD hh:mm:ss"));
      result = true;
    }
    if (theDay.day() != 1) {
      result = true;  /* Not a monday */
    }
    if (result === false && typeof used_dates !== 'undefined') {
      if (typeof limits !== 'undefined') {
        if ('min' in limits === true) {
          if (theDay.isBefore(moment(limits.min))) {
    //        console.log("Limits:min: "+theDay.format("YYYY-MM-DD hh:mm:ss"));
            result = true;
          }
        }
        if ('max' in limits === true) {
          if (theDay.isAfter(moment(limits.max))) {
    //        console.log("Limits:max: "+theDay.format("YYYY-MM-DD hh:mm:ss"));
            result = true;
          }
        }
      }
      if (result === false) {
        for (i=0; i<used_dates.length; i++) {
          if ( moment(used_dates[i]).isSame(theDay,"day") === true ) {
            result = true;
    //        console.log("UsedDate: "+theDay.format("YYYY-MM-DD hh:mm:ss"));
            i=used_dates.length;
          }
        }
      }
    }
    if (result === false) {
      /* Check if this is a weekend */
      var dayOfWeek = theDay.day();
      if (dayOfWeek === 0 || dayOfWeek == 6 ) {
        result = 'ad_nongreyed';
      }
    }
    return result;
}

Note, I am using the moment library which may or may not be available in your application, but you can do the same thing with other js date functions. used_dates is a js var in the global space. You probably don't need that.

Also note that if you return a string instead of true/false it will be appended with the string as a class name to the date in the table.

Hope this helps in some way.

 

[kootjoo]

Hi Achartier,

Thanks for this. I have been plaing a little with you code but can't get it to work. My js skilla are not that good sorry.

Can you or someone else shine a light on this piece of code:

var date = new Date();
/* Check if this is a weekend */
var dayOfWeek = date.getDay();
if (dayOfWeek === 0 || dayOfWeek == 6 )
{ result = false; }
else
{ result = true; }

 

[cheesegrits]

Doi "new Date()" just gets you today's date. You need to do "new Date(date)", as per the tooltip on the Allow Date function.

Also, I think you have your true and false the wrong way round. You return true to disallow the date. Counter intuitive, I know, but it is what it is.

-- hugh

 

[kootjoo]

Thank you very much that did the trick!

 

[achartier]

My bad on the true/false. Glad you got it working though.