app-date-picker-input

Date picker with text field input and dropdown calendar

Overview

The app-date-picker-input component combines a Material Design text field with a dropdown date picker. It provides a text input that opens a calendar picker when clicked or focused.

Installation

npm install app-datepicker

Import

import 'app-datepicker/app-date-picker-input';

Or import from specific path:

import 'app-datepicker/dist/date-picker-input/app-date-picker-input.js';

Usage

Basic

<app-date-picker-input label="Select Date"></app-date-picker-input>

Properties

Input-Specific Properties

clearLabel · string · default: "Clear"

Accessible label for the clear/reset icon button.

label · string

Label text displayed above/in the text field.

helper · string

Helper text displayed below the input field.

required · boolean · default: "false"

Marks the field as required.

disabled · boolean · default: "false"

Disables the input field and picker.

readonly · boolean · default: "false"

Makes the input read-only (picker still works).

Inherited Properties

Inherits all properties from app-date-picker:

• value - Selected date (string)
• min - Minimum date (string)
• max - Maximum date (string)
• locale - Language code (string)
• firstDayOfWeek - First day of week (number)
• showWeekNumber - Show week numbers (boolean)
• weekNumberType - Week calculation type (string)
• startView - Initial view (string)
• disabledDates - Disabled dates (string)
• disabledDays - Disabled days (string)
• All label properties
• valueAsDate - Date object (readonly)
• valueAsNumber - Timestamp (readonly)

Material TextField Properties

Also inherits properties from Material Web Components TextField:

• outlined - Use outlined variant (boolean)
• helperPersistent - Always show helper text (boolean)
• validationMessage - Custom validation message (string)
• name - Form field name (string)
• autocapitalize - Auto-capitalization behavior (string)
• inputMode - Input mode hint (string)

Methods

showPicker() · method

Programmatically opens the date picker dropdown.

const input = document.querySelector('app-date-picker-input');
input.showPicker();

closePicker() · method

Closes the date picker dropdown.

const input = document.querySelector('app-date-picker-input');
input.closePicker();

reset() · method

Clears the selected date and resets the input field.

const input = document.querySelector('app-date-picker-input');
input.reset();

Material TextField Methods

Also inherits methods from Material TextField:

• layout() - Re-layout the text field
• setCustomValidity(message) - Set custom validation message

Events

date-updated

Fires when the selected date changes.

interface DateUpdatedDetail {
  isKeypress: boolean;
  value: string;
  valueAsDate: Date;
  valueAsNumber: number;
  key?: string;
}

input.addEventListener('date-updated', (event) => {
  console.log('Selected date:', event.detail.value);
  console.log('Formatted:', event.detail.valueAsDate.toLocaleDateString());
});

first-updated

Fires when the picker completes its first render.

interface FirstUpdatedDetail {
  focusableElements: HTMLElement[];
  value: string;
  valueAsDate: Date;
  valueAsNumber: number;
}

year-updated

Fires when the selected year changes in the year grid view.

interface YearUpdatedDetail {
  year: number;
}

Menu Events

opened

Fires when the dropdown picker opens.

input.addEventListener('opened', () => {
  console.log('Picker opened');
});

closed

Fires when the dropdown picker closes.

input.addEventListener('closed', () => {
  console.log('Picker closed');
});

CSS Custom Properties

Inherits all CSS custom properties from app-date-picker plus Material TextField properties.

Input-Specific

--date-picker-input-icon · color · default: "rgba(0, 0, 0, .54)"

Color of the clear/reset icon button.

Material TextField Properties

Customize the text field appearance:

• --mdc-theme-primary - Primary color for labels and underline
• --mdc-theme-error - Error state color
• --mdc-text-field-fill-color - Background fill color
• --mdc-text-field-disabled-fill-color - Disabled background color
• --mdc-text-field-ink-color - Text color
• --mdc-text-field-label-ink-color - Label color
• --mdc-text-field-outlined-idle-border-color - Outlined variant border
• --mdc-text-field-outlined-hover-border-color - Outlined hover border

CSS Shadow Parts

Inherits all shadow parts from app-date-picker:

• header - Picker header
• body - Picker body
• calendar - Calendar container
• calendar-day - Calendar day cells
• today - Today’s date
• year-grid - Year grid container
• year - Year buttons
• And all other calendar parts

Keyboard Navigation

Input Field

• Click / Enter / Space - Open picker
• Escape - Close picker
• Tab - Move focus (closes picker if open)

Picker (when open)

• Arrow Keys - Navigate dates
• Enter / Space - Select date and close
• Escape - Close without selecting
• Tab - Close picker

See app-date-picker keyboard navigation for full calendar controls.

Example: Form Integration

<form id="booking-form">
  <app-date-picker-input
    name="checkIn"
    label="Check-in Date"
    required
    helper="Select your arrival date"
    min="2024-01-01"
  ></app-date-picker-input>
  
  <app-date-picker-input
    name="checkOut"
    label="Check-out Date"
    required
    helper="Select your departure date"
  ></app-date-picker-input>
  
  <button type="submit">Book</button>
</form>

<script>
  const form = document.getElementById('booking-form');
  const checkIn = form.querySelector('[name="checkIn"]');
  const checkOut = form.querySelector('[name="checkOut"]');
  
  // Update check-out minimum when check-in changes
  checkIn.addEventListener('date-updated', (e) => {
    checkOut.min = e.detail.value;
  });
  
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    console.log('Check-in:', checkIn.value);
    console.log('Check-out:', checkOut.value);
  });
</script>

Example: Styled Input

<style>
  app-date-picker-input {
    --mdc-theme-primary: #1976d2;
    --app-primary: #1976d2;
    --app-on-primary: white;
    --date-picker-input-icon: #1976d2;
  }
  
  app-date-picker-input::part(calendar-day) {
    border-radius: 50%;
  }
</style>

<app-date-picker-input
  label="Birthday"
  outlined
  max="2024-12-31"
></app-date-picker-input>

TypeScript

import type { AppDatePickerInput } from 'app-datepicker/app-date-picker-input';

const input = document.querySelector('app-date-picker-input') as AppDatePickerInput;

// Set value
input.value = '2024-12-25';

// Get as Date
const date: Date | null = input.valueAsDate;

// Methods
input.showPicker();
input.closePicker();
input.reset();

// Listen for changes
input.addEventListener('date-updated', (e) => {
  const detail = e.detail;
  console.log(detail.value); // string
  console.log(detail.valueAsDate); // Date
});

Behavior Notes

• The input displays a formatted date (based on locale) while value remains in ISO format
• The input is read-only by default; users select dates via the picker
• Clicking the clear icon resets the value to empty
• The picker lazy-loads when first opened for better performance
• The dropdown stays open when clicking inside the picker
• Pressing Enter or Space on a date closes the picker automatically
• The component handles form validation and can be used with native form submission