HTML input type=date: value format, default today and min/max

<input type="date" id="booking_date" name="booking_date">

<script>
  // Local date as yyyy-mm-dd. Not new Date().toISOString(), which is UTC.
  const today = new Date(Date.now() - new Date().getTimezoneOffset() * 6e4)
    .toISOString()
    .slice(0, 10);

  document.getElementById("booking_date").value = today;
</script>

<label for="booking_date">Preferred date</label>
<input type="date" id="booking_date" name="booking_date" required>

<script>
  // yyyy-mm-dd for a Date, in the visitor's time zone
  const ymd = (d) =>
    new Date(d.getTime() - d.getTimezoneOffset() * 6e4).toISOString().slice(0, 10);

  const now = new Date();
  const in90Days = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 90);

  const field = document.getElementById("booking_date");
  field.min = ymd(now);      // no past dates
  field.max = ymd(in90Days); // up to 90 days ahead
</script>

<label for="when">Date</label>
<input type="date" id="when" name="when">
<output for="when" id="when-text"></output>

<script>
  const when = document.getElementById("when");
  const fmt = new Intl.DateTimeFormat("en-GB", {
    dateStyle: "long",
    timeZone: "UTC", // valueAsDate is midnight UTC
  });

  when.addEventListener("input", () => {
    document.getElementById("when-text").textContent =
      when.valueAsDate ? fmt.format(when.valueAsDate) : "";
  });
</script>

<label for="callback_at">Call me back at</label>
<input type="datetime-local" id="callback_at" name="callback_at">
<input type="hidden" id="time_zone" name="time_zone">

<script>
  document.getElementById("time_zone").value =
    Intl.DateTimeFormat().resolvedOptions().timeZone; // e.g. "Europe/London"
</script>

<!-- Arrives as: callback_at = 2026-10-02T14:30
                 time_zone   = Europe/London -->

<style>
  /* Chromium only: restyle the built-in calendar icon */
  input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
  }
  input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
  }
  /* Ask for the dark picker on a dark theme */
  .dark input[type="date"] { color-scheme: dark; }
</style>

<input type="date" id="when" name="when">
<button type="button" id="open-picker">Pick a date</button>

<script>
  document.getElementById("open-picker").addEventListener("click", () => {
    const input = document.getElementById("when");
    input.focus();
    try {
      input.showPicker(); // needs a click (user activation)
    } catch {
      // No showPicker() here: the field is focused for typing or tapping
    }
  });
</script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<input type="text" id="when" name="booking_date">

<script>
  flatpickr("#when", {
    dateFormat: "Y-m-d", // submitted: 2026-10-02
    altInput: true,      // shown: 2 October 2026
    altFormat: "j F Y",
    minDate: "today",
    // No weekends. Using disable keeps flatpickr's calendar on phones too.
    disable: [(date) => date.getDay() === 0 || date.getDay() === 6],
  });
</script>

<label for="start_month">Start month (yyyy-mm)</label>
<input type="month" id="start_month" name="start_month"
       placeholder="yyyy-mm" pattern="[0-9]{4}-[0-9]{2}">

<script>
  const field = document.getElementById("start_month");
  if (field.type !== "month") {
    // Text box fallback: the pattern above still checks the format.
    field.title = "Use the format yyyy-mm, for example 2026-10";
  }
</script>