How do i disable specific day (Wednesdays) selection in form element

How To
1

How do i disable a specific day of the week ( only Wednesday) from being selected in the form element?

I have looked at the documentation here Examples - flatpickr which disables weekends. My guess is my code should look like the one below

{
    "disable": [
        function(date) {
            // return true to disable
            return (date.getDay() === 3;

        }
    ],
    "locale": {
        "firstDayOfWeek": 1 // start week on Monday
    }
}

But how to make this work with bricks is the issue. I have read the docs here Form Element ā€“ Bricks Academy (bricksbuilder.io) But i dont know where the function part of the code goes. I have zero PHP knowledge. Thanks for helping.

2

Hello emmanueslon,

iā€™m also interested in a solution for this. Can someone help us?

I want to disable tuesday, thursday and sunday. Is this also possible through the add_filter function?

add_filter( ā€˜bricks/element/form/datepicker_optionsā€™, function( $options, $element ) {
$options[ā€˜localeā€™] = [
ā€˜firstDayOfWeekā€™ => 1 // Setze Montag als ersten Wochentag
];

$options['minDate'] = 'today'; // Deaktiviere alle vergangenen Daten

**// Deaktiviere alle Tage auƟer Montag, Mittwoch, Donnerstag und Samstag**

** $options[ā€˜disableā€™] = [**
** function($date) {**
** $dayOfWeek = $date->format(ā€˜Nā€™); // ā€˜Nā€™ gibt den Wochentag als Zahl zurĆ¼ck (Montag = 1, Dienstag = 2, usw.).**
** return !in_array($dayOfWeek, [1, 3, 4, 6]);**
** }**
** ];**

return $options;

}, 10, 2 );

Firstdayofweek and minDate works (copy from forum here). But enable/disable didnā€™t work.

Maybe someone can help?

Greetings

Andre

Edit: Danielle from Bricksforge implementing such options in his pro forms!

3

Hi @emmanuelson,

you can place this to Body (footer) scripts to modify your desired field.

<script>

document.addEventListener("DOMContentLoaded", function (event) {
  flatpickr('.flatpickr[name="form-field-id"]', {
    "disable": [
        function(date) {
            // return true to disable
            return (date.getDay() === 3 );

        }
    ],"locale": {
        "firstDayOfWeek": 1 // start week on Monday
    }

  });
});

</script>

let me know if that helps :slight_smile:

4

Hey Martin, I have been trying to hide specific days as well but nothing seems to work, including your solution.

For [name=ā€œform-field-idā€] in your script, do we agree that it should be edited to something like [name=ā€œcatoxjā€] with ā€œcatoxjā€ been the ID of the date picker form field?

I opened a thread on the forum, hoping to get some help, but havenā€™t received any feedback yet.

I have found the example in the Bricks Academy, as well as the option to disable dates by function on Flatpickr, but I donā€™t know how to merge both codesā€¦

Any idea? Itā€™s the only thing I need from the form and Iā€™d hate to have to pay for Fluent Forms just for that.

Thanks!

5

Hi Jonathan,

should be like so [name=ā€œform-field-catoxjā€]

6

This works! Thanks a lot!!

1 Like