liveBook · Manning

Date picker

As explained in Web Components in Action

A browser-provided date input control that lets a user enter or select a calendar date.

A date picker is a browser-provided input control for entering or selecting a calendar date. The browser supplies the interaction instead of requiring application code to build it. section 1.1

Minimal date picker

Add <input type="date"> to HTML. The control provides a text field, lets users adjust month, day, and year, and can open an interactive calendar. On mobile, selection may appear in a modal window instead. section 1.1

Reading the selected date

Query the input and read its value with console.log(document.querySelector('input').value). The control also exposes change-related events and methods for stepping through dates. section 1.1

How Web Components in Action covers it

How deep it goes
Explains markup, interaction, properties, events, methods, and hidden Shadow DOM, but stops short of implementation details.
Examples
Demonstrates <input type="date">, an expanded calendar interface, and console logging of the control's value.
What it assumes
Assumes basic HTML and DOM familiarity while demonstrating the control from a minimal input element.
What you can do after
Apply it via HTML and JavaScript by creating a date input, reading its value, and responding to changes.
How it connects
Connects HTML elements, DOM properties, browser events, Web Components, and Shadow DOM.
Cover of Web Components in Action
liveBookmanning.com
Read Web Components in Action on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.