tabler/shared/ui/Datepicker.astro

---
import Icon from './Icon.astro'

// A text field or inline block that Tabler's Datepicker plugin (in tabler.js)
// turns into a calendar. The plugin wraps Vanilla Calendar Pro, which the page
// loads through the vanilla-calendar-pro entry of pageLibs.
interface Props {
  id?: string
  /** initial date as `YYYY-MM-DD` */
  value?: string
  class?: string
  placeholder?: string
  /** input-icon layout; omit for a plain input */
  layout?: 'icon' | 'icon-prepend' | undefined
  /** render the calendar in place instead of a popup */
  inline?: boolean
  /** picking one date, any number of dates, or a start and an end */
  selectionMode?: 'single' | 'multiple' | 'multiple-ranged'
  /** months shown side by side */
  months?: number
  /** preselected dates as `YYYY-MM-DD`; a range is its start and end */
  selectedDates?: string[]
  dateMin?: string
  dateMax?: string
  /** 0 = Sunday, 1 = Monday */
  firstWeekday?: 0 | 1 | 2 | 3 | 4 | 5 | 6
  placement?: 'left' | 'center' | 'right' | 'auto'
  /** show the week number in front of each row */
  weekNumbers?: boolean
  /** name of the hidden input an inline calendar submits with a form */
  name?: string
}

const {
  id,
  value,
  class: className,
  placeholder = 'Select a date',
  layout,
  inline = false,
  selectionMode,
  months,
  selectedDates,
  dateMin,
  dateMax,
  firstWeekday,
  placement,
  weekNumbers = false,
  name,
} = Astro.props

const datepickerId = id ? `datepicker-${id}` : undefined

const dataAttributes = {
  'data-bs-toggle': 'datepicker',
  'data-bs-inline': inline ? 'true' : undefined,
  'data-bs-selection-mode': selectionMode,
  'data-bs-display-months-count': months,
  'data-bs-selected-dates': selectedDates ? JSON.stringify(selectedDates) : undefined,
  'data-bs-date-min': dateMin,
  'data-bs-date-max': dateMax,
  'data-bs-first-weekday': firstWeekday,
  'data-bs-placement': placement,
  'data-bs-week-numbers': weekNumbers ? 'true' : undefined,
}

---

{
  inline ? (
    <div class={className} id={datepickerId} {...dataAttributes}>
      {name && <input type="hidden" name={name} />}
    </div>
  ) : layout === 'icon' ? (
    <div class:list={['input-icon', className]}>
      <input type="text" class="form-control" id={datepickerId} value={value} placeholder={placeholder} autocomplete="off" {...dataAttributes} />
      <span class="input-icon-addon"><Icon name="calendar" /></span>
    </div>
  ) : layout === 'icon-prepend' ? (
    <div class:list={['input-icon', className]}>
      <span class="input-icon-addon"><Icon name="calendar" /></span>
      <input type="text" class="form-control" id={datepickerId} value={value} placeholder={placeholder} autocomplete="off" {...dataAttributes} />
    </div>
  ) : (
    <input type="text" class:list={['form-control', className]} id={datepickerId} value={value} placeholder={placeholder} autocomplete="off" {...dataAttributes} />
  )
}