# 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>