Date Element Picker Disallow Dates is Off by One Day

[hominid4]

Hi. I?m using the Date element as a date picker, and am using the "PHP Allow Dates" code at the bottom of the Date Element?s wiki to disallow queried dates. I?m also using JS to disable the weekends. The code is pasted under the date element?s Advanced tab respectively.

A test disallowed date I?m using, in the format of "Y-m-d" is: 2017-02-15

Everything seems to be working correctly, except in the date picker the day before the disallowed date(s) is disabled instead of the actual disallowed date. For example, instead of 2017-02-15 being disabled, 2017-02-14 is instead.

However, if I test it, such as picking a range between 2017-02-13 and 2017-02-17, it skips "2017-02-15" correctly, returning 4 days without the 15th:
2017-02-13,2017-02-14,2017-02-16,2017-02-17

In my Date element settings, I?ve tried different variations, but all has the same result. Currently set at Local Time and Default to current date. I?ve also tried different sites on different servers, in addition to v3.5.1 and v3.5.2 Fabrik versions. Also tried different timezones converting coding; although my server is set to my timezone.

I?ve attached screenshots of what I?m seeing. Would anyone have an idea why the day before the "disabled" date is disabled instead; or experiencing the same issue? I have a hidden URL I can PM if needed.

Thanks!

J!: v3.6.5
Fabrik: v3.5.2

Quick test code I've been using:

$disallowedDates = array('2017-02-15');

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

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

$allowedDates = array();
foreach($datePeriod as $dt) {
  $thisDate = $dt->format('Y-m-d');
  if (!in_array($thisDate, $disallowedDates)) {
        $allowedDates[] = $thisDate;
    }
}
return $allowedDates;

 

[cheesegrits]

Hmm, interesting. Not quite sure why this hasn't shown up before.

It's because we convert those date string to JS date objects when the date element initializes:

        convertAllowedDates: function () {
            for (var i = 0; i < this.options.allowedDates.length; i++) {
                this.options.allowedDates[i] = new Date(this.options.allowedDates[i]);
            }
        },

... which means that the browser's TZ gets applied. And as the dates are being supplied with implicit 0 time with no TZ offset applied, if you are in (say) CST, which is GMT -6, when Date() creates it, it assumes you are giving it a date with the TZ applied ... which you aren't ... and so 2017-02-15 becomes 2017-02-14 18:00:00.

So what we need to do is apply the offset after creating the date ...

        convertAllowedDates: function () {
            for (var i = 0; i < this.options.allowedDates.length; i++) {
                this.options.allowedDates[i] = new Date(this.options.allowedDates[i]);
                // apply the TZ offset, otherwise if (say) GMT -6, 2017-02-15 will become 2017-01-14 18:00:00
               this.options.allowedDates[i].setTime(
                   this.options.allowedDates[i].getTime() + this.options.allowedDates[i].getTimezoneOffset()*60*1000
                );
            }
        },

I just merged that change into the master branch, so if you update from github, it should work.

https://github.com/Fabrik/fabrik/commit/fce93c67db81e6867c639c6d2c7a28c8ff3932c5

-- hugh

 

[hominid4]

Ah, makes sense! Thanks a bunch for modifying that, especially so late where you are. I updated and works great. Thanks again!

 

[cheesegrits]

Feel free to express your thanks with a subscription for a month.

Thanks for the clear and concise report of the problem and confirming the fix.

Hugh


Sent from my HTC 10 using Tapatalk