Forms

Date picker

Type a date or pick it from a calendar. For one date or for a range.

One date

Delivery date

Dates before today cannot be chosen.

HTML

<label class="pw-label" for="demo-date">Delivery date</label>
<input class="pw-input" id="demo-date" name="delivery" data-pw-date data-min="today">
<p class="pw-hint">Dates before today cannot be chosen.</p>

Range

The first field has data-range-end with the selector of the second field.

Check in

Check out

HTML

<div class="demo-grid-2" style="max-width:460px">
  <div class="pw-field">
    <label class="pw-label" for="demo-from">Check in</label>
    <input class="pw-input" id="demo-from" name="from" data-pw-date data-range-end="#demo-to" data-months="2" data-format="dd/mm/yyyy">
  </div>
  <div class="pw-field">
    <label class="pw-label" for="demo-to">Check out</label>
    <input class="pw-input" id="demo-to" name="to">
  </div>
</div>
<p class="demo-out" id="demo-range-out"></p>

JavaScript

document.getElementById('demo-from').addEventListener('pw:change', function (e) {
  document.getElementById('demo-range-out').textContent = e.detail.value && e.detail.end ? 'From ' + e.detail.value + ' to ' + e.detail.end : '';
});

No weekends, week starts on Sunday

Appointment

HTML

<label class="pw-label" for="demo-workday">Appointment</label>
<input class="pw-input" id="demo-workday" data-pw-date data-disabled-days="0,6" data-week-start="0" data-format="mm/dd/yyyy">

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-format`	`yyyy-mm-dd`	How the date is shown and typed: any order of `dd`, `mm`, `yyyy` with `-`, `/` or `.` between.
`data-min, data-max`		First and last day that can be chosen, as `yyyy-mm-dd` or the word `today`.
`data-disabled-days`		Weekdays that cannot be chosen: `0` is Sunday, `6` is Saturday.
`data-week-start`	`1`	`1` Monday, `0` Sunday.
`data-range-end`		Selector of the second field of a range.
`data-months`	`1`	`2` shows two months side by side on wide screens.
`data-locale`		Language of month and day names, like `de`. Without it, the language of the page.
`data-iso-name`		Adds a hidden field with this name that always holds `yyyy-mm-dd`, for your server.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:change`	On the first field, with `value` and `end` as `yyyy-mm-dd`.
`change`	The normal event of the field.
`pw:invalid`	A typed date is not a date, or is not allowed. The field gets `aria-invalid="true"`.
`pw:open, pw:close`	When the calendar opens and closes.

From your script

var d = Partwise.get('#demo-date', 'date');
d.value;                    // '2026-10-03'
d.value = '2026-12-24';
d.open(); d.close();
d.disable(function (iso) { return iso === '2026-12-25'; });   // block single days

Keyboard

Key	Action
`Down`	In the field: open the calendar
`Left` `Right`	Previous and next day
`Up` `Down`	Previous and next week
`PageUp` `PageDown`	Previous and next month (with Shift: year)
`Home` `End`	Start and end of the week
`Enter` `Space`	Choose the day
`Esc`	Close

Good to know

People can always type the date. The calendar is a help, not the only way.
Each day is read to screen readers in full, like “Saturday, October 3, 2026”.
Month and day names come from the browser, in the language you set.
Dates only. There is no time picker.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/21-date.css, js/21-date.js.