Disabling past dates in flowbite datepicker

byMR

July 19, 2023

I am using the following date picker with flowbite and tailwind.

flowbite datepicker

I am using just the calendar and I am trying to disable past dates so that users are unable to click on them.

HTML

<div inline-datepicker id="mydatepicker"></div>

JavaScript

import Datepicker from 'flowbite-datapicker/Datepicker';

const datapicker  = document.getElementById('mydatepicker');

new Datepicker(datapicker, {
todayHighlight: true
});

Is there a way of doing this?

>Solution :

Looking at the Tailwind Datepicker options, you can set the minDate option to ‘today:

new Datepicker(datapicker, {
    todayHighlight: true,
    minDate : new Date()
});

Small demo demonstrating this
_{Note, this uses quite an old version since unpkg doesn’t have the latest one available}

const datapicker  = document.getElementById('test');

new Datepicker(datapicker, {
    todayHighlight: true,
    minDate: new Date()
});

<script src="https://unpkg.com/flowbite@1.5.3/dist/flowbite.js"></script>
<script src="https://unpkg.com/flowbite-datepicker@1.2.2/dist/js/datepicker-full.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.3/dist/flowbite.min.css" />

<input id="test" datepicker type="text" placeholder="Select date">