mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
88 lines
2.8 KiB
Plaintext
88 lines
2.8 KiB
Plaintext
---
|
|
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} />
|
|
)
|
|
}
|