Date Picker

<mo-date-picker
  closeOnSelection
  format="dd.MM.yyyy"
  label="Choose date"
  help-text="Click the calendar icon to open the selector popup."
></mo-date-picker>

<mo-date-picker format="dd.MM.yyyy" selection="range" label="Choose date"></mo-date-picker>

<mo-date-picker
  id="programmatic"
  closeOnSelection
  format="dd.MM.yyyy"
  label="Date today"
  help-text="The value has been set to today using new Date()"
></mo-date-picker>
<br />
<mo-date-picker format="dd.MM.yyyy" value="18.04.2024 - 03.07.2024" selection="range" help-text="The range has been set using a string '18.04.2024 - 03.07.2024'" label="String range"></mo-date-picker>

<script>
  const picker = document.querySelector('#programmatic');
  picker.value = new Date();
</script>

<mo-date-picker
  format="dd.MM.yyyy, HH:mm"
  time-input
  selection="range"
  label="Choose date and time"
  no-suggestions
></mo-date-picker>

<mo-date-picker
  closeOnSelection
  format="dd.MM.yyyy"
  id="min-and-max"
  format="MMMM do, yyyy"
  label="Choose date"
  help-text="Click the calendar icon to open the selector popup."
></mo-date-picker>

<script>
  const picker = document.querySelector('#min-and-max');
  const now = new Date();
  const twoWeeksFromNow = new Date(Date.now() + 6.048e8 * 2);
  picker.min = now;
  picker.max = twoWeeksFromNow;
</script>

<div style="display: flex; flex-direction: column; gap: 8px;">
  <mo-select style="align-self: end;" value="fi">
    <mo-option value="fi">Suomi</mo-option>
    <mo-option value="en-US">English</mo-option>
    <mo-option value="pl">Polish</mo-option>
    <mo-option value="es">Español</mo-option>
    <mo-option value="pt-BR">Português</mo-option>
  </mo-select>
  <mo-date-picker
    id="localized"
    label="Valitse päivä"
    locale="fi"
    lang="fi"
    format="do MMMM, yyyy"
    closeOnSelection
    selection="range"
  ></mo-date-picker>
</div>

<script>
  const select = document.querySelector('mo-select');
  const datePicker = document.querySelector('#localized');
  const labels = {
    fi: 'Valitse päivä',
    'en-US': 'Choose date',
    'pt-BR': 'Escolha a data',
    es: 'Elegir fecha',
    pl: 'Wybierz datę'
  };
  select.addEventListener('mo-change', e => {
    datePicker.locale = e.target.value;
    datePicker.lang = e.target.value.split('-')[0];
    datePicker.label = labels[e.target.value];
  });
</script>

<mo-date-picker
  format="dd.MM.yyyy, HH:mm"
  time-input
  time-readonly
  time-default-value="06:00"
  selection="range"
  label="Choose date and time"
></mo-date-picker>

<mo-date-picker id="footer-date" selection="range" label="Choose date range">
  <div class="footer-div" slot="footer">
    <mo-button id="cancel-btn" variant="secondary">Cancel</mo-button>
    <mo-button id="apply-btn">Apply</mo-button>
  </div>
  <div class="sidebar-div" slot="sidebar">
    <mo-radio-group class="rg" hide-fieldset orientation="vertical">
      <mo-radio-button value="86400">Day</mo-radio-button>
      <mo-radio-button value="604800">Week</mo-radio-button>
      <mo-radio-button value="2592000">Month</mo-radio-button>
      <mo-radio-button value="31536000">Year</mo-radio-button>
    </mo-radio-group>
  </div>
  <div class="footer-div" slot="mobile-footer">
    <mo-button id="cancel-btn-mobile" variant="secondary">Cancel</mo-button>
    <mo-button id="apply-btn-mobile">Apply</mo-button>
  </div>
  <div class="sidebar-div" slot="mobile-sidebar">
    <mo-radio-group class="rg-mobile" hide-fieldset>
      <mo-radio-button value="86400">Day</mo-radio-button>
      <mo-radio-button value="604800">Week</mo-radio-button>
      <mo-radio-button value="2592000">Month</mo-radio-button>
      <mo-radio-button value="31536000">Year</mo-radio-button>
    </mo-radio-group>
  </div>
</mo-date-picker>

<script>
  const picker = document.querySelector('#footer-date');
  const radioGrp = document.querySelector('.rg');
  const radioGrpMobile = document.querySelector('.rg-mobile');
  const cancelBtn = document.querySelector('#cancel-btn');
  const applyBtn = document.querySelector('#apply-btn');
  const cancelBtnMobile = document.querySelector('#cancel-btn');
  const applyBtnMobile = document.querySelector('#apply-btn');
  cancelBtn.addEventListener('click', () => {
    picker.reset();
    picker.hide();
  });
  applyBtn.addEventListener('click', () => {
    picker.hide();
  });
  cancelBtnMobile.addEventListener('click', () => {
    picker.reset();
    picker.hide();
  });
  applyBtnMobile.addEventListener('click', () => {
    picker.hide();
  });
  radioGrp.addEventListener('mo-change', e => {
    const value = e.target.value;
    const today = new Date();
    const rangeEndMs = new Date().getTime() + parseInt(value) * 1000;
    const rangeEndDate = new Date(rangeEndMs);
    picker.value = [today, rangeEndDate];
  });
  radioGrpMobile.addEventListener('mo-change', e => {
    const value = e.target.value;
    const today = new Date();
    const rangeEndMs = new Date().getTime() + parseInt(value) * 1000;
    const rangeEndDate = new Date(rangeEndMs);
    picker.value = [today, rangeEndDate];
  });
</script>

<style>
  .footer-div,
  .sidebar-div {
    display: flex;
    align-items: center;
    gap: var(--mo-spacing-small);
    width: 100%;
    justify-content: flex-end;
    box-sizing: border-box;
  }
  .sidebar-div {
    flex-direction: column;
    gap: 0;
  }
  mo-radio-button {
    margin: 0;
  }
  mo-date-picker::part(sidebar) {
    padding: 0;
  }
  mo-date-picker::part(mobile-sidebar) {
    padding: 0;
  }
  @media screen and (max-width: 576px) {
    .footer-div,
    .sidebar-div {
      flex-direction: row;
      width: 100%;
    }
    .footer-div {
      justify-content: flex-end;
    }
    .sidebar-div {
      justify-content: flex-start;
    }
  }
</style>