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
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>Explanation
- Line 2: We import the
SveltyPickerobject from thesvelty-pickerpackage. - Line 3: We define a
datevariable with anullvalue. It can also have the current date and time of the system if we definenew date(). - Line 6: We bind the DateTime picker and define some properties like
placeholder,format, andinputClasses.
