@strata-packages/picker

Date, time, and datetime picker for Strata CSS. Zero dependencies. Works standalone or as part of Strata.

Installation

npm install @strata-packages/picker

Usage

Standalone

<link rel="stylesheet" href="node_modules/@strata-packages/picker/picker.css">
<script src="node_modules/@strata-packages/picker/picker.js"></script>

Available as StrataPicker.

With Strata CSS

The picker is bundled into Strata's component build — do not load picker.js separately when using the full Strata bundle.

Available as Strata.Picker.

Quick Start

Declarative — auto-inits on DOMContentLoaded

<input data-st-datepicker     name="date"        placeholder="Select date">
<input data-st-timepicker     name="time"        placeholder="Select time">
<input data-st-datetimepicker name="appointment" placeholder="Select date and time">

Programmatic

const dp  = StrataPicker.date('#myDate')
const tp  = StrataPicker.time('#myTime')
const dtp = StrataPicker.datetime('#myDT')

Date Picker

Options

| Option | Type | Default | Description | |---|---|---|---| | format | string | 'YYYY-MM-DD' | Output format. Tokens: YYYY MMMM MMM MM DD (MMMM = full month name, MMM = short month name) | | weekStart | 0\|1 | 0 | Week start: 0=Sunday, 1=Monday | | min | string | — | Minimum selectable date (ISO string) | | max | string | — | Maximum selectable date (ISO string) | | disable | array | [] | Array of date strings or (Date) => bool functions | | range | bool | false | Enable date range selection | | endInput | string | — | Selector for range end input | | presets | bool\|array | false | Preset shortcuts (true = defaults, or custom array) | | theme | object | — | Inline CSS variable overrides | | className | string | — | Extra class(es) on the popup element |

Data attributes

<input data-st-datepicker
       data-st-format="DD/MM/YYYY"
       data-st-week-start="1"
       data-st-min="2026-01-01"
       data-st-max="2026-12-31"
       data-st-disabled-days="0,6"
       data-st-range
       data-st-end-input="#endDate"
       data-st-presets>

Methods

const dp = StrataPicker.date('#myDate', options)

dp.open()
dp.close()
dp.setDate('2026-06-15')   // programmatically select a date
dp.getDate()               // → Date object or null
dp.getRange()              // → { start: Date|null, end: Date|null }
dp.destroy()

Events

document.addEventListener('st:datepicker:change', e => {
  // e.detail: { input, date, dateEnd, formatted, formattedEnd }
})
document.addEventListener('st:datepicker:open',  e => { /* e.detail: { input } */ })
document.addEventListener('st:datepicker:close', e => { /* e.detail: { input } */ })

Disable specific dates or weekdays

StrataPicker.date('#el', {
  disable: [
    '2026-12-25',
    '2026-01-01',
    date => date.getDay() === 0,   // all Sundays
  ]
})

Or via attribute: data-st-disabled-days="0,6" (0=Sun, 6=Sat).

Date range

<input id="start" data-st-datepicker data-st-range data-st-end-input="#end" name="start">
<input id="end" name="end" readonly>

Presets

// Default presets: Today / Yesterday / Last 7 days / Last 30 days / This month / Last month
StrataPicker.date('#el', { presets: true })

// Custom presets
StrataPicker.date('#el', {
  presets: [
    { label: 'Next week',  fn: today => { const d = new Date(today); d.setDate(d.getDate() + 7); return [d, d] } },
    { label: 'This year',  fn: today => [ new Date(today.getFullYear(), 0, 1), new Date(today.getFullYear(), 11, 31) ] },
  ]
})

Time Picker

Options

| Option | Type | Default | Description | |---|---|---|---| | hour24 | bool | false | 24-hour format | | step | number | 5 | Minute (and second) increment | | showSeconds | bool | false | Show seconds column | | theme | object | — | Inline CSS variable overrides | | className | string | — | Extra class(es) on popup |

Data attributes

<input data-st-timepicker
       data-st-hour24="true"
       data-st-step="15"
       data-st-show-seconds>

Methods

const tp = StrataPicker.time('#myTime', options)

tp.open()
tp.close()
tp.setTime(14, 30)        // set to 14:30
tp.setTime(14, 30, 45)    // with seconds
tp.getTime()              // → { hour, minute, second, formatted }
tp.destroy()

Events

document.addEventListener('st:timepicker:change', e => {
  // e.detail: { input, value, hour, minute, second, period }
})

DateTime Picker

Combines a calendar and time columns in one popup.

StrataPicker.datetime('#el', {
  format:      'YYYY-MM-DD HH:mm',
  hour24:      true,
  step:        15,
  weekStart:   1,
})

Methods

const dtp = StrataPicker.datetime('#myDT', options)

dtp.open()
dtp.close()
dtp.setDate('2026-06-15')
dtp.getDate()             // → Date or null
dtp.destroy()

Events

document.addEventListener('st:datetimepicker:change', e => {
  // e.detail: { input, value, date, hour, minute }
})

Theming

Per-instance via theme option

StrataPicker.date('#el', {
  theme: {
    primary:      '#7c3aed',
    primaryHover: '#6d28d9',
    bg:           '#1e1e2e',
    bgAlt:        '#2a2a3e',
    text:         '#cdd6f4',
    muted:        '#a6adc8',
    border:       '#45475a',
    radius:       '0.75rem',
    shadow:       '0 1rem 3rem rgba(0,0,0,0.5)',
    cellSize:     '2.25rem',
    fontSize:     '0.9rem',
  }
})

Per-instance via className + CSS

StrataPicker.date('#el', { className: 'my-picker' })

.my-picker {
  --stp-primary:   #f59e0b;
  --stp-radius:    0;
  --stp-cell-size: 2.5rem;
}

Global override

:root {
  --stp-primary:   #7c3aed;
  --stp-radius:    0.5rem;
  --stp-font-size: 1rem;
}

CSS variable reference

| Variable | Default | Controls | |---|---|---| | --stp-bg | #ffffff | Popup background | | --stp-bg2 | #f8f9fa | Hover / secondary background | | --stp-text | #212529 | Main text colour | | --stp-muted | #6c757d | Weekday names, column labels | | --stp-border | #dee2e6 | All borders | | --stp-radius | 0.375rem | Corner rounding | | --stp-primary | #0d6efd | Selected day, active items, Apply button | | --stp-primary-h | #0b5ed7 | Primary hover | | --stp-shadow | 0 0.5rem 1rem … | Popup drop shadow | | --stp-focus | 0 0 0 0.25rem … | Focus ring | | --stp-dur | 150ms | Transition speed | | --stp-cell | 2rem | Day cell width and height | | --stp-font-size | 0.9rem | Base font size |

When Strata CSS is present (data-strata on <html>), --stp-* variables automatically inherit from Strata's --st-* tokens so the picker follows the active theme (light / dark / dim) with no extra config.

Backend Compatibility

• The picker writes its value as a plain string into the input's value attribute
• The input keeps its name — form submission works with any backend
• Range mode uses two separate <input> elements, each with their own name
• required is not set by the picker — add it to the <input> if needed

Known Limitations

• No inline (always-visible) mode — popup only
• Date range requires two separate inputs (no single-input range mode)
• Time picker does not parse an existing input value on open

License

MIT © Aftab Ibrahim Kazi