11 KiB
11 KiB
Datepicker
Date and date range picker component with calendar interface, time selection, and reactive state management.
Tag
Datepicker
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label |
string |
- |
Label text for the input |
value |
string | {start: string, end: string} | Signal |
- |
Selected date or range |
range |
boolean |
false |
Enable date range selection mode |
hour |
boolean |
false |
Enable hour selection |
placeholder |
string |
'Select date...' |
Placeholder text |
class |
string |
'' |
Additional CSS classes (DaisyUI + Tailwind) |
Live Examples
Basic Datepicker
Live Demo
const BasicDemo = () => {
const date = $('');
return Datepicker({
label: 'Select date',
value: date,
placeholder: 'Choose a date...'
});
};
$mount(BasicDemo, '#demo-basic');
Date Range Picker
Live Demo
const RangeDemo = () => {
const range = $({ start: '', end: '' });
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Datepicker({
label: 'Date range',
value: range,
range: true,
placeholder: 'Select start and end date...'
}),
() => range().start && range().end ? Div({ class: 'alert alert-success' }, [
`Selected: ${range().start} → ${range().end}`
]) : null
]);
};
$mount(RangeDemo, '#demo-range');
With Time Selection
Live Demo
const TimeDemo = () => {
const datetime = $('');
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Datepicker({
label: 'Select date and time',
value: datetime,
hour: true,
placeholder: 'Choose date and time...'
}),
() => datetime() ? Div({ class: 'alert alert-info' }, [
`Selected: ${datetime()}`
]) : null
]);
};
$mount(TimeDemo, '#demo-time');
Range with Time
Live Demo
const RangeTimeDemo = () => {
const range = $({ start: '', end: '', startHour: 9, endHour: 17 });
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Datepicker({
label: 'Schedule range',
value: range,
range: true,
hour: true,
placeholder: 'Select date and time range...'
}),
() => range().start && range().end ? Div({ class: 'alert alert-primary' }, [
`From ${range().start} ${range().startHour || 9}:00 to ${range().end} ${range().endHour || 17}:00`
]) : null
]);
};
$mount(RangeTimeDemo, '#demo-range-time');
Reactive Display
Live Demo
const ReactiveDemo = () => {
const date = $('');
const today = new Date().toISOString().split('T')[0];
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Datepicker({
label: 'Select date',
value: date,
placeholder: 'Choose a date...'
}),
Div({ class: 'stats shadow' }, [
Div({ class: 'stat' }, [
Div({ class: 'stat-title' }, 'Selected date'),
Div({ class: 'stat-value text-sm' }, () => date() || 'Not selected'),
Div({ class: 'stat-desc' }, () => date() === today ? 'Today' : '')
])
])
]);
};
$mount(ReactiveDemo, '#demo-reactive');
All Variants
Live Demo
const VariantsDemo = () => {
return Div({ class: 'flex flex-col gap-4' }, [
Datepicker({
label: 'Single date',
value: $('2024-12-25'),
placeholder: 'Select date...'
}),
Datepicker({
label: 'Date range',
range: true,
value: $({ start: '2024-12-01', end: '2024-12-31' }),
placeholder: 'Select range...'
}),
Datepicker({
label: 'With time',
hour: true,
value: $('2024-12-25T14:00:00'),
placeholder: 'Select date and time...'
})
]);
};
$mount(VariantsDemo, '#demo-variants');