Solid-calendar NPM

Date-Picker solid WIP

How to Use

There are a couple of important points to keep in mind when using this component:

Dark Mode

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.

Formatting

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} />

import type { RangeDate } from 'solid-calendar'

const [date, setDate] = createSignal<RangeDate>({
    dateTo: {},
    dateFrom: {}
  })


<Calendar<'range'> date={date} setDate={setDate} type='range' />