sigpro-ui/docs/components_old/datepicker.md

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');

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