Svelte Datepicker - Flowbite

Start receiving date and time data from your users using this free datepicker element based on Tailwind utility-classes and vanilla JavaScript

Date picker component

Setup #

  • Svelte
<script>
    import { Datepicker } from "flowbite-svelte";
</script>

Use rel=“external” #

This component is importing Flowbite datepicker javascript in the svelte:head section. When you are linking to a page using this component, use rel="external".

Datepicker example #

Use the following example of an input element to create a datepicker component. All you need to do is to add the datepicker data attribute to any input element.

  • Svelte
<script>
    import { Datepicker } from "flowbite-svelte";
</script>
<Datepicker />

Name and other attributes #

The component has $$restProps attributes that can be used to pass any other attribute.

  • Svelte
<script>
    import { Datepicker } from "flowbite-svelte";
</script>
<Datepicker name="start" />

Date range picker #

Use the range prop and the following markup to initialize two datepickers as a range.

The range picker has input name of start and end.

  • Svelte
<script>
    import { Datepicker } from "flowbite-svelte";
</script>
<Datepicker range />

Action buttons #

By adding the datepickerButtons prop you will enable the today and clear buttons with the following features:

  • Clicking on the today button will browse back to the current day/month/year
  • Clicking on the clear button will reset all selections
  • Svelte
<script>
    import { Datepicker } from "flowbite-svelte";
</script>
<Datepicker datepickerButtons />

Date format #

If you want to use a custom format such as mm/dd/yyyythen you can use the datepickerFormat="format" prop to change it.

  • Svelte
<script>
    import { Datepicker } from "flowbite-svelte";
</script>
<Datepicker datepickerFormat="dd/mm/yyyy" />

Orientation #

You can override the default positioning algorithm by using the datepickerOrientation="top | right | bottom | left" prop. You can even combine right with bottom or left with top.

  • Svelte
<script>
    import { Datepicker } from "flowbite-svelte";
</script>
<Datepicker datepickerOrientation="bottom right" />

Title #

You can also add a title to the datepicker by using the datepicker-title="title" prop.

  • Svelte
<script>
    import { Datepicker } from "flowbite-svelte";
</script>
<Datepicker datepickerTitle="My Vacation" />

Props #

The component has the following props, type, and default values. See types page for type information.

Name Type Default
range boolean false
datepickerButtons boolean false
datepickerFormat string 'mm/dd/yyyy'
datepickerOrientation string 'bottom'
datepickerTitle string 'Flowbite datepicker'
attribute string ''
inputClass string 'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'