Allow Date Picker Period Requirements

So I’ve set up a restaurant reservation system for my clients, but the “Datepicker” field type allows them to pick a date in the past. I’d love to be able to prevent a selection in the past - and even on the same day as the restaurant may already be full.

I can also imagine people needing it for birthdays and it would be nice for them if the date had to be in the past, but not beyond 100 years ago, right?

Not sure how that works, but I just like to give ideas - because I LOVE Bricksforge!

Good idea. Thanks for this feature request :slight_smile:

1 Like

Please don’t respond to this Daniele as it’s not necessary, but when you do get to this one ~

It would also be helpful if the Admins and Editors were able to block out future dates - like if an event is only happening on certain days. Or if a restaurant is closed for a holiday or the reservations are already full. Then they could make it impossible to make a reservation on those dates.

Or even on certain days of the week. For instance, some places may not take reservations on Friday and Saturday nights or something.

Anyway, just some pie-in-the-sky use cases that you can consider when implementing.

Thanks again!

2 Likes

So I’ve found the feature I need via a Gravity Forms paid add-on ~

Just to give you an idea of how it may work.

Are there any news here yet?
I would like to replace the tool on the following page with the Pro Form from Bricksforge or Bricks itself.
https://bricks.benzmedia.de/termin/
That should be possible, right?

Maybe someone knows some advice how I can prevent an older date from being selected in the date selection.
Also, no dates on the weekend should be selectable.

1 Like

I also need this kind of feature. I make a website for a bar where disabled people work. They are open just one day per week and have some extra events last Friday of a month, so I need to somehow restrict the dates that are pickable. Currently I have no idea how to do it (my JS expertize is pretty basic)

Not sure this exact thing will make it into the next update but

  1. new Datepicker options are coming (I need a Range Filter - #4 by Daniele), we’ll have to wait and see which ones exactly will be implemented
  2. if that specific feature doesn’t make it into the next update it’s still possible via JS as shown here (to disable older dates though) Disabling the dates from the past from Datapicker in Pro forms - #2 by manc

If the next update doesn’t provide what you need (since there are so many things to implement), I’d be happy to help you out setting up via JS till the feature comes to BF natively :slight_smile:

Thank you!

Does bricksforge support flatpickr monthselect plugin? If not, could you please help how to implement month and year only selection in the current version?

Thanks

Sure thing :slight_smile:

In case you wanna add other plugins down the line, you can find em all here → flatpickr CDN by jsDelivr - A free, fast, and reliable Open Source CDN

  1. Add a class to the datepicker field where you’d like to use the MonthSelectPlugin:
    I added the class “month-select-plugin”

  2. Go to Page Settings → Custom Code → Body (footer) scripts at the very bottom and add this snippet:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css"/>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/index.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function (event) {
    flatpickr(".month-select-plugin .flatpickr-input", {
      plugins: [
        new monthSelectPlugin({
          shorthand: true, //defaults to false
          dateFormat: "m.y", //defaults to "F Y"
          altFormat: "F Y", //defaults to "F Y"
          theme: "dark", // defaults to "light"
        }),
      ],
    });
  });
</script>

First we load the plugins css and js files. Then, using the class we added to the datepicker field, we set up the plugin as per their docs → Plugins - flatpickr

Now it should look something like this:
image

You’ll likely have to add some css to make sure it’s 3 columns instead of 2 and for any other aspect you’d like to change. That’d would be easier though once we can see it implemented in a form since field width settings and whatnot also have an influence.

Hope it helps :slight_smile:

1 Like

@manc Awesome. Thanks Mate. I have just one more query. I am trying to set 31st december of the current year as default date using flatpickr. Is this possible with bricksforge?

Everything is possible :smiley:

Same process as before, adding a class to the datepicker etc. and then just change your snippet to this:

<script>
document.addEventListener("DOMContentLoaded", function (event) {
  let currentYear = new Date().getFullYear();
  let newDefaultDate = new Date(`${currentYear}-12-31`);

  flatpickr(".month-select-plugin .flatpickr-input", {
    dateFormat: "d.m.Y",
    defaultDate: newDefaultDate,
    plugins: [
      new monthSelectPlugin({
        shorthand: true, //defaults to false
        dateFormat: "F Y", //defaults to "F Y"
        altFormat: "F Y", //defaults to "F Y"
        theme: "dark", // defaults to "light"
      }),
    ],
  });
});
</script>

The MonthSelectPlugin only shows Month and Year so all together it would look like this (on page load and after choosing a different year/month):
image

If you use this without the MonthSelectPlugin, it would look like this:
image
You’d just have to remove the plugin and change the class so the snippet for this datepicker would be:

<script>
document.addEventListener("DOMContentLoaded", function (event) {
  let currentYear = new Date().getFullYear();
  let newDefaultDate = new Date(`${currentYear}-12-31`);

  flatpickr(".default-date-picker .flatpickr-input", {
    dateFormat: "d.m.Y",
    defaultDate: newDefaultDate,
  });
});
</script>

I’m no expert when it comes to date formatting in JS so there might be a better/cleaner way to get the date but it does work :wink:

how do I do it…
if I only want to select Tuesday and Friday ?

If you mean only letting people pick Tuesdays and Fridays like this:
image

then all u gotta do after adding a class to your datepicker field is add this snippet:

<script>
document.addEventListener("DOMContentLoaded", function (event) {
  flatpickr(".only-tue-fr .flatpickr-input", {
    dateFormat: "d.m.Y",
    enable: [
      function (date) {
        return date.getDay() === 2 || date.getDay() === 5;
      },
    ],
  });
});
</script>

As long as your week starts on Monday, Monday is 1 and Sunday is 7 so to enable Tuesday and Friday, we enable 2 and 5.

Thanks !

I worked with the example from here:

disable , enable … :slightly_smiling_face:

You are genius Mate. Thanks for your wonderful inputs :slight_smile: