Overview
Concrete tool for interacting with HTML date and time input elements provided by the Taiko browser automation library.
Description
The `TimeField` class extends the base `Element` class to represent temporal input elements in the DOM, including `<input type="date">`, `<input type="datetime-local">`, `<input type="month">`, `<input type="time">`, and `<input type="week">`. At 183 lines, it contains sophisticated date formatting and validation logic. The `select(dateTime)` method accepts a JavaScript `Date` object (validated via the `isDate()` helper) and performs the following: it formats the date into the correct string representation based on the element's `type` attribute (e.g., `YYYY-MM-DD` for date, `YYYY-MM-DDTHH:MM` for datetime-local, `YYYY-MM` for month, `HH:MM` for time, `YYYY-Www` for week), validates the value against the element's `min` and `max` constraints using type-specific validation strategies, and sets the value while dispatching `change` and `input` events. The week number calculation follows ISO week numbering. Each input type has its own validation date format handler that parses the element's min/max attributes differently (e.g., week types parse `YYYY-Www` format, month types parse `YYYY-MM`, time types parse `HH:MM`). The `value()` method retrieves the current string value of the field.
Usage
Use this class when you need to automate interactions with date pickers, time selectors, month pickers, or week selectors in HTML forms. Instances of `TimeField` are not created directly by library consumers. Instead, calling the Taiko API function `timeField()` returns an `ElementWrapper` that internally constructs `TimeField` instances via the static `TimeField.from(element, description)` factory method.
Code Reference
Source Location
Signature
class TimeField extends Element {
async value() { ... }
async select(dateTime) { ... }
static from(element, description) { ... }
}
// Internal to select() method:
// - selectDate(value): formats date by type, validates against min/max,
// dispatches change/input events
// - validationDateFormat: { week, month, time } type-specific min/max parsers
// - dateFormat: { date, datetime-local, month, time, week } formatters
Import
// Internal class, accessed through Taiko API
const { timeField } = require('taiko');
// Returns ElementWrapper that creates TimeField instances internally
I/O Contract
Inputs
| Name |
Type |
Required |
Description
|
| dateTime |
Date |
Yes (for `select`) |
A JavaScript `Date` object representing the date/time to set. Must pass the `isDate()` validation check. The method auto-formats the value based on the element's input type.
|
| element |
Element |
Yes (for `from`) |
Base Element instance to convert into a TimeField
|
| description |
string |
Yes (for `from`) |
Human-readable description used in event logging
|
Outputs
| Name |
Type |
Description
|
| value() |
Promise<string> |
Returns the current string value of the time/date field (format depends on element type, e.g., `"2026-02-12"` for date, `"14:30"` for time).
|
| select() |
Promise<void> |
Formats the Date object according to the element's input type, validates against min/max constraints, sets the value, and dispatches change/input events. Throws a TypeError if the value is not a Date instance. Throws an Error if the value is outside the min/max range or if event dispatching fails.
|
| from() |
TimeField |
Static factory that constructs a new TimeField from an existing Element instance.
|
Supported Input Types and Formats
| Input Type |
Output Format |
Example
|
| date |
`YYYY-MM-DD` |
`2026-02-12`
|
| datetime-local |
`YYYY-MM-DDTHH:MM` |
`2026-02-12T14:30`
|
| month |
`YYYY-MM` |
`2026-02`
|
| time |
`HH:MM` |
`14:30`
|
| week |
`YYYY-Www` |
`2026-W07`
|
Usage Examples
Basic Usage
const { openBrowser, goto, timeField, closeBrowser } = require('taiko');
(async () => {
await openBrowser();
await goto('https://example.com/booking');
// Set a date field
await timeField('Check-in Date').select(new Date('2026-06-15'));
// Set a datetime-local field
await timeField('Appointment').select(new Date('2026-06-15T09:30:00'));
// Set a time field
await timeField('Alarm').select(new Date('2026-01-01T07:00:00'));
// Set a month field
await timeField('Billing Month').select(new Date('2026-03-01'));
// Read the current value
const checkIn = await timeField('Check-in Date').value();
console.log('Check-in date:', checkIn); // "2026-06-15"
await closeBrowser();
})();
Related Pages
