Updateing Docs
This commit is contained in:
@@ -8,14 +8,37 @@ Date and date range picker component with calendar interface, time selection, an
|
||||
|
||||
## 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) |
|
||||
| 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) |
|
||||
|
||||
## Styling
|
||||
|
||||
Datepicker wraps a **daisyUI Input component** internally. All Input styling classes work:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Color | `input-primary`, `input-secondary`, `input-accent`, `input-ghost`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants |
|
||||
| Size | `input-xs`, `input-sm`, `input-md`, `input-lg` | Input scale |
|
||||
| Style | `input-bordered` (default), `input-ghost` | Visual style variants |
|
||||
|
||||
> For further details, check the [daisyUI Input Documentation](https://daisyui.com/components/input) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Datepicker({
|
||||
class: "input-primary input-lg",
|
||||
label: "Select date",
|
||||
value: selectedDate
|
||||
});
|
||||
// Applies: primary color, large size
|
||||
```
|
||||
|
||||
## Live Examples
|
||||
|
||||
@@ -190,150 +213,4 @@ const VariantsDemo = () => {
|
||||
]);
|
||||
};
|
||||
$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>
|
||||
```
|
||||
Reference in New Issue
Block a user