0
# Date/Time Components
1

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

4
## Capabilities
5

6
### Date Picker
7

8
Date selection component with calendar popup and internationalization.
9

10
```typescript { .api }
11
/**
12
 * Date picker component with calendar interface
13
 */
14
interface DatePicker extends HTMLElement {
15
  /** Selected date in ISO format (YYYY-MM-DD) */
16
  value: string;
17
  /** Minimum selectable date */
18
  min: string;
19
  /** Maximum selectable date */
20
  max: string;
21
  /** Calendar is currently open */
22
  opened: boolean;
23
  /** Internationalization configuration */
24
  i18n: DatePickerI18n;
25
  /** Component label */
26
  label: string;
27
  /** Placeholder text */
28
  placeholder: string;
29
  /** Component is required */
30
  required: boolean;
31
  /** Component is disabled */
32
  disabled: boolean;
33
  /** Component is read-only */
34
  readonly: boolean;
35
  /** Component has validation errors */
36
  invalid: boolean;
37
  /** Error message when invalid */
38
  errorMessage: string;
39

40
  /** Open the calendar popup */
41
  open(): void;
42
  /** Close the calendar popup */
43
  close(): void;
44
  /** Validate the selected date */
45
  validate(): boolean;
46
  /** Focus the component */
47
  focus(): void;
48
}
49

50
/**
51
 * Date picker internationalization configuration
52
 */
53
interface DatePickerI18n {
54
  /** Array of month names */
55
  monthNames: string[];
56
  /** Array of weekday names */
57
  weekdays: string[];
58
  /** Array of short weekday names */
59
  weekdaysShort: string[];
60
  /** First day of week (0 = Sunday) */
61
  firstDayOfWeek: number;
62
  /** "Today" button text */
63
  today: string;
64
  /** "Cancel" button text */
65
  cancel: string;
66
  /** Custom title formatter */
67
  formatTitle?: (monthName: string, fullYear: number) => string;
68
  /** Custom date formatter */
69
  formatDate?: (date: Date) => string;
70
  /** Custom date parser */
71
  parseDate?: (text: string) => Date | undefined;
72
}
73
```
74

75
### Time Picker
76

77
Time selection component with configurable precision and validation.
78

79
```typescript { .api }
80
/**
81
 * Time picker component for hour and minute selection
82
 */
83
interface TimePicker extends HTMLElement {
84
  /** Selected time in HH:mm format */
85
  value: string;
86
  /** Minimum selectable time */
87
  min: string;
88
  /** Maximum selectable time */
89
  max: string;
90
  /** Time step in seconds (default: 60) */
91
  step: number;
92
  /** Component label */
93
  label: string;
94
  /** Placeholder text */
95
  placeholder: string;
96
  /** Component is required */
97
  required: boolean;
98
  /** Component is disabled */
99
  disabled: boolean;
100
  /** Component is read-only */
101
  readonly: boolean;
102
  /** Component has validation errors */
103
  invalid: boolean;
104
  /** Error message when invalid */
105
  errorMessage: string;
106

107
  /** Validate the selected time */
108
  validate(): boolean;
109
  /** Focus the component */
110
  focus(): void;
111
}
112
```
113

114
### Date Time Picker
115

116
Combined date and time selection component.
117

118
```typescript { .api }
119
/**
120
 * Combined date and time picker component
121
 */
122
interface DateTimePicker extends HTMLElement {
123
  /** Selected date-time in ISO format */
124
  value: string;
125
  /** Minimum selectable date-time */
126
  min: string;
127
  /** Maximum selectable date-time */
128
  max: string;
129
  /** Date field placeholder */
130
  datePlaceholder: string;
131
  /** Time field placeholder */
132
  timePlaceholder: string;
133
  /** Component label */
134
  label: string;
135
  /** Component is required */
136
  required: boolean;
137
  /** Component is disabled */
138
  disabled: boolean;
139
  /** Component is read-only */
140
  readonly: boolean;
141
  /** Component has validation errors */
142
  invalid: boolean;
143
  /** Error message when invalid */
144
  errorMessage: string;
145
  /** Date picker internationalization */
146
  i18n: DatePickerI18n;
147
  /** Time step in seconds */
148
  step: number;
149

150
  /** Validate both date and time */
151
  validate(): boolean;
152
  /** Focus the component */
153
  focus(): void;
154
}
155
```
156

157
## Usage Examples
158

159
```typescript
160
import '@vaadin/date-picker';
161
import '@vaadin/time-picker';
162
import '@vaadin/date-time-picker';
163

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

169
// Date picker with validation
170
datePicker.min = '2024-01-01';
171
datePicker.max = '2024-12-31';
172
datePicker.required = true;
173

174
// Custom internationalization
175
datePicker.i18n = {
176
  monthNames: [
177
    'January', 'February', 'March', 'April', 'May', 'June',
178
    'July', 'August', 'September', 'October', 'November', 'December'
179
  ],
180
  weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
181
  weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
182
  firstDayOfWeek: 1, // Monday
183
  today: 'Today',
184
  cancel: 'Cancel'
185
};
186

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

192
// Date-time picker
193
const dateTimePicker = document.createElement('vaadin-date-time-picker');
194
dateTimePicker.label = 'Select Date & Time';
195
dateTimePicker.datePlaceholder = 'Pick date';
196
dateTimePicker.timePlaceholder = 'Pick time';
197
```
198

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