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" />
Component data #
The component has the following props, type, and default values. See types page for type information.