DatePicker

November 25th, 2022 | 3 mins read

Explanation

@dmnchzl/datepicker is an accessible and customizable <DatePicker /> component built with React and other cool stuff (like styled-components or polished)

Props

Below, the list of all available props:

color / bgColor

Colorize the text / the background of the component

By default, the component colors are respectively purple (#673ab8) and white (#fff) for the background

import { DatePicker } from '@dmnchzl/awesome-hooks';

export default function App() {
  return (
    <div>
      <DatePicker
        color="#ffc107"
        bgColor="#171717">
        {props => (
          <input
            ref={props.ref}
            type="date"
            onClick={e => {
              e.preventDefault();
              props.onOpen();
            }}
          />
        )}
      </DatePicker>
    </div>
  );
}

dayOfTheWeek

Change the start day of the week

Sunday (0) is the default week start day, but French people prefer to start the week on Monday (1)

import { DatePicker } from '@dmnchzl/awesome-hooks';

export default function App() {
  return (
    <div>
      <DatePicker dayOfTheWeek={1}>
        {props => (
          <input
            ref={props.ref}
            type="date"
            onClick={e => {
              e.preventDefault();
              props.onOpen();
            }}
          />
        )}
      </DatePicker>
    </div>
  );
}

forceLocale

Force the locale / the language

By default, the component is based on the navigator's language, but you can force the locale to have several different <DatePicker /> on the same view

NB: Currently, the component supports the following locales: de / en / es / fr / it / ja ; for further, take a look at the customMessages prop below...

import { DatePicker } from '@dmnchzl/awesome-hooks';

export default function App() {
  return (
    <div>
      <DatePicker forceLocale="ja">
        {props => (
          <input
            ref={props.ref}
            type="date"
            onClick={e => {
              e.preventDefault();
              props.onOpen();
            }}
          />
        )}
      </DatePicker>
    </div>
  );
}

hideFooter

Hide component footer (and its buttons)

When the footer is hidden, the calendar disappears when a date is selected / or when the escape button is pressed

import { DatePicker } from '@dmnchzl/awesome-hooks';

export default function App() {
  return (
    <div>
      <DatePicker hideFooter>
        {props => (
          <input
            ref={props.ref}
            type="date"
            onClick={e => {
              e.preventDefault();
              props.onOpen();
            }}
          />
        )}
      </DatePicker>
    </div>
  );
}

customMessages

(Re)translate all or part of the component

import { DatePicker } from '@dmnchzl/awesome-hooks';

export default function App() {
  return (
    <div>
      <DatePicker customMessages={{ 'Footer.Cancel': 'Nope', 'Footer.Ok': 'Okay' }}>
        {props => (
          <input
            ref={props.ref}
            type="date"
            onClick={e => {
              e.preventDefault();
              props.onOpen();
            }}
          />
        )}
      </DatePicker>
    </div>
  );
}
Month KeysDays KeyFooter Keys
Month.JanuaryDay.SundayFooter.Today
Month.FebruaryDay.MondayFooter.Cancel
Month.MarchDay.TuesdayFooter.Ok
Month.AprilDay.Wednesday
Month.MarchDay.Thursday
Month.MayDay.Friday
Month.JuneDay.Saturday
Month.July
Month.August
Month.September
Month.October
Month.November
Month.December

Preview

Purple WhitePink ShrineGreen BasilAmber Dark

Project Structure

/
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ __tests__/
β”‚   β”‚   β”‚   └── DatePicker.test.tsx
β”‚   β”‚   β”œβ”€β”€ icons/
β”‚   β”‚   β”‚   β”œβ”€β”€ ChevronLeft.tsx
β”‚   β”‚   β”‚   β”œβ”€β”€ ChevronRight.tsx
β”‚   β”‚   β”‚   β”œβ”€β”€ DoubleChevronLeft.tsx
β”‚   β”‚   β”‚   β”œβ”€β”€ DoubleChevronRight.tsx
β”‚   β”‚   β”‚   └── index.ts
β”‚   β”‚   β”œβ”€β”€ DatePicker.tsx
β”‚   β”‚   └── styled.ts
β”‚   β”œβ”€β”€ constants/
β”‚   β”‚   └── index.ts
β”‚   └── utils/
β”‚       β”œβ”€β”€ __tests__/
β”‚       β”‚   β”œβ”€β”€ arrUtils.test.ts
β”‚       β”‚   └── dateUtils.test.ts
β”‚       β”œβ”€β”€ arrUtils.ts
β”‚       └── dateUtils.ts
β”œβ”€β”€ package.json
└── vite.config.ts

Miscellaneous

If you want more,

You can clone the project:

git clone https://github.com/dmnchzl/datepicker.git

Install dependencies:

yarn install

Develop locally:

yarn dev

Run all unit tests:

yarn test

If you want, format the code:

yarn format

And finally compile the project:

yarn build

Enjoy πŸ‘

License

"THE BEER-WARE LICENSE" (Revision 42):
<phk@FreeBSD.ORG>
  wrote this file. As long as you retain this notice you can do whatever you want with this stuff. If we meet some day,
  and you think this stuff is worth it, you can buy me a beer in return. Damien Chazoule</phk@FreeBSD.ORG
>