Datepicker

<form id="demo">
  <sl-datepicker placeholder="English Date" name="single-en"></sl-datepicker>
  <br>
  <sl-datepicker locale="de" placeholder="German Date" name="single-de"></sl-datepicker>
  <br>
  <label>Prefilled</label>
  <sl-datepicker value="2025-07-21" name="prefilled"></sl-datepicker>
  <br>
  <pre></pre>
  <br>
  <sl-button type="submit">Serialize form</sl-button>
</form>

<script type="module">
  makeFormDemo('demo');
</script>

<form id="range-demo">
  <sl-datepicker placeholder="Range with array value" mode="range" name="boringRange"></sl-datepicker>
  <br>
  <sl-datepicker placeholder="Range with separate key value pairs" mode="range" name="range[from]" additionalName="range[to]"></sl-datepicker>
  <br>
  <label>Prefilled</label>
  <sl-datepicker mode="range" value="2025-07-21 2025-07-26" name="other[from]" additionalName="other[to]"></sl-datepicker>
  <br>
  <pre></pre>
  <br>
  <sl-button type="submit">Serialize form</sl-button>
</form>

<script type="module">
  makeFormDemo('range-demo');
</script>

<form id="week-demo">
  <sl-datepicker placeholder="Select a week" name="week" week-select></sl-datepicker>
  <br>
  <sl-datepicker placeholder="Week with separate key value pairs" name="from" additionalName="to" week-select></sl-datepicker>
  <br>
  <pre></pre>
  <br>
  <sl-button type="submit">Serialize form</sl-button>
</form>

<script type="module">
  makeFormDemo('week-demo');
</script>

<form id="clear-demo">
  <sl-datepicker placeholder="Select a week" name="week" week-select clearable></sl-datepicker>
  <br>
  <sl-datepicker placeholder="Select a day" name="day" clearable></sl-datepicker>
  <br>
  <sl-datepicker placeholder="Select a range" name="range" mode="range" clearable></sl-datepicker>
  <br>
  <pre></pre>
  <br>
  <sl-button type="submit">Serialize form</sl-button>
</form>

<script type="module">
  makeFormDemo('clear-demo');
</script>

<sl-datepicker placeholder="Forget it!" disabled></sl-datepicker>

<sl-datepicker class="minmax" placeholder="Choose future"></sl-datepicker>
<br>
<sl-datepicker class="minmax" placeholder="Choose past"></sl-datepicker>
<br>
<sl-datepicker class="minmax" placeholder="Choose "></sl-datepicker>

<script>
// instead of calculating dates and setting them programmatically, just use attributes like min="YYYY-MM-DD"
  window.addDays = (date, days) => {
    const result = new Date(date);
    result.setDate(result.getDate() + days);
    return result;
  }
  const pickers = document.getElementsByClassName('minmax');
  const today = new Date();
  const todayStr = today.toISOString().split('T')[0];
  const dayAfterTomorrow = addDays(today, 2).toISOString().split('T')[0];
  const dayBeforeYesterday = addDays(today, -2).toISOString().split('T')[0];
  pickers[0].setAttribute('min', todayStr);
  pickers[1].setAttribute('max', todayStr);
  pickers[2].setAttribute('min', dayBeforeYesterday);
  pickers[2].setAttribute('max', dayAfterTomorrow);
</script>

<form id="format-demo">
  <sl-datepicker name="default" placeholder="Visible: 'F j, Y'; Internal: 'Y-m-d'"></sl-datepicker>
  <br>
  <sl-datepicker name="fancy-to-ISO" placeholder="Visible: 'F j, Y'; Internal: 'Z'" altFormat="J of F \\i\\n t\\he \\year Y" dateFormat="Z"></sl-datepicker>
  <br>
  <pre></pre>
  <br>
  <sl-button type="submit">Serialize form</sl-button>
</form>

<script type="module">
  makeFormDemo('format-demo');
</script>

<form id="datetime-demo">
  <sl-datepicker name="datetime" enableTime altFormat="F j, Y | H:i" dateFormat="Y-m-d H:i:S"></sl-datepicker>
  <br>
  <pre></pre>
  <br>
  <sl-button type="submit">Serialize form</sl-button>
</form>

<script type="module">
  makeFormDemo('datetime-demo');
</script>

<form id="time-demo">
  <sl-datepicker name="time" mode="time" dateFormat="H:i" altFormat="H:i" enableTime noCalendar></sl-datepicker>
  <br>
  <pre></pre>
  <br>
  <sl-button type="submit">Serialize form</sl-button>
</form>

<script type="module">
  makeFormDemo('time-demo');
</script>

<form id="datetime-range-demo">
  <sl-datepicker placeholder="Range with time" mode="range" name="datetimeRange" enableTime dateFormat="Y-m-d H:i:S" altFormat="F j, Y | H:i"></sl-datepicker>
  <br>
  <label>Prefilled</label>
  <sl-datepicker id="prefilled-datetime-range" mode="range" name="datetimeRange-prefilled" enableTime dateFormat="Y-m-d H:i:S" altFormat="F j, Y | H:i"></sl-datepicker>
  <br>
  <pre></pre>
  <br>
  <sl-button type="submit">Serialize form</sl-button>
</form>

<script type="module">
  makeFormDemo('datetime-range-demo');
  // instead of calculating dates and setting them programmatically, just use a value attribute like so: value="fromDatetime toDatetime" (in the format of dateFormat)
  const picker = document.getElementById('prefilled-datetime-range');
  let today = new Date(Date.now());
  today.setMinutes(today.getMinutes() + 30);
  today.setMinutes(0, 0, 0);
  const todayStr = today.toISOString().split('T').join(' ').split('.')[0];
  const dayAfterTomorrow = addDays(today, 2).toISOString().split('T').join(' ').split('.')[0];
  picker.value = `${todayStr} ${dayAfterTomorrow}`;
</script>

<sl-datepicker placeholder="Default"></sl-datepicker>
<br>
<sl-datepicker placeholder="Above" position="above"></sl-datepicker>
<br>
<sl-datepicker placeholder="Above Right" position="above right"></sl-datepicker>
<br>
<sl-datepicker placeholder="Right" position="right"></sl-datepicker>

<sl-datepicker id="event-picker" placeholder="Play with me" position="above" clearable></sl-datepicker>
<pre id="event-output"></pre>

<script type="module">
  // instead of addingEventListeners, in a lit environment, use @eventName on the element
  const picker = document.getElementById('event-picker');
  const output = document.getElementById('event-output');
  'sl-change sl-input sl-focus sl-blur sl-clear sl-invalid'.split(' ').forEach((t) => {
    picker.addEventListener(t, (e) => {
      output.textContent = `${output.textContent}\n${e.type} -- ${e.currentTarget.value || 'no value'} `
    })
  })
</script>