Simple Datepicker [100% Working]

Hey all,

I would like to add an ‘available from’ and ‘available until’ date picker to my site to enable users to filter CMS collection items based on two dates.

I noticed this thread and wondered if it would be possible to achieve this with the date picker discussed above?

Thanks in advance for your help :smile:

Jamie

Flowbase has a date picker that’s much more intuitive as well as customizable. The setup was extremely simple and the explanation on their blog is very easy to follow. Use it!

Has anyone figured out how to disable certain days? I want to use this date picker but disable all Mondays!

Hi what i want to disable past dates and want current dates and onward dates to be active

Looks like this is using jquery ui datepicker.

To disable certain days in the jQuery UI Datepicker, you can use the beforeShowDay option. This option allows you to define a function that is called for each day in the calendar, where you can determine whether a day should be enabled or disabled by returning an array with two values: a boolean indicating if the day is enabled (true for enabled, false for disabled), and a CSS class to style the disabled days.

Example of how you can disable specific days using the beforeShowDay option:

// Replace with your desired disabled days
const disabledDays = [
  "2023-08-10", 
  "2023-08-15", 
  "2023-08-20"
];

$("#datepicker").datepicker({
  beforeShowDay: function(date) {
    const dateString = $.datepicker.formatDate("yy-mm-dd", date);
    return [disabledDays.indexOf(dateString) === -1, ""];
  }
});

Looks like this is using jquery ui datepicker.

To disable past dates in the jQuery UI Datepicker, you can use the minDate option. Setting the minDate option to 0 ensures that users can only select dates starting from today.

$("#datepicker").datepicker({
  minDate: 0
});

If you want to allow selection from tomorrow onwards, you can set minDate to 1.

Where do I put this code? I’m using the Flowbase date picker UI.

This code only works with jQueryUI. For other plugins, please refer to their documentation.