DatePicker

import {
  DatePicker,
  DatePickerTrigger,
  DatePickerDialog,
  DatePickerCalendar,
  DatePickerTimeField,
} from '@saas-ui/date-picker'

transpilePackages: ['@saas-ui/date-picker'],

<DatePicker>
  <DatePickerTrigger>
    <Button>Open DatePicker</Button>
  </DatePickerTrigger>
  <DatePickerDialog>
    <DatePickerCalendar />
  </DatePickerDialog>
</DatePicker>

<DatePicker granularity="minute">
  <DatePickerTrigger>
    <Button>Open DatePicker</Button>
  </DatePickerTrigger>
  <DatePickerDialog>
    <DatePickerCalendar />
    <DatePickerTimeField />
  </DatePickerDialog>
</DatePicker>

<DatePicker granularity="minute" locale="nl-NL">
  <DatePickerTrigger>
    <Button>Open DatePicker</Button>
  </DatePickerTrigger>
  <DatePickerDialog>
    <DatePickerCalendar />
    <DatePickerTimeField />
  </DatePickerDialog>
</DatePicker>

<DatePicker hourCycle="24" granularity="minute">
  <DatePickerTrigger>
    <Button>Open DatePicker</Button>
  </DatePickerTrigger>
  <DatePickerDialog>
    <DatePickerCalendar />
    <DatePickerTimeField />
  </DatePickerDialog>
</DatePicker>

function ControlledPicker() {
  const [value, setValue] = React.useState(today(getLocalTimeZone()))

  return (
    <DatePicker value={value} onChange={setValue}>
      <DatePickerTrigger>
        <Button>{value.toString()}</Button>
      </DatePickerTrigger>
      <DatePickerDialog>
        <DatePickerCalendar />
      </DatePickerDialog>
    </DatePicker>
  )
}

function ControlledPicker() {
  const [value, setValue] = React.useState(now(getLocalTimeZone()))

  return (
    <DatePicker value={value} onChange={setValue} granularity="minute">
      <DatePickerTrigger>
        <Button>{value.toString()}</Button>
      </DatePickerTrigger>
      <DatePickerDialog>
        <DatePickerCalendar />
        <DatePickerTimeField />
      </DatePickerDialog>
    </DatePicker>
  )
}