Overview

svelte-flatpickr is a Svelte component for the flatpickr datetime picker. It allows users to easily select dates and times using a customizable calendar interface. It can be used with Svelte versions 1, 2, and 3.

Features

• Easy integration with Svelte projects
• Customizable date and time format
• Option to bind selected dates to props
• Support for hooks and events
• Ability to use custom elements for enhanced control decoration

Installation

To use svelte-flatpickr, follow these steps:

1. Configure your bundler to resolve the package’s svelte field. Alternatively, import the component from svelte-flatpickr/src/Flatpickr.svelte.
2. Import flatpickr’s stylesheets, such as flatpickr/dist/flatpickr.css and any desired theme stylesheets.
3. Use the appropriate version of svelte-flatpickr based on your Svelte version:
   • For Svelte v3, use v3.x.x
   • For Svelte v2, use v1.x.x
   • For Svelte v1, use v0.x.x

For a full working example, refer to the test directory.

Summary

svelte-flatpickr is a versatile component that brings the flatpickr datetime picker functionality to Svelte projects. With easy integration, customization options, and support for hooks and events, it provides a seamless user experience for date and time selection. Additionally, the ability to use custom elements allows for enhanced control decoration.