Date field

<form id="form" class="demo" novalidate>
  <div class="demo-field">
    <label class="demo-label" for="due">Delivery date</label>
    <input id="due" name="due" type="date" class="demo-input">
    <p class="demo-hint">Type <span class="demo-chip" data-try>next friday</span> <span class="demo-chip" data-try>in 2 weeks</span> <span class="demo-chip" data-try>25/12</span></p>
  </div>
  <button class="demo-btn">Continue</button>
  <p id="out" class="demo-out" aria-live="polite"></p>
</form>

import { createDatePicker, today, toIso } from 'https://devix.pk/cdn/oss/date-picker@1.2.0/index.js';

const input = document.getElementById('due');
const picker = createDatePicker(input, {
  locale: 'en-GB', // day/month order, so 25/12 reads as 25 December
  min: toIso(today()),
  disabled: [{ weekdays: [6, 7] }],
});

document.querySelectorAll('[data-try]').forEach((chip) =>
  chip.addEventListener('click', () => {
    input.value = chip.textContent;
    input.focus();
    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
  }),
);

document.getElementById('form').addEventListener('submit', (event) => {
  event.preventDefault();
  const data = new FormData(event.target);
  document.getElementById('out').textContent = picker.getValue() ? `posts due=${data.get('due')}` : 'Choose a weekday from today on.';
});

@import url('https://devix.pk/cdn/oss/date-picker@1.2.0/date-picker.min.css');