javascriptflatpickr

flatpickr minDate does not respect blocked weekends


I opened up a github issue already but since there seems to be no activity, I'll ask here and hope someone can help me out.

Current Situation

I am using flatpickr for a Date selection where I need to block the weekends and have a lead time set up.

When blocking weekends like this:

'disable': [
    function(date) {
        // blocking Sunday (0) and Saturday (6)
        return (date.getDay() === 0 || date.getDay() === 6);
    }
],

and setting up a lead time of 4 days like that (today and the following 3 days blocked):

// blocking today + 3 following days
minDate: new Date().fp_incr(4)

the date picker does not behave as expected.

Expectation: Weekends are blocked.

When on a Wednesday selecting a date, the first option should be Tuesday since today and the following 3 days (Wed–Mon, excl. weekends) are blocked.

Actual behaviour: Weekends are not blocked for minDate.

When on a Wednesday selecting a date, the first option is Sunday because the weekend is included in the count. But then, the Weekend blocker steps in and actually blocks the weekend from being picked (as expected), so the first possible day is the following Monday.

It doesn't change anything if the minDate option comes before or after the disable one.

with weekends blocked: with weekends blocked

without weekends blocked: without weekends blocked

Version

flatpickr 4.6.13

Any recommendations are appreciated. I use this with plain Javascript and Blazor. Does anyone know how to overwrite the minDate or insert a function into the minDate option to recognise the blocked days? Best would be to have the minDate option recognize and respect the disable option.


Solution

  • Thats what I got working:

    1. I set the default lead time value in a variable to 4
    2. I convert the date + leadtime to a string which gives me Sun Oct 01 2023 00:00:00 GMT+0200
    3. I then check if the String contains "Sat" or "Sun"
    4. I then initialise the flatpickr with the correct minDate option. (+2 for the weekend count)
    var leadtime = 4;
    var leattimeString = new Date().fp_incr(leadtime).toString();
    
    if (leattimeString.includes('Sat') || leattimeString.includes('Sun')) {
        flatpickr('.js-flatpickr', {
            ...
            // when leadtime lands on a Saturday or Sunday add 2 extra days to count the weekend
            minDate: new Date().fp_incr(6),
        })
    }
    

    enter image description here

    Sounds dirty, looks dirty, but does what I want.

    It doesn't seem to work to initialise flatpickr first and then have the correct lead time inserted afterwards. It also doesn't work to use minDate: function {..}

    Thanks to @CBroe for pushing me into the right direction.