Date Picker - how to enable dates and weekdates

Hey everybody

I need to set the date picker to enable some weekdays and some extra unregular dates.

I tried to use the correspondent controls: Enable specitic dates (I manualy added a test extra date so far) + Enable specific weekdays set to Wednesdays.

Inside Bricks it shows just the extra date enables, on frontent only Wednesdays are enables.

I also need to disable one Wednesday as it coincides with national holiday and is a day-off, but disabling dates works neither…

Don’t the work together? Is there any way to do it?

Ideally I want to pull extra dates from a database, so I perhaps will need to write a php function. But it is not clear what is the format of the list of dates the function should return?

Please help. My project deadline is coming soon and I waited for the recent update of the forms to do this with less effort than it would take earlier. But now I am a liittle bit stuck :frowning:

Hey! :slight_smile:

The “Enable Specific Days” and “Enable specific weekdays” controls cannot be used together and will overwrite each other.

To create a custom logic and load data from the database, you can follow the instructions given here:

Regarding the format, you need to consider that with your code, you’re setting the config for a flatpickr instance. So you can use all options from here: Options - flatpickr

Example: Examples - flatpickr

Hey Daniele!

During these days I have created a php function that returns the dates that need to be enabled. I used your example of php function (in documentation) to populate select options list.

It returns a string like this:
08.11|Woensdag 08.11 15.11|Woensdag 15.11 22.11|Woensdag 22.11 29.11|Woensdag 29.11

If i want to use it to enable certain dates in date picker settings, how this list should be formatted?

I have checked the link. They say:

    enable: ["2025-03-30", "2025-05-21", "2025-06-08", new Date(2025, 8, 9) ]

What should I return with the function to BF field:
this: ["2025-03-30", "2025-05-21", "2025-06-08", new Date(2025, 8, 9) ]
or this: "2025-03-30", "2025-05-21", "2025-06-08", new Date(2025, 8, 9)  
or this:  enable: ["2025-03-30", "2025-05-21", "2025-06-08", new Date(2025, 8, 9) ]

I also consider using select for this. But I need to link two selects - one is for dates, the other is for time. I want time options correspond to date selected. Is if possible somehow?

You could write something like this:

add_filter('bricks/element/form/datepicker_options', function ($options, $element) {
    $allowed_dates = ["2023-11-02", "2023-11-03"]; // Add allowed dates here
    $date_format = get_option('date_format'); // The default date format

    // Convert date format
    $allowed_dates = array_map(function ($date) use ($date_format) {
        return date($date_format, strtotime($date));
    }, $allowed_dates);

    $options['enable'] = $allowed_dates;

    return $options;
}, 10, 2);

Just populate the $allowed_dates array with the dates you want to allow. You can modify this object with your desired data.

This will work for the normal approach of creating forms. For the Nestable Pro Forms, the filter you need to use is: bricksforge/pro_forms/datepicker_options. This Filter will be available in the 2.0.0 stable. But if you are using Nestable Pro Forms, please send me access and I will add it to your installation :slight_smile:

1 Like

Thank you. I will stick to 2 selects so far. But next time it will be very helpful.
As far as I understand, Nestable forms are not yet reliabe enouph for real projects. Mine will be launched soon, so I will use Pro Form here.