tessl/npm-vaadin--vaadin

Comprehensive collection of business-ready web components for modern web applications

Overview

Eval results

Files

Date/Time Components

Name: tessl/npm-vaadin--vaadin
Author: tessl

Date and time components provide specialized input controls for temporal data with comprehensive internationalization support, validation, and accessibility features.

Capabilities

Date Picker

Date selection component with calendar popup and internationalization.

/**
 * Date picker component with calendar interface
 */
interface DatePicker extends HTMLElement {
  /** Selected date in ISO format (YYYY-MM-DD) */
  value: string;
  /** Minimum selectable date */
  min: string;
  /** Maximum selectable date */
  max: string;
  /** Calendar is currently open */
  opened: boolean;
  /** Internationalization configuration */
  i18n: DatePickerI18n;
  /** Component label */
  label: string;
  /** Placeholder text */
  placeholder: string;
  /** Component is required */
  required: boolean;
  /** Component is disabled */
  disabled: boolean;
  /** Component is read-only */
  readonly: boolean;
  /** Component has validation errors */
  invalid: boolean;
  /** Error message when invalid */
  errorMessage: string;

  /** Open the calendar popup */
  open(): void;
  /** Close the calendar popup */
  close(): void;
  /** Validate the selected date */
  validate(): boolean;
  /** Focus the component */
  focus(): void;
}

/**
 * Date picker internationalization configuration
 */
interface DatePickerI18n {
  /** Array of month names */
  monthNames: string[];
  /** Array of weekday names */
  weekdays: string[];
  /** Array of short weekday names */
  weekdaysShort: string[];
  /** First day of week (0 = Sunday) */
  firstDayOfWeek: number;
  /** "Today" button text */
  today: string;
  /** "Cancel" button text */
  cancel: string;
  /** Custom title formatter */
  formatTitle?: (monthName: string, fullYear: number) => string;
  /** Custom date formatter */
  formatDate?: (date: Date) => string;
  /** Custom date parser */
  parseDate?: (text: string) => Date | undefined;
}

Time Picker

Time selection component with configurable precision and validation.

/**
 * Time picker component for hour and minute selection
 */
interface TimePicker extends HTMLElement {
  /** Selected time in HH:mm format */
  value: string;
  /** Minimum selectable time */
  min: string;
  /** Maximum selectable time */
  max: string;
  /** Time step in seconds (default: 60) */
  step: number;
  /** Component label */
  label: string;
  /** Placeholder text */
  placeholder: string;
  /** Component is required */
  required: boolean;
  /** Component is disabled */
  disabled: boolean;
  /** Component is read-only */
  readonly: boolean;
  /** Component has validation errors */
  invalid: boolean;
  /** Error message when invalid */
  errorMessage: string;

  /** Validate the selected time */
  validate(): boolean;
  /** Focus the component */
  focus(): void;
}

Date Time Picker

Combined date and time selection component.

/**
 * Combined date and time picker component
 */
interface DateTimePicker extends HTMLElement {
  /** Selected date-time in ISO format */
  value: string;
  /** Minimum selectable date-time */
  min: string;
  /** Maximum selectable date-time */
  max: string;
  /** Date field placeholder */
  datePlaceholder: string;
  /** Time field placeholder */
  timePlaceholder: string;
  /** Component label */
  label: string;
  /** Component is required */
  required: boolean;
  /** Component is disabled */
  disabled: boolean;
  /** Component is read-only */
  readonly: boolean;
  /** Component has validation errors */
  invalid: boolean;
  /** Error message when invalid */
  errorMessage: string;
  /** Date picker internationalization */
  i18n: DatePickerI18n;
  /** Time step in seconds */
  step: number;

  /** Validate both date and time */
  validate(): boolean;
  /** Focus the component */
  focus(): void;
}

Usage Examples

import '@vaadin/date-picker';
import '@vaadin/time-picker';
import '@vaadin/date-time-picker';

// Basic date picker
const datePicker = document.createElement('vaadin-date-picker');
datePicker.label = 'Select Date';
datePicker.value = '2024-01-15';

// Date picker with validation
datePicker.min = '2024-01-01';
datePicker.max = '2024-12-31';
datePicker.required = true;

// Custom internationalization
datePicker.i18n = {
  monthNames: [
    'January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
  ],
  weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  firstDayOfWeek: 1, // Monday
  today: 'Today',
  cancel: 'Cancel'
};

// Time picker with step
const timePicker = document.createElement('vaadin-time-picker');
timePicker.label = 'Select Time';
timePicker.step = 1800; // 30-minute intervals

// Date-time picker
const dateTimePicker = document.createElement('vaadin-date-time-picker');
dateTimePicker.label = 'Select Date & Time';
dateTimePicker.datePlaceholder = 'Pick date';
dateTimePicker.timePlaceholder = 'Pick time';

For complete API details and additional examples, see the main documentation.

Install with Tessl CLI