<?xml version="1.0" encoding="utf-8"?>

Modal date input

Modal date input

According to Material Design guidelines, modal date inputs refer to text inputs where users can type in the date manually.[1] This is the simplest type of date picker, and it works well if proper validation and input mask are provided. The input mask adjusts the text format while users are typing.

If your product caters to users internationally, make sure the date format is clear and understandable. Provide clear labels or placeholders that don't disappear once users activate the field.

Modal input pickers provide the best solution for selecting a date that is well in the past (e.g., birthdate or passport expiration date) or the future. They can be used together with the calendar date picker. However, keep in mind that scrolling dates can be tedious — so allowing users to type is a good practice even when other methods are available.[2]

Improve your UX & Product skills with interactive courses that actually work