Is there a way to exclude specific dates using Flowbite-Svelte's Datepicker?

Question

I am working on a simple website, using SvelteKit. For the UI, I use Flowbite-Svelte and some of its components.
During early stages of development, I just used the availableFrom property. Now I want to be able to exclude some specific dates that cannot be selected in the datepicker by the user, only to find no feature like that in the docs.

Is there something I am missing? Or is there another way of implementing this?
I would like to keep using the Datepicker component of Flowbite-Svelte, but if there's no other way I might consider switching to something else, sadly :(

My current Datepicker looks like this:

<Datepicker
            required={true}
            inputProps={{ id: "date" }}
            bind:value={selectedDate}
            availableFrom={new Date()}
            placeholder="Datum van afspraak"
            locale="nl-NL"
            translationLocale="nl-NL"
            firstDayOfWeek={1}
            dateFormat={{ year: "numeric", month: "2-digit", day: "2-digit" }}
            inputClass="w-full text-black border-2 rounded-md p-3 focus:ring-1 focus:ring-blue-500 border-gray-600 bg-accent-100"
            classes={{ 
                polite: "hover:text-primary-100!", 
                dayButton: "hover:text-primary-100 selected:text-black", 
                titleVariant: "text-primary-100", 
                monthButton: "alternative" 
            }}
        />

DragonBobZ · Accepted Answer · 2025-11-08 16:19:55Z

It doesn't look like that component provides a way to specify a list of enabled or disabled dates. However, the component is simple enough to modify. The source code for that component lives here, currently: https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/datepicker/Datepicker.svelte

Your shortest pathway to this feature is to override the isDateAvailable function used to determine whether a date can be selected from the date grid.

Copy the source of the Datepicker component to <your-project>/src/lib/components/Datepicker.svelte (it is provided under the MIT license so you will need to provide a license disclosure with attribution at the top of your copy). You will need to update some of the specified $lib imports in the file to be from 'flowbite-svelte' (since they are from flowbite-svelte's lib, not yours).
Update your import for the Datepicker to use your component instead of flowbite's. It will probably be broken at first because your imports are not right, let the vite server error reports be your guide.

// before
import { Datepicker } from 'flowbite-svelte';
// after
import Datepicker from '$lib/components/Datepicker.svelte';

Add to the props a declaration for an isDateAvailable override. That looks something like this:

let {
    value = $bindable(),
    defaultDate = null,
    range = false,
    rangeFrom = $bindable(),
    rangeTo = $bindable(),
    availableFrom = null,
    availableTo = null,
    // ADD THIS LINE
    isDateAvailable: isDateAvailableOverride = undefined,
    // . . . etc
    monthColor = 'alternative',
    monthBtnSelected = 'bg-primary-500 text-white',
    monthBtn = 'text-gray-700 dark:text-gray-300',
    class: className,
    elementRef = $bindable(),
    actionSlot,
    inputProps = {}
}: DatepickerProps & { isDateAvailable?: (d: Date) => boolean } = $props();

Update the isDateAvailable function in use by the component to use your override, if provided:

function isDateAvailable(date: Date): boolean {
    // If custom override is provided, use it instead
    if (isDateAvailableOverride) {
        return isDateAvailableOverride(date);
    }
    . . .

Use your override

<Datepicker
    id="datepicker"
    bind:value={selectedDate}
    isDateAvailable={(date) => {
        // Your custom logic here
        // Example: Only allow weekdays
        const day = date.getDay();
        return day !== 0 && day !== 6;
    }}
/>

Collectives™ on Stack Overflow

Is there a way to exclude specific dates using Flowbite-Svelte's Datepicker?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related