Date PickerReady

<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="Label" value="2022-01-12"></nord-date-picker>

<script>
  const picker = document.querySelector("nord-date-picker")

  // as an example, highlight every sixth day
  picker.isDateHighlighted = date => {
    return date.getDate() % 6 === 0 ? "fully booked" : false
  }
</script>

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

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

<nord-stack>
  <nord-date-picker size="s" label="Date" placeholder="2021-01-13"></nord-date-picker>
  <nord-date-picker size="m" label="Date" placeholder="2021-01-13"></nord-date-picker>
  <nord-date-picker size="l" label="Date" placeholder="2021-01-13"></nord-date-picker>
</nord-stack>

<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="Choose date" placeholder="mm/dd/yyyy" required></nord-date-picker>

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

  function checkDateFormat(value = "") {
    const matches = value.match(DATE_FORMAT_US)
    return matches
  }

  function checkInputValidity() {
    const inputValue = picker.value != "" && checkDateFormat(picker.rawValue)
    const badInput = picker.rawValue && !checkDateFormat(picker.rawValue)
    const valueMissing = picker.required && !picker.rawValue

    if (inputValue) {
      console.log("Valid date:", picker.value)
      picker.error = ""
    } else if (badInput) {
      picker.error = "Please enter a date in the format mm/dd/yyyy"
    } else if (valueMissing) {
      picker.error = "This field is required"
    }
  }

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

  picker.addEventListener("input", () => {
    checkInputValidity()
  })
  picker.addEventListener("change", () => {
    checkInputValidity()
  })
  picker.addEventListener("blur", () => {
    checkInputValidity()
  })
</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>