340 lines
11 KiB
Markdown
340 lines
11 KiB
Markdown
# 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
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
const BasicDemo = () => {
|
|
const date = $('');
|
|
|
|
return Datepicker({
|
|
label: 'Select date',
|
|
value: date,
|
|
placeholder: 'Choose a date...'
|
|
});
|
|
};
|
|
$mount(BasicDemo, '#demo-basic');
|
|
```
|
|
|
|
### Date Range Picker
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-range" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
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
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-time" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
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
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-range-time" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
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
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
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
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
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');
|
|
```
|
|
|
|
<script>
|
|
(function() {
|
|
const initDatepickerExamples = () => {
|
|
|
|
// 1. Basic Datepicker
|
|
const basicTarget = document.querySelector('#demo-basic');
|
|
if (basicTarget && !basicTarget.hasChildNodes()) {
|
|
const BasicDemo = () => {
|
|
const date = $('');
|
|
|
|
return Datepicker({
|
|
label: 'Select date',
|
|
value: date,
|
|
placeholder: 'Choose a date...'
|
|
});
|
|
};
|
|
$mount(BasicDemo, basicTarget);
|
|
}
|
|
|
|
// 2. Date Range Picker
|
|
const rangeTarget = document.querySelector('#demo-range');
|
|
if (rangeTarget && !rangeTarget.hasChildNodes()) {
|
|
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, rangeTarget);
|
|
}
|
|
|
|
// 3. With Time Selection
|
|
const timeTarget = document.querySelector('#demo-time');
|
|
if (timeTarget && !timeTarget.hasChildNodes()) {
|
|
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, timeTarget);
|
|
}
|
|
|
|
// 4. Range with Time
|
|
const rangeTimeTarget = document.querySelector('#demo-range-time');
|
|
if (rangeTimeTarget && !rangeTimeTarget.hasChildNodes()) {
|
|
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, rangeTimeTarget);
|
|
}
|
|
|
|
// 5. Reactive Display
|
|
const reactiveTarget = document.querySelector('#demo-reactive');
|
|
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
|
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, reactiveTarget);
|
|
}
|
|
|
|
// 6. All Variants
|
|
const variantsTarget = document.querySelector('#demo-variants');
|
|
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
|
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, variantsTarget);
|
|
}
|
|
};
|
|
|
|
initDatepickerExamples();
|
|
|
|
if (window.$docsify) {
|
|
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
|
hook.doneEach(initDatepickerExamples);
|
|
});
|
|
}
|
|
})();
|
|
</script>
|