DatePicker

The Datepicker component is a user interface element that enables users to select dates from a calendar interface. It provides an intuitive way to input dates, offering a dropdown or popup calendar for selecting days, months, and years. Datepickers are essential for forms and applications requiring date inputs, ensuring accurate and user-friendly date selection.

Source

Github

import { DatePicker } from 'welcome-ui/DatePicker'

const Example = () => {
  return <DatePicker name="welcome" value={new Date()} />
}

export default Example

Examples

react-datepicker

It is based on the react-datepicker library.

Note: Pass a value of null if you don't want the default value of Date.now().

Github

Give an Icon

Add an icon with the icon property

Github

Sizes

Use size property with option:

xs (24px)
sm (32px)
md (40px - default)
lg (48px)

Github

Locales

You can change your locale by pass locale property from date-fns.

Github

Only display months

Pass showMonthYearPicker to only display months, without days

Github

Checkbox Date time picker