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!
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.
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.
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)
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
Does bricksforge support flatpickr monthselect plugin? If not, could you please help how to implement month and year only selection in the current version?
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:
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.
@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?
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):
If you use this without the MonthSelectPlugin, it would look like this:
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