liveBook · Manning

Calendar input

As explained in React Quickly, Second Edition

A calendar input is an HTML input control for entering a date or time-related value.

A calendar input is a React form control for entering dates or times. HTML provides date, datetime-local, month, time, and week input types. section 9.2.5

Read the selected value according to the data you need:

  • Use value for the selected value as a string, such as "2022-W52" for a week input. section 9.2.5
  • Use valueAsNumber for a timestamp in most calendar inputs; month inputs instead return months since January 1970. section 9.2.5
  • Use min, max, and step to constrain the valid range and keyboard increments. section 9.2.5

A date field

<label>Start date: <input type="date" /></label> // In an event handler: const timestamp = event.target.valueAsNumber; section 9.2.5

How React Quickly, Second Edition covers it

How deep it goes
Explains five input types, value representations, month special handling, and range properties.
Examples
Uses date and week selections, including the string "2022-W52" and its numeric timestamp.
What you can do after
Apply it via React event handlers that read selected calendar values as strings or numbers.
How it connects
Connects calendar inputs with numeric inputs, controlled inputs, and React forms.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of React Quickly, Second Edition. The section links point to the parts of the book it draws on.