Disabling the dates from the past from Datapicker in Pro forms

[sovljanski04]

Hi, I’m trying to restrict datepicker so that choosing dates from the past would not be possible, but I’m not sure how…
Thanks!

[manc]

You can do that by accessing the flatpickr instance and adding more config options. You can do that via PHP as briefly outlined at the very bottom of this article → Form Element – Bricks Academy or you can use JS, which is what I ended up doing.

1. Give your datepicker a class
   

   
   
   In my case, my class is “reisedaten-desktop”, be sure to replace this with your own class in the following code

2. In your Page Settings, under Custom Code, in the Body (footer) scripts section, paste the following code:

<script>

document.addEventListener("DOMContentLoaded", function (event) {
  
  flatpickr('.reisedaten-desktop .flatpickr-input', {
    minDate: "today"
  });

});

</script>

For more options, you can look at the examples here → Examples - flatpickr or all the possible config options here → Options - flatpickr

Just as an example, I needed a travel kinda style calendar so with the following code

<script>

document.addEventListener("DOMContentLoaded", function (event) {
  
  flatpickr('.reisedaten-desktop .flatpickr-input', {
    mode: "range",
    showMonths: "2",
    inline: true,
    altInput: true,
    altFormat: "j. F Y",
    dateFormat: "Y-m-d",
    minDate: "today"
  });

});

</script>

I made my calendar behave like this:

[brianlostudio]

Sorry, is this till working? I follow your step and didn’t work now.

1. Pro Form not working.
2. Bricks Form working.

[manc]

Disabling dates in the past has been added natively:

Quite a few other things have been added as well since this post so in most cases you probably won’t need any code anymore