How to use the DateTime picker in Svelte

Svelte provides built-in functionality to insert date, time, or both in any application. This is done by importing svelty-picker from the installed libraries into a package. The keyboard navigation support in svelty-picker makes it easy to implement a themeable DateTime picker. The DateTime picker package can be installed using the script given below:

npm install svelty-picker
Command to install svelty-picker

Features

The following features are provided by the svelty-picker:

  • Date and time picker functionality.
  • Customizability (themeable with different features).
  • Support for navigating with the keyboard to select a date or time.
  • Restriction for start and end dates.
  • Validation feature (using svelte-use-forms).

There are many formatting options available that we can define for the DateTime picker. A few of the most used properties, their data types, and default values with descriptions are given in the following table:

Options

Properties

Default value

Data type

Description

format

yyyy-mm-dd

string

Set the format of the date and time.

placeholder

null

string

Set the text to display in the input box.

autoclose

true

bool

Set to true to autoclose the picker after the date and time are selected.

required

false

bool

Validate by forcing the required date and time.

startDate

Date

string

Select the start date to limit the picker.

endDate

Date

string

Select the end date to limit the picker.

Note: The above properties are optional to include with the svelty-picker.

Code

<script>
  import SveltyPicker from 'svelty-picker';
  let date = null;
</script>

<SveltyPicker inputClasses="form-control" format="yyyy-mm-dd hh:ii" bind:value={date} placeholder='Select date and time' autoclose></SveltyPicker>
DateTime picker in Svelte

Explanation

  • Line 2: We import the SveltyPicker object from the svelty-picker package.
  • Line 3: We define a date variable with a null value. It can also have the current date and time of the system if we define new date().
  • Line 6: We bind the DateTime picker and define some properties like placeholder, format, and inputClasses.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved