DatePicker

v.7.0.4

Installation

yarn
pnpm
npm

yarn add @mercell/date-picker-react

pnpm add @mercell/date-picker-react

npm install --save @mercell/date-picker-react

The DatePicker has necessary peerDependencies, please make sure that you have them in your project

"@carbon/icons-react": "^10.49.0",
"@mercell/input-react": "^3.0.1",
"@mercell/use-media-query-react-hook": "^3.0.5",
"@mercell/use-on-outside-click-react-hook": "^3.0.1",
"@mercell/tailwind": "^6.0.1",
"classnames": "^2.3.1",
"date-fns": "^2.28.0",
"react": "^17.0.2" 

Usage

Using the Date Picker component is as simple as importing it like this.

import { DatePicker } from '@mercell/date-picker-react';
// if you need additional languages to pass into locale property
import { nb, fr } from 'date-fns/locale';

Live Editor

// You can play with code, with HTML tags and text as much as you want!
const DatePickerWrapper = () => {
    const [state, setState] = React.useState<Date | null>(new Date);
    return (
        <div className="h-72 mb-10">
            <p>Regular DatePicker</p>
            <DatePicker
               onChange={(date, event) => setState(date)}
               selected={state}
               dateFormat="yyyy-MM-dd"
            />
        </div>
    )
}
const DatePickerWithTimeInputWrapper = () => {
    const [state, setState] = React.useState<Date | null>(new Date);
    return (
        <div className="h-72 mb-10">
            <p>DatePicker with Time input</p>
            <DatePicker
               onChange={(date, event) => setState(date)}
               selected={state}
               showTimeInput
               timeFormat='HH:mm'
               dateFormat="yyyy-MM-dd HH:mm"
            />
        </div>
    )
}
const DatePickerWithTimeSelectWrapper = () => {
    const [state, setState] = React.useState<Date | null>(new Date);
    return (
        <div className="h-72 mb-10">
            <p>DatePicker with Time Select with 5 min interval</p>
            <DatePicker
               onChange={(date, event) => setState(date)}
               selected={state}
               showTimeSelect
               timeIntervals={5}
               timeFormat='HH:mm'
               dateFormat="yyyy-MM-dd HH:mm"
            />
        </div>
    )
}
const NorwegianDatePicker = () => {
    const [state, setState] = React.useState<Date | null>(new Date);
    return (
        <div className="h-72 mb-10">
            <p>DatePicker with Norwegian Locale</p>
            <DatePicker
               onChange={(date, event) => setState(date)}
               selected={state}
               dateFormat="yyyy-MM-dd"
               locale={nb}
            />
        </div>
    )
}
const FrenchPickerWrapper = () => {
    const [state, setState] = React.useState<Date | null>(new Date);
    return (
        <div className="h-72 mb-10">
            <p>DatePicker with French Locale</p>
            <DatePicker
                onChange={(date, event) => setState(date)}
                selected={state}
                dateFormat="yyyy-MM-dd"
                locale={fr}
            />
        </div>
    )
}
const PortalDatePickerWrapper = () => {
    const [state, setState] = React.useState<Date | null>(new Date);
    return (
        <>
            <div className="h-72 mb-10 grid grid-cols-2">
                <div style={{
                      width: '200px',
                      height: '400px',
                      overflowY: 'scroll',
                      overflowX: 'hidden'
                }}>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <DatePicker
                        onChange={(date, event) => setState(date)}
                        selected={state}
                        dateFormat="yyyy-MM-dd"
                        portalId="portal-wrapper"
                    />
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                </div>
                <div>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                </div>
            </div>
        <div id='portal-wrapper'/>
      </>
    )
}
render(
    <div>
        <DatePickerWrapper/>
        <DatePickerWithTimeInputWrapper/>
        <DatePickerWithTimeSelectWrapper/>
        <NorwegianDatePicker/>
        <FrenchPickerWrapper/>
        <PortalDatePickerWrapper/>
    </div>
))

// You can play with code, with HTML tags and text as much as you want!
const DatePickerWrapper = () => {
    const [state, setState] = React.useState<Date | null>(new Date);
    return (
        <div className="h-72 mb-10">
            <p>Regular DatePicker</p>
            <DatePicker
               onChange={(date, event) => setState(date)}
               selected={state}
               dateFormat="yyyy-MM-dd"
            />
        </div>
    )
}
const DatePickerWithTimeInputWrapper = () => {
    const [state, setState] = React.useState<Date | null>(new Date);
    return (
        <div className="h-72 mb-10">
            <p>DatePicker with Time input</p>
            <DatePicker
               onChange={(date, event) => setState(date)}
               selected={state}
               showTimeInput
               timeFormat='HH:mm'
               dateFormat="yyyy-MM-dd HH:mm"
            />
        </div>
    )
}
const DatePickerWithTimeSelectWrapper = () => {
    const [state, setState] = React.useState<Date | null>(new Date);
    return (
        <div className="h-72 mb-10">
            <p>DatePicker with Time Select with 5 min interval</p>
            <DatePicker
               onChange={(date, event) => setState(date)}
               selected={state}
               showTimeSelect
               timeIntervals={5}
               timeFormat='HH:mm'
               dateFormat="yyyy-MM-dd HH:mm"
            />
        </div>
    )
}
const NorwegianDatePicker = () => {
    const [state, setState] = React.useState<Date | null>(new Date);
    return (
        <div className="h-72 mb-10">
            <p>DatePicker with Norwegian Locale</p>
            <DatePicker
               onChange={(date, event) => setState(date)}
               selected={state}
               dateFormat="yyyy-MM-dd"
               locale={nb}
            />
        </div>
    )
}
const FrenchPickerWrapper = () => {
    const [state, setState] = React.useState<Date | null>(new Date);
    return (
        <div className="h-72 mb-10">
            <p>DatePicker with French Locale</p>
            <DatePicker
                onChange={(date, event) => setState(date)}
                selected={state}
                dateFormat="yyyy-MM-dd"
                locale={fr}
            />
        </div>
    )
}
const PortalDatePickerWrapper = () => {
    const [state, setState] = React.useState<Date | null>(new Date);
    return (
        <>
            <div className="h-72 mb-10 grid grid-cols-2">
                <div style={{
                      width: '200px',
                      height: '400px',
                      overflowY: 'scroll',
                      overflowX: 'hidden'
                }}>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <DatePicker
                        onChange={(date, event) => setState(date)}
                        selected={state}
                        dateFormat="yyyy-MM-dd"
                        portalId="portal-wrapper"
                    />
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                </div>
                <div>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                    <p>Lorem ipsum lorem ipsum</p>
                </div>
            </div>
        <div id='portal-wrapper'/>
      </>
    )
}
render(
    <div>
        <DatePickerWrapper/>
        <DatePickerWithTimeInputWrapper/>
        <DatePickerWithTimeSelectWrapper/>
        <NorwegianDatePicker/>
        <FrenchPickerWrapper/>
        <PortalDatePickerWrapper/>
    </div>
))

Result

Types, definitions, etc.

Types
Changelog
Figma

DatePickerProps

interface DatePickerProps extends Partial<ReactDatePickerProps> {
    onChange: (date: Date) => void;
    locale?: Locale;
    invalid?: boolean;

}

Name	Type	Default	Required	Description
onChange	(date: string) => void;	-	yes	Callback with selected date, triggered on onChange inside picker
locale	Locale	enGB	no	Part of date-fns library, you can specify different languages do date picker
invalid	boolean	false	no	Boolean value to show that there is an error in datepicker

Rest possible props you can find in the documentation of react-datepicker by HackerOne

Change Log - @mercell/date-picker-react

This log was last generated on Thu, 23 Feb 2023 09:35:49 GMT and should not be manually modified.

7.0.4

Thu, 23 Feb 2023 09:35:49 GMT

Patches

Add styling for clearable button when isClearable prop exists

7.0.3

Thu, 02 Feb 2023 09:55:49 GMT

Patches

Add locale to Datepicker props

7.0.2

Mon, 23 Jan 2023 13:34:26 GMT

Patches

Fix min and max date time diff by startOfDate method to only compare pure date without time

7.0.1

Mon, 23 Jan 2023 10:34:51 GMT

Patches

Add disabled styling to minDate and maxDate

7.0.0

Thu, 05 Jan 2023 11:28:09 GMT

Breaking changes

new datepicker implementation with react-datepicker

6.0.1

Thu, 01 Dec 2022 09:38:55 GMT

Patches

Add default prop disabled to be false

6.0.0

Fri, 11 Nov 2022 09:18:57 GMT

Breaking changes

New styling approach - use only tailwind classes, add tailwind-merge library

5.0.0

Thu, 15 Sep 2022 06:07:41 GMT

Breaking changes

Migration to Tailwind3, React 18 and ViteJS from webpack.

4.0.26

Fri, 26 Aug 2022 12:26:09 GMT

Patches

Fix visual output when ISO was selected, input should always render value formatted regarding property

4.0.25

Tue, 09 Aug 2022 13:38:43 GMT

Patches

Make sure data picker respects the ignoreOutsideClick classname

4.0.24

Thu, 28 Jul 2022 07:07:07 GMT

Patches

Method name change for on keypress action

4.0.23

Thu, 21 Jul 2022 13:05:01 GMT

Patches

Fix issue of tab out from calend to close it, add esc key press to close calendar

4.0.22

Thu, 14 Jul 2022 13:28:46 GMT

Patches

Updated hover state to remove sticky hover on mobile

4.0.21

Tue, 12 Jul 2022 10:42:52 GMT

Patches

Adjustment of component to use new version of outsideClickHook

4.0.20

Thu, 30 Jun 2022 10:57:49 GMT

Patches

Fix typings
Package.json refactor, add test suite, more tests soon

4.0.19

Fri, 03 Jun 2022 13:08:46 GMT

Patches

Zindex adjustment

4.0.18

Mon, 30 May 2022 09:10:57 GMT

Patches

Fix datepicker ignore click class access

4.0.17

Thu, 05 May 2022 10:41:26 GMT

Patches

Fix - update input value when date selected onClick in calendar

4.0.16

Tue, 03 May 2022 10:38:35 GMT

Patches

Fix - it is possible to delete date by keyboard

4.0.15

Fri, 08 Apr 2022 10:19:50 GMT

Patches

Bump dependencies

4.0.14

Tue, 29 Mar 2022 10:35:06 GMT

Patches

Delete console.log

4.0.13

Mon, 28 Mar 2022 06:50:33 GMT

Patches

Fix icon onClick when datpicker is in portal mode

4.0.12

Mon, 14 Mar 2022 16:39:11 GMT

Patches

Delete unnecessary console logs

4.0.11

Mon, 14 Mar 2022 16:14:47 GMT

Patches

Fix for month/year picker in portal

4.0.10

Wed, 09 Mar 2022 10:29:16 GMT

Patches

Add option to Portal calendar

4.0.9

Thu, 03 Mar 2022 13:56:02 GMT

Patches

Fix initialDate unnecessary refresh

4.0.8

Mon, 28 Feb 2022 12:45:49 GMT

Patches

Dependency update

4.0.7

Mon, 28 Feb 2022 10:55:32 GMT

Patches

Bump typescript

4.0.6

Wed, 09 Feb 2022 13:14:17 GMT

Patches

Fix initial date to update component when it is different

4.0.5

Fri, 04 Feb 2022 10:28:53 GMT

Patches

Div/input 100% width style

4.0.4

Wed, 02 Feb 2022 08:11:14 GMT

Patches

Fix style in month-year picker

4.0.3

Tue, 01 Feb 2022 13:00:55 GMT

Patches

Package json fix, width of months adjusted based on localization

4.0.2

Thu, 27 Jan 2022 14:31:31 GMT

Patches

Fix locale issue in datepicker

4.0.1

Wed, 26 Jan 2022 16:19:19 GMT

Patches

Move dependencies to peerDependencies to avoid duplication in installation process in project
Adding the same peerDependencies to devDependencies

4.0.0

Wed, 26 Jan 2022 12:53:55 GMT

Breaking changes

New date picker

3.0.1

Thu, 06 Jan 2022 08:58:14 GMT

Patches

New PoC of date picker

3.0.0

Wed, 15 Dec 2021 22:20:34 GMT

Breaking changes

Update to match figma design

2.0.7

Thu, 02 Dec 2021 13:12:30 GMT

Patches

Deps bump

2.0.6

Wed, 24 Nov 2021 10:07:28 GMT

Patches

Add disable status

2.0.5

Fri, 12 Nov 2021 13:08:30 GMT

Patches

Add @mercell/tailwind to devDeps to be always up to date

2.0.4

Fri, 05 Nov 2021 11:10:13 GMT

Patches

Bump peerDependency

2.0.3

Thu, 04 Nov 2021 10:10:16 GMT

Patches

Tailwind type fix
Revert tailwind version

2.0.2

Wed, 03 Nov 2021 15:28:42 GMT

Patches

react types >=17

2.0.1

Wed, 27 Oct 2021 12:53:13 GMT

Patches

Gitignore fix

2.0.0

Mon, 18 Oct 2021 07:16:21 GMT

Breaking changes

New local build process with webpack without storybook, add npmignore and update dependencies

1.0.11

Tue, 12 Oct 2021 11:37:45 GMT

Patches

Updated shadow, Updated border and changed background color. Removed the dot underneath the selected day

1.0.10

Fri, 17 Sep 2021 13:18:16 GMT

Patches

Fix for outside click hook

1.0.9

Mon, 23 Aug 2021 10:33:51 GMT

Patches

Fix for storybook hot reload

1.0.8

Wed, 18 Aug 2021 07:06:37 GMT

Patches

Z-index fix when calendar is visible

1.0.7

Mon, 12 Jul 2021 10:50:09 GMT

Patches

Updating dependencies
Updating dependencies

1.0.6

Wed, 24 Mar 2021 10:17:01 GMT

Patches

Enabling eslint

1.0.5

Tue, 23 Mar 2021 13:40:42 GMT

Patches

Adding esm module export

1.0.4

Wed, 17 Mar 2021 10:01:28 GMT

Patches

Adding readme

1.0.3

Fri, 19 Feb 2021 09:41:17 GMT

Patches

bump

1.0.2

Wed, 17 Feb 2021 13:03:21 GMT

Patches

removed stylesheet

1.0.1

Mon, 15 Feb 2021 10:36:20 GMT

Patches

Prevent inputting multiple consecutive seperators in dateinput

1.0.0

Tue, 09 Feb 2021 09:25:03 GMT

Breaking changes

Adding component

DatePicker

Installation​

The DatePicker has necessary peerDependencies, please make sure that you have them in your project

Usage​

Types, definitions, etc.​

Change Log - @mercell/date-picker-react

7.0.4​

Patches​

7.0.3​

Patches​

7.0.2​

Patches​

7.0.1​

Patches​

7.0.0​

Breaking changes​

6.0.1​

Patches​

6.0.0​

Breaking changes​

5.0.0​

Breaking changes​

4.0.26​

Patches​

4.0.25​

Patches​

4.0.24​

Patches​

4.0.23​

Patches​

4.0.22​

Patches​

4.0.21​

Patches​

4.0.20​

Patches​

4.0.19​

Patches​

4.0.18​

Patches​

4.0.17​

Patches​

4.0.16​

Patches​

4.0.15​

Patches​

4.0.14​

Patches​

4.0.13​

Patches​

4.0.12​

Patches​

4.0.11​

Patches​

4.0.10​

Patches​

4.0.9​

Patches​

4.0.8​

Patches​

4.0.7​

Patches​

4.0.6​

Patches​

4.0.5​

Patches​

4.0.4​

Patches​

4.0.3​

Patches​

4.0.2​

Patches​

4.0.1​

Patches​

4.0.0​

Breaking changes​

3.0.1​

Patches​

3.0.0​

Breaking changes​

Installation

Usage

Types, definitions, etc.

7.0.4

Patches

7.0.3

Patches

7.0.2

Patches

7.0.1

Patches

7.0.0

Breaking changes

6.0.1

Patches

6.0.0

Breaking changes

5.0.0

Breaking changes

4.0.26

Patches

4.0.25

Patches

4.0.24

Patches

4.0.23

Patches

4.0.22

Patches

4.0.21

Patches

4.0.20

Patches

4.0.19

Patches

4.0.18

Patches

4.0.17

Patches

4.0.16

Patches

4.0.15

Patches

4.0.14

Patches

4.0.13

Patches

4.0.12

Patches

4.0.11

Patches

4.0.10

Patches

4.0.9

Patches

4.0.8

Patches

4.0.7

Patches

4.0.6

Patches

4.0.5

Patches

4.0.4

Patches

4.0.3

Patches

4.0.2

Patches

4.0.1

Patches

4.0.0

Breaking changes

3.0.1

Patches

3.0.0

Breaking changes

2.0.7

Patches

2.0.6