Date Picker

An accessible, flexible date picker built on wf-date-picker.js . Renders as a fixed-position dropdown or an always-visible inline calendar. Supports single dates, linked date ranges, custom display and submit formats, min/max constraints, disabled weekdays and date ranges, and optional footer action buttons. A hidden 'submit' input is created automatically so selected values participate in standard form submissions.

Quick Start

Import the module once. All elements with data-wf-datepicker are enhanced automatically on DOMContentLoaded . The component decorates the inner <input> and appends a calendar icon and a hidden 'submit' input ( name_submit ) automatically.

import './wf-date-picker.js'

<!-- Auto-init (dropdown) -->
<div class="wf-datepicker" data-wf-datepicker>
  <input type="text" name="birth_date" placeholder="Select date">
</div>

<!-- Manual init -->
<div class="wf-datepicker" id="my-dp">
  <input type="text" name="event_date">
</div>
<script type="module">
  import { WojoDatePicker } from './wf-date-picker.js'
  new WojoDatePicker(document.getElementById('my-dp')).init()
</script>

Format Tokens

Use data-wf-format to control how the date is shown in the visible input. The default is mm/dd/yyyy . Use data-wf-format-submit to control the hidden 'submit' value (default: yyyy-mm-dd ). Any combination of the tokens below is supported, separated by any non-letter character. Tokens: dd, mm, mmm, mmmm, yy, yyyy, d, m .

<div class="wf-datepicker" data-wf-datepicker data-wf-format="dd/mm/yyyy">
  <input type="text" name="date">
</div>

<div class="wf-datepicker" data-wf-datepicker data-wf-format="mmmm d, yyyy">
  <input type="text" name="date">
</div>

<div class="wf-datepicker" data-wf-datepicker data-wf-format="D, mmm dd yyyy">
  <input type="text" name="date">
</div>

Constraints

Restrict the selectable range with data-wf-min-date and data-wf-max-date (use the display format or the special value "today" ). Disable specific weekdays with data-wf-disabled-days (semicolon-separated, 0=Sun) and specific dates or ranges with data-wf-disabled-dates . Change the first day of the week with data-wf-week-start .

<!-- Future dates only -->
<div class="wf-datepicker" data-wf-datepicker data-wf-min-date="today">
  <input type="text" name="start_date">
</div>

<!-- Weekdays only, week starts Monday -->
<div class="wf-datepicker" data-wf-datepicker
     data-wf-disabled-days="0;6"
     data-wf-week-start="1">
  <input type="text" name="booking_date">
</div>

<!-- Min/max range -->
<div class="wf-datepicker" data-wf-datepicker
     data-wf-min-date="01/01/2025"
     data-wf-max-date="12/31/2025">
  <input type="text" name="year_date">
</div>

<!-- Disable specific dates and a date range -->
<div class="wf-datepicker" data-wf-datepicker
     data-wf-disabled-dates="06/25/2025;07/04/2025|07/07/2025">
  <input type="text" name="available_date">
</div>

Footer Buttons

Add data-wf-buttons to show Today and Clear buttons in the panel footer. Use data-wf-ok-btn to defer the close until the user confirms, and data-wf-cancel-btn to add a Cancel button. Add a heading above the calendar with data-wf-title .

<!-- Today + Clear buttons -->
<div class="wf-datepicker" data-wf-datepicker data-wf-buttons>
  <input type="text" name="date">
</div>

<!-- OK + Cancel with a panel title -->
<div class="wf-datepicker" data-wf-datepicker
     data-wf-ok-btn
     data-wf-cancel-btn
     data-wf-title="Choose a date">
  <input type="text" name="date">
</div>

Date Range

Link two pickers to form a range. The start picker gets data-wf-range-to="#end-id" and the end picker gets data-wf-range-from="#start-id" . When a start date is selected, earlier dates are automatically disabled in the end picker, and both calendars re-render to show the highlighted range.

<div class="wf-datepicker" id="dp-start"
     data-wf-datepicker
     data-wf-range-to="#dp-end">
  <input type="text" name="start" placeholder="Start date">
</div>

<div class="wf-datepicker" id="dp-end"
     data-wf-datepicker
     data-wf-range-from="#dp-start">
  <input type="text" name="end" placeholder="End date">
</div>

Inline

Add data-wf-inline for a calendar that is always visible with no input trigger. Use a type="hidden" input to capture the value for form submission. All other options (constraints, buttons, range) apply equally.

<div class="wf-datepicker" data-wf-datepicker data-wf-inline data-wf-buttons>
  <input type="hidden" name="selected_date">
</div>

Data Attributes

All configuration is applied via data-wf-* attributes on the .wf-datepicker wrapper.

Events & API

Access the instance via el._wfDatePicker . Global defaults can be set before any pickers initialize with WojoDatePicker.setDefaults() .

Methods

Events

All events are dispatched on the .wf-datepicker wrapper element.

// Set global defaults before init
WojoDatePicker.setDefaults({ format: 'dd/mm/yyyy', weekStart: 1 })

// Access instance
const wrapper = document.querySelector('#my-dp')
const dp = wrapper._wfDatePicker

// Programmatic control
dp.setDate('06/15/2025')   // set by display format string
dp.setDate('2025-06-15')   // or ISO yyyy-mm-dd
dp.getDate()               // -> Date object or null
dp.clearDate()             // clear selection
dp.setDisabled(true)       // disable
dp.show()                  // open panel
dp.hide()                  // close panel
dp.destroy()               // remove component

// Listen for changes
wrapper.addEventListener('wf:date-change', e => {
  console.log(e.detail.date)    // Date object or null
  console.log(e.detail.value)   // formatted string or null
})