Welcome UI - Customizable design system with react

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.

import * as React from 'react'
import { DatePicker } from '@welcome-ui/date-picker'

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

export default Example

Installation

Run the following command:

yarn add @welcome-ui/date-picker

Import component:

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

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

Give an Icon

Add an icon with the icon property

Sizes

Use size propety with option:

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

Locales

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()} />
  )
}

Transparent

Pass transparent to remove background-color and border-color

Only display months

Pass showMonthYearPicker to only display months, without days