WUI logo


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.

import * as React from 'react'
import { DatePicker } from '@welcome-ui/date-picker'
const Example = () => {
return <DatePicker name="welcome" value={new Date()} />
export default Example



Run the following command:

yarn add @welcome-ui/date-picker

Import component:

import { DatePicker } from '@welcome-ui/date-picker'


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().

Give an Icon

Add an icon with the icon property


Use size propety with option:

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


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

import dateFR from 'date-fns/locale/fr'
function () {
return (
<DatePicker locale={dateFR} name="welcome" value={new Date()} />


Pass transparent to remove background-color and border-color

Only display months

Pass showMonthYearPicker to only display months, without days