Skip to main content
Frontend Glossary

UI components · Form input

Date Picker

Also called: DatePicker, Date range picker, Calendar picker, RangePicker

Click an input and a small calendar pops up so users can pick a date or date range, instead of typing dates in inconsistent formats.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Add a date range picker to the filter bar at the top of the order list, with two boxes for the start and end date. Clicking opens a calendar panel with two months side by side. Put shortcuts on the left: "Today," "Last 7 days," "Last 30 days." Don't allow dates after today, use the YYYY-MM-DD format, and add a one-click clear.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Date Picker is what you need.

Use Date Picker when

  • Filling in a specific day, like a booking date, departure date, or deadline
  • Querying orders, logs, or other data by time range in a filter bar
  • When some dates must be blocked, like past times or fully booked days for appointments

Pick something else when

  • Viewing and arranging schedules and events in a full-month view

    Use insteadCalendar

  • Picking something coarse like a year or a quarter. A select is simpler.

  • Entering a birth date from decades ago, where a panel you can only flip month by month is painful

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Making users flip back one month at a time to pick a birthday, which takes hundreds of clicks

  2. 02

    Letting the start date come after the end date because the two boxes aren't linked

  3. 03

    Using a plain input for users to type dates, so the formats are all over the place and the backend can't parse them

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

An input showing the date, a calendar icon, and a calendar panel that pops up on click. The panel has month and year navigation, a grid of days, and shortcuts.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A closed date picker looks like an input with a calendar icon on the right. Click it and a small calendar panel pops up where you can switch months and years and pick a day. Once picked, the date fills in and the panel closes. Common variants include the range picker for choosing a start and end date, a date-time picker with hours, minutes, and seconds, and pickers for just a month or a year. Panels often have shortcuts like "Today" or "Last 7 days."

Its value is consistent formatting, no impossible dates, and the ability to disable dates that can't be picked, like past days for a booking. For dates far from today, like a birthday, let users jump straight to a year or type the date in. It's different from a Calendar. A calendar is a large component laid out on the page to show schedules and events, while a date picker is a small form control for filling in a date.

Developer info
Term ID
component-date-picker
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • input[type="date"]
  • input[type="datetime-local"]
  • input[type="month"]
  • input[type="week"]
  • .ant-picker
  • .el-date-editor
  • .arco-picker
  • .t-date-picker
  • .n-date-picker
Priority
2 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026