Date Picker

Locale finnishLocale = new Locale("fi", "FI");

DatePicker datePicker = new DatePicker("Select a date:");
datePicker.setLocale(finnishLocale);

// Setup date picker with a single custom format `yyyy-MM-dd` for
// displaying dates and parsing user input
// Custom date formats are specified using the date pickers
// internationalization API
DatePicker.DatePickerI18n singleFormatI18n = new DatePicker.DatePickerI18n();
singleFormatI18n.setDateFormat("yyyy-MM-dd");

DatePicker singleFormatDatePicker = new DatePicker("Select a date:");
singleFormatDatePicker.setI18n(singleFormatI18n);

// Setup date picker with a primary format and additional parsing
// formats
// Date is always displayed using the primary format `yyyy-MM-dd`
// When parsing user input, the date picker first attempts to match the
// input with the primary format `yyyy-MM-dd`, then `MM/dd/yyyy`, and
// finally `dd.MM.yyyy`
DatePicker.DatePickerI18n multiFormatI18n = new DatePicker.DatePickerI18n();
multiFormatI18n.setDateFormats("yyyy-MM-dd", "MM/dd/yyyy",
        "dd.MM.yyyy");

DatePicker multiFormatDatePicker = new DatePicker("Select a date:");
multiFormatDatePicker.setI18n(multiFormatI18n);

DatePicker.DatePickerI18n i18n = new DatePicker.DatePickerI18n();
i18n.setDateFormat("yy-MM-dd");
i18n.setReferenceDate(LocalDate.of(1980, 2, 2));
datePicker.setI18n(i18n);

protected override firstUpdated() {
  const formatDateIso8601 = (dateParts: DatePickerDate): string => {
    const { year, month, day } = dateParts;
    const date = new Date(year, month, day);

    return dateFnsFormat(date, 'yyyy-MM-dd');
  };

  const parseDateIso8601 = (inputValue: string): DatePickerDate => {
    const date = dateFnsParse(inputValue, 'yyyy-MM-dd', new Date());

    return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
  };

  this.datePicker.i18n = {
    ...this.datePicker.i18n,
    formatDate: formatDateIso8601,
    parseDate: parseDateIso8601,
  };
}

<vaadin-date-picker
  label="Appointment date"
  helper-text="Must be within 60 days from today"
  .min="${formatISO(this.minDate, { representation: 'date' })}"
  .max="${formatISO(this.maxDate, { representation: 'date' })}"
  .errorMessage="${this.errorMessage}"
  @change="${({ target }: DatePickerChangeEvent) => {
    const date = dateFnsParse(target.value ?? '', 'yyyy-MM-dd', new Date());
    if (isBefore(date, this.minDate)) {
      this.errorMessage = 'Too early, choose another date';
    } else if (isAfter(date, this.maxDate)) {
      this.errorMessage = 'Too late, choose another date';
    } else {
      this.errorMessage = '';
    }
  }}"
></vaadin-date-picker>

private binder = new Binder(this, AppointmentModel);

protected override firstUpdated() {
  this.binder.for(this.binder.model.startDate).addValidator({
    message: 'Select a weekday',
    validate: (startDate: string) => {
      const date = new Date(startDate);
      const isWeekday = date.getDay() >= 1 && date.getDay() <= 5;
      return isWeekday;
    },
  });
}

protected override render() {
  return html`
    <vaadin-date-picker
      label="Meeting date"
      helper-text="Mondays – Fridays only"
      ${field(this.binder.model.startDate)}
    ></vaadin-date-picker>
  `;
}

<vaadin-horizontal-layout theme="spacing">
  <vaadin-date-picker
    label="Departure date"
    .max="${this.returnDate}"
    @value-changed="${(event: DatePickerValueChangedEvent) => {
      this.departureDate = event.detail.value;
    }}"
  ></vaadin-date-picker>
  <vaadin-date-picker
    label="Return date"
    .min="${this.departureDate}"
    @value-changed="${(event: DatePickerValueChangedEvent) => {
      this.returnDate = event.detail.value;
    }}"
  ></vaadin-date-picker>
</vaadin-horizontal-layout>

@state()
selectedYear?: number;

@state()
selectedMonth?: string;

@state()
selectedDay?: number;

@state()
selectableDays: number[] = [];

private handleYearChange(e: ComboBoxSelectedItemChangedEvent<number>) {
  this.selectedYear = e.detail.value!;
  this.selectedMonth = undefined;
  this.selectedDay = undefined;
  this.selectableDays = [];
}

private handleMonthChange(e: ComboBoxSelectedItemChangedEvent<string>) {
  this.selectedMonth = e.detail.value!;
  this.selectedDay = undefined;

  if (!this.selectedYear || !this.selectedMonth) {
    this.selectableDays = [];
    return;
  }

  const startOfMonth = new Date(this.selectedYear, this.months.indexOf(this.selectedMonth), 1);
  const lengthOfMonth = getDaysInMonth(startOfMonth);

  this.selectableDays = Array.from({ length: lengthOfMonth }, (_, k) => k + 1);
}

private handleDayChange(e: ComboBoxSelectedItemChangedEvent<number>) {
  this.selectedDay = e.detail.value!;
}

protected override render() {
  return html`
    <vaadin-horizontal-layout theme="spacing">
      <vaadin-combo-box
        label="Year"
        style="width: 6em;"
        .items="${this.years}"
        .selectedItem="${this.selectedYear}"
        @selected-item-changed="${this.handleYearChange}"
      ></vaadin-combo-box>
      <vaadin-combo-box
        label="Month"
        style="width: 9em;"
        .items="${this.months}"
        .selectedItem="${this.selectedMonth}"
        .disabled="${!this.selectedYear}"
        @selected-item-changed="${this.handleMonthChange}"
      ></vaadin-combo-box>
      <vaadin-combo-box
        label="Day"
        style="width: 5em;"
        .items="${this.selectableDays}"
        .selectedItem="${this.selectedDay}"
        .disabled="${!this.selectedYear || !this.selectedMonth}"
        @selected-item-changed="${this.handleDayChange}"
      ></vaadin-combo-box>
    </vaadin-horizontal-layout>
  `;
}

<vaadin-date-picker
  label="Start date"
  placeholder="DD/MM/YYYY"
  helper-text="Format: DD/MM/YYYY"
></vaadin-date-picker>