There are a couple of important points to keep in mind when using this component:
To enable dark mode, you can add the dark-mode class to the <body> element of your application. This will automatically apply the appropriate styling for the date picker in dark mode.
Date Formatting This component uses the Intl.DateTimeFormat API for date formatting. You can customize the date and time format by passing the format prop to the component. This prop accepts an object with locale and options properties, which follow the same structure as the parameters of the Intl.DateTimeFormat constructor.
<Calendar
format={{
locale: 'en-GB', // Specify the locale for date formatting
options: {
dateStyle: 'full', // Set the desired date format style
timeStyle: 'long', // Set the desired time format style
timeZone: 'Australia/Sydney' // Set the desired time zone
}
}}
// Other props...
/>
| Type | Description |
|---|---|
"form" |
Select a single date, with the maximum allowed date being the current day. |
"single" |
Select a single date from a calendar view. |
"range" |
Select a range of dates with start and end dates. |
At your App.tsx
import '../node_modules/solid-calendar/dist/style.css'
- Create a signal with the signature of the type
import { Calendar } from 'solid-calendar'
import type { SingleDate } from 'solid-calendar'
const [date, setDate] = createSignal<SingleDate>({
date: {}
})
<Calendar<'single'> type="form" setValues={setDate} values={date} />
OR
import type { RangeDate } from 'solid-calendar'
const [date, setDate] = createSignal<RangeDate>({
dateTo: {},
dateFrom: {}
})
<Calendar<'range'> date={date} setDate={setDate} type='range' />