Date Picker draft

<nord-date-picker label="Label" value="2021-01-13"></nord-date-picker>

<nord-date-picker label="Label" first-day-of-week="0"></nord-date-picker>

<nord-date-picker label="US date format" value="2021-01-01"></nord-date-picker>

<script>
  const picker = document.querySelector("nord-date-picker")
  const DATE_FORMAT_US = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/

  picker.dateAdapter = {
    parse(value = "", createDate) {
      const matches = value.match(DATE_FORMAT_US)
      return matches ? createDate(matches[3], matches[1], matches[2]) : undefined
    },
    format(date) {
      return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
    },
  }
</script>

<nord-date-picker label="Label" value="2021-01-01" disabled></nord-date-picker>

<nord-date-picker label="Weekends disallowed"></nord-date-picker>

<script>
  const picker = document.querySelector("nord-date-picker")
  picker.isDateDisabled = function isWeekend(date) {
    return date.getDay() === 0 || date.getDay() === 6
  }
</script>

<nord-date-picker label="Label" expand></nord-date-picker>

<nord-date-picker label="Date" placeholder="Type date here" expand hide-label></nord-date-picker>

<nord-date-picker label="Valitse päivämäärä" value="2021-01-01"></nord-date-picker>

<script>
  const picker = document.querySelector("nord-date-picker")
  const DATE_FORMAT_FI = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/

  picker.dateAdapter = {
    parse(value = "", createDate) {
      const matches = value.match(DATE_FORMAT_FI)
      return matches ? createDate(matches[3], matches[2], matches[1]) : undefined
    },
    format(date) {
      return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`
    },
  }

  picker.localization = {
    buttonLabel: "Valitse päivämäärä",
    selectedDateMessage: "Valittu päivämäärä on",
    prevMonthLabel: "Edellinen kuukausi",
    nextMonthLabel: "Seuraava kuukausi",
    monthSelectLabel: "Kuukausi",
    yearSelectLabel: "Vuosi",
    closeLabel: "Sulje ikkuna",
    calendarHeading: "Valitse päivämäärä",
    dayNames: ["Sunnuntai", "Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai"],
    monthNames: [
      "Tammikuu",
      "Helmikuu",
      "Maaliskuu",
      "Huhtikuu",
      "Toukokuu",
      "Kesäkuu",
      "Heinäkuu",
      "Elokuu",
      "Syyskuu",
      "Lokakuu",
      "Marraskuu",
      "Joulukuu",
    ],
    monthNamesShort: [
      "Tammi",
      "Helmi",
      "Maalis",
      "Huhti",
      "Touko",
      "Kesä",
      "Heinä",
      "Elo",
      "Syys",
      "Loka",
      "Marras",
      "Joulu",
    ],
    locale: "fi-FI",
  }
</script>

<nord-date-picker label="Label" value="2021-02-01" min="2021-01-15" max="2021-03-15"></nord-date-picker>

<nord-date-picker label="Label"></nord-date-picker>

<script>
  customElements.whenDefined("nord-date-picker").then(() => {
    const picker = document.querySelector("nord-date-picker")
    picker.show()
  })
</script>

<nord-date-picker label="Label" expand>
  <div slot="hint">
    Hint is an accessible way to provide <strong>additional information</strong> that might help the user
  </div>
</nord-date-picker>

<nord-date-picker>
  <div slot="label">Label <span style="color: var(--n-color-status-success)">with color</span></div>
</nord-date-picker>

<nord-date-picker
  label="Label"
  hint="Hint is an accessible way to provide additional information that might help the user"
  expand
></nord-date-picker>

<nord-date-picker label="Date" placeholder="e.g. 2020-01-01"></nord-date-picker>

<nord-date-picker label="Date of birth" error="This field is required"></nord-date-picker>