mberneti/react-datepicker2

react datepicker component.(include persian jalaali calendar)

React DatePicker2

A simple and reusable Datepicker component for React (with persian jalali calendar support) Demo.

This package uses react-persian-datepicker project under the hood.

Installation

The package can be installed via NPM:

npm install react-datepicker2 --save

At this point you can import react-datepicker2 and its styles in your application as follows:

import DatePicker from 'react-datepicker2';

Below is a simple example on how to use the Datepicker in a React view.

import React from 'react'
import moment from 'moment-jalaali'
import DatePicker from 'react-datepicker2';

export default class ReactClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: moment() };
  }
  render() {
    return <DatePicker
      onChange={value => this.setState({ value })}
      value={this.state.value}
    />
  }
}

Configuration

The most basic use of the DatePicker can be described with:

<DatePicker onChange={value => this.setState({ value })} value={this.state.value} />

Local Development

The master branch contains the latest version of the Datepicker2 component. To start your example app, you can run npm install then npm start. This starts a simple webserver on http://localhost:8080.

Todo

• Write some tests
• Improve documentation
• Remove css loading dependency
• UI improvements
• Adding new highlight feature
• Adding new year picker feature
• Adding typescript support
• Adding new rangepicker feature

Built With

• moment-jalaali - A Jalaali (Jalali, Persian, Khorshidi, Shamsi) calendar system plugin for moment.js.

Thanks

Special thanks to @mohebifar for his open-source project which this component is based on.

Contributing

Contributions are welcome and will be fully credited. I'd be happy to accept PRs for that.

License

Copyright (c) 2016 mberneti Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

mohammadreza berneti 💻 🤔 📖 🐛 🎨 💡 🚧 📦 💬 👀 📆	Mohamad Mohebifar 🤔 📖 💻	Ali Akbar Azizi 🚧 📦 💻 🐛 💬	Ali Najafi 🚧 💻	Mehrdad Mehralian 💻 🎨	mojtaba Shayegh 🐛 💻	mory rezaee 🚧 💻
Mathieu Saubin 🚧 💻	alireza molaee 🚧 💻	Ali MoghaddasZadeh 🐛	amir zamani 🚧 📦 💻 🐛 💬	Afsane Fadaei 🚧 💬	Hossein Aghatabar 🐛	Mahdi 💻
Hosein BehkamaL 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

react-datepicker2's Issues

timepicker not working

با سلام و تشکر از زحمت شما؛
در زمان استفاده از این کامپوننت با دو تا مشکل مواجه شدم:
۱. در مرتبه اول که بخش انتخاب تاریخ نمایش داده میشه، باکس مربوط به انتخاب زمان نمایش داده نمیشه (در شرایطی که مقدار پیش فرض نداشته باشه)
۲. بعد از انتخاب تاریخ که باکس انتخاب زمان نمایش داده میشه، غیر فعال هست و امکان انتخاب زمان وجود نداره.

showToggleButton

hello.
When use props "showToggleButton" and click on this button in calender format of input value not change.for example when click on toggle butten inside calender, date correctly changed to jalali but input value not change to jalali.
when I declare button in my component and use that button,input format correctly changed by isGregorian.
but I want change date format by showToggleButton props.
thanks.

Maximum update depth exceeded error on date select

Below error occurs when selecting the date:

Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

my usage:

     <DatePicker
            onChange={(value) => props.actions.setCustomDate(value)}
            value={typeof props.myReducer.date != 'undefined' ? moment(props.myReducer.date) : null }
      />

(I'm using stateless component)

add year picker

add year picker when click on year, thanks

Uncaught Error

Hi,
I have some problem when load component and show error in console devTools:
Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded

please help me to fix this.

defaultValue property not working

I use this component with defaultValue ( not value )

here is my code

                defaultValue={moment('1396/7/6', 'jYYYY/jM/jD')}
                isGregorian={false}
                inputFormat={'jYYYY'}
                inputJalaaliFormat={'jDD'}
              />

And I get this error

TypeError: this.state is undefined and here the line`

key: "getValue",
    value: function getValue(inputValue, isGregorian, timePicker) {
      if (!inputValue) return '';
      var inputFormat = this.state.inputFormat; // -> this line

Disabled mode

Please add a prop to the component to handle disabled mode
for example :
<DatePicker disabled />

onChange doesn't fire

When already date selected, onChange won't fire if user wants to clear the input

Incorrect format shown when ` isGregorian` field changed multiple

Hi,
when I change isGregorian state in demo (header section) multi times, the format goes incorrect.
this behavior occurred also in my app.
tnx

Does it support react native?

hi
Does it support react native?

how to style the calendar

How can I style calendar using styled components

placeholder

it is good to support placeholder

Empty input bug in jalaali date

in jalali date time picker with persian digits if you clear the input value it raise exception. you can check it by clearing the second example's input.

Is there a way to define Default Value?

I checked the main file and find out that default value is one of the defined properties :

Property(Picker, "propTypes", {
  prefixCls: propTypes.string,
  clearText: propTypes.string,
  value: propTypes.object,
  defaultOpenValue: propTypes.object,
  disabled: propTypes.bool,
  allowEmpty: propTypes.bool,
  defaultValue: propTypes.object, ,....

But As I try to set default dates I face errors!

<DatePicker
          inputJalaaliFormat="jYYYY/jM/jD"
          timePicker={false}
          value={value}
          isGregorian={false}
          onChange={date => onChange(date)}
          defaultValue={moment("2020-10-10")}
        />

Is there a solution?

Error import momentJalaali from 'moment-jalaali'

after two months I rebuild my project but it keeps getting this error:

"react-datepicker2": "^3.0.3",
"react": "^16.9.0",

node v10.16.3   or even  node v8.10.0

/node_modules/react-datepicker2/dist/index.js:1
import momentJalaali from 'moment-jalaali';

Is something changed in the library? It was working fine before! and my production application works fine with the date picker but locally it is not!

range-picker

Hello Guys!
I can't find range-picker in demo page, would you please inform us from this feature?
Thanks

Compiling Error in SSR (Next JS)

Hi,

i see this bug in next js like this issue #60 :

> Build error occurred
C:\nginx\html\aaaa-nextjs\node_modules\react-datepicker2\dist\index.js:1
import momentJalaali from 'moment-jalaali';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Module._compile (internal/modules/cjs/loader.js:895:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.KOFR (C:\nginx\html\aaaa-nextjs\.next\server\static\KblQtgqMCx70DTwxzFT68\pages\admin\events\edit\[id].js:904:18)
    at __webpack_require__ (C:\nginx\html\aaaa-nextjs\.next\server\static\KblQtgqMCx70DTwxzFT68\pages\admin\events\edit\[id].js:23:31)
    at Module.Tzl5 (C:\nginx\html\aaaa-nextjs\.next\server\static\KblQtgqMCx70DTwxzFT68\pages\admin\events\edit\[id].js:1012:35)
    at __webpack_require__ (C:\nginx\html\aaaa-nextjs\.next\server\static\KblQtgqMCx70DTwxzFT68\pages\admin\events\edit\[id].js:23:31) {
  type: 'SyntaxError'
}

next version: 9.3.0
react-datepicker2 version: 3.0.15

Warning: Failed prop type: Invalid prop `inputReadOnly` of type `boolean` supplied to `DatePicker`, expected `object`.

Warning: Failed prop type: Invalid prop `inputReadOnly` of type `boolean` supplied to `DatePicker`, expected `object`.

the prop type of InputReadOnly is wrong

Invalid jalali date while setting isGregorian as false!

This is how I used this Datepicker :

<DatePicker
          inputJalaaliFormat="jYYYY-jMM-jDD"
          timePicker={timePicker}
          value={value}
          isGregorian={isGregorian}
          onChange={date => onChange(date)}
        />

When I change the date by clicking on the first page everything is fine! But after changing the year by the top arrows and change the month It throws this error! This happens when isGregorian as false but as soon as I change it into isGregorian as true it's no longer throws an error!

index.js:4749 Uncaught Error: Invalid Jalaali year -100721
    at jalCal (index.js:4749)
    at d2j (index.js:4813)
    at Object.toJalaali (index.js:4681)
    at toJalaali$1 (index.js:5784)
    at F.push../node_modules/react-datepicker2/dist/index.js.jMoment.fn.jMonth (index.js:5550)
    at F.jM (index.js:4970)
    at F.<anonymous> (index.js:5009)
    at Object.jMM (index.js:5176)
    at F.push../node_modules/react-datepicker2/dist/index.js.jMoment.fn.format (index.js:5506)
    at index.js:10766
    at Array.map (<anonymous>)
    at Calendar.renderDays (index.js:10765)
    at Calendar.render (index.js:10846)
    at finishClassComponent (react-dom.development.js:17039)
    at updateClassComponent (react-dom.development.js:16994)
    at beginWork$1 (react-dom.development.js:18505)
    at HTMLUnknownElement.callCallback (react-dom.development.js:347)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:397)
    at invokeGuardedCallback (react-dom.development.js:454)
    at beginWork$$1 (react-dom.development.js:23217)
    at performUnitOfWork (react-dom.development.js:22208)
    at workLoopSync (react-dom.development.js:22185)
    at renderRoot (react-dom.development.js:21878)
    at runRootCallback (react-dom.development.js:21554)
    at react-dom.development.js:11353
    at unstable_runWithPriority (scheduler.development.js:643)
    at runWithPriority$2 (react-dom.development.js:11305)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11349)
    at flushSyncCallbackQueue (react-dom.development.js:11338)
    at discreteUpdates$1 (react-dom.development.js:21677)
    at discreteUpdates (react-dom.development.js:2359)
    at dispatchDiscreteEvent (react-dom.development.js:5979)

Placeholder not showing

It would be nice if we could display placeholder in input.
How can i do this?

datepicker won't open.

Hi @mberneti and thx for great work.

for some reason the datepicker won't open.
How to reproduce:
let's say i have a component with list of fields and also a datepicker ( so far so good ).
and i want to display this component on modal after clicking on a button.
after clicking the modal gets open but the datepicker does not open.(I might need to trigger the datepicker again ! )

I'm using Antd design btw.

so I'm just wondering if i should call any methods ?

Thanks

Warm Regards

Module not found: Can't resolve 'indexof' in react-datepicker2\dist

hi guys there is a problem with installing this component .i get this error after installing:

/node_modules/react-datepicker2/dist/index.js
Module not found: Can't resolve 'indexof' in 'D:\pezeshkyaran\code\react project\test for calerdar\my-app\node_modules\react-datepicker2\dist'

it appears in package.jason but still not working:
"react-datepicker2": "^3.0.6",

whats wrong??

عدم سازگاری با ری اکت نسخه 16

با سلام و احترام
به نظر میرسه که این کامپوننت با ری اکت نسخه ی 16 سازگار نیست

mobile-friendly css

css used is not quite mobile-friendly, and positioning doesn't work properly. please take a look at this ScreenShot.

Invalid Jalaali year error with isGregorian={false}

Hi Dear Mohammadreza!
error scenario:
I go to provided section for selecting month,

and when I click on each of these months, I get this error and datepicker doesn't update:

This problem just occured when I set isGregorian={false} and for gregorian calendar it is fine!

conditions:

• react 15.6.2
• react-datepicker2-1.0.0-alpha3
• moment-jalaali 0.7.2

مشکل در دریافت تاریخ شمسی

برای مثال : در یک state قرار می گیرد value اما value ای شبیه به 1396/7/6 نیست بلکه یک object هست که یه سری func و _d (که به صورت میلادی هست) خروجی میدهد در ضمن چطور میشه یک تاریخ رشته ای "1396/7/6" رو به این کامپوننت تزریق کرد برای مثال درحالت های ویرایش یک موجودیت؟ @mberneti

خطا در زمان انتخاب ماه

1. نمایش تاریخ به صورت فینگلیش هست
2. در زمان انتخاب ماه کامپوننت از کار می افته

@mberneti

Please add feature to hide datepicker after user choosed a day

Does it support Typescript?

Is there any way to use it with React Typescript?

inputReadOnly -> PropTypes.object

Hi, this shouldn't be of type 'bool' ?

How to kill the 'Today' button?

Hi guys, thanks very much for your work on this.

I'm trying to kill the Today button.

Been having a good comb through the code but i can't find <button class="selectDay"> anywhere.

Tried:

• looking at Calendar.js, dev tools suggests the button is at CalendarContainer level

   <div className={styles.calendarContainer + ' ' + jalaaliClassName + className}>
        {mode === 'monthSelector' ? this.renderMonthSelector() : this.renderDays()}
      </div>

But that ^^ just renders month/day selectors.

• looking at onClickOutside module. Wondered if it might listen for a click on a button and then assign a value of Date.now() or something. But seems onClickOutside is literally just there to open/close the calendar component.

• searching for the selectDay styles / className. No joy.

Any advice on where to find it?

Might just kill the element with a style rule otherwise.

Locale is not a function

My code worked fine but recently I get this error. I haven't changed anything.

I Got Error When Try to test

Hi,
I'm using your component and when I try to Test my app I get this Error:

 Test suite failed to run

    \node_modules\react-datepicker2\dist\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import momentJalaali from 'moment-jalaali';
                                                                                                    ^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

My Test Code

test('This is test', () => {
    console.log('Hello World !');
});

it('renders without crashing', () => {
    shallow(<App />);
});

a little change in customization

Hi
Two features that are critical:
First in Calendar.js file on line 109, just make it customizable as we can pass it as prop to make it just MM or YYYYMM. (It can be a true false too)
Second use a prop to pass a callback function to render each day by that function, that function should take:
1.the day object
2.the component that was going to be rendered by default
3.the selected day
4.the current date
These are very easy to change but critical and useful.
Please change these as soon as possible.
thanks

Calendar selected date does not update when value is changed outside of calendar component

It appears that the calendar does not update when the calendar value is changed outside of the calendar component itself.

For example, I have a calendar component like so

<Calendar isGregorian={true}
    value={selectedDate}
    onChange={value => dateChange(value)}
/>

When the selectedDate is passed in on component mount it sets the date correctly showing the current date in a blue outline and the selected date to the date that was passed in via moment.

However, when I try to change the value like so (example uses hooks):

setSelectedDate(new moment().add(10, 'days'));

The calendar does not update the currently selected date that is displayed on the calendar.

I know that the selected date value is changing as i'm showing the date on the UI and I can see that the date changes when I change it with the hook.

Could this get fixed?

how to disable part of date

I'd like to add min date and max date, just enable part of month.
Is it possible?

callback is being called twice

hi.
OnChange callback is being called twice at the same time

returning date value

hi
how can I get back the value of date?!
according to your doc the value just return a moment like :

F {_isAMomentObject: true, _isUTC: false, _pf: {…}, _locale: Locale, _d: Wed Jan 15 2020 00:00:00 GMT+0330 (Iran Standard Time), …}
_isAMomentObject: true
_isUTC: false
_pf: {empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, …}
_locale: Locale {_calendar: {…}, _longDateFormat: {…}, _invalidDate: "Invalid date", _ordinal: "%dم", _dayOfMonthOrdinalParse: /\d{1,2}/, …}
_d: Wed Jan 15 2020 00:00:00 GMT+0330 (Iran Standard Time) {}
_isValid: true
_jDiff: 0
proto: Moment

I just tried value._d to get the date but it didn't work.
how could I do this?!

multiple date select

hi
thanks alot for this good product,
it's very good but i need a feature that i've never seen in another persian calendars.
multiple select days , i need to this feature alot , but there is no calendar , did you think about this option or not?
thanks

Unexpected identifier in import moment-jalaali

i see this bug in ssr mode

/Project/node_modules/react-datepicker2/dist/index.js:1
import moment$2 from 'moment-jalaali';
       ^^^^^^^^

SyntaxError: Unexpected identifier

Compact Style

Hi,
Is there any way to make the DatePicker smaller and have a compact one for smaller devices?

How to set/get null values?

How to clear date picker and get null or empty value from it?

Calendar import

I try to import Calendar like this:
import { Calendar } from 'react-datepicker2'

But I get the Error
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Anyhow when I try to use it like this: import Calendar from 'react-datepicker2', it is shown as a DatePicker.

Reference to the original component

Thank you for this good package. I found it very interesting that supports both Gregorian and Jalali calendars. I just think that it's nice to refer to the original package (evandhq/react-persian-datepicker) in the README as it's not an actual fork and the files are copied (which is totally fine) so the users will have a hard time finding the original one.

bootstrap modal bug

datepicker appearing behind of bootstrap modal. what should I do?

اختصاص inptuname

میخوام از این کامپوننت در فرم جستجو استفاده کنم که از تاریخ تا فلان تاریخ
چطور میکنم به اینپوت هائی که ساخته شده نام اختصاص بدم
مثلا date_from, date_to

persian numbers

It would be nice if persianNumbers is a property.

css of calendar

Hi, this libaray is great. Thank you
I have problem to disable the box-shadow of the calendar. I gave it the style of styles={{boxShadow: 'none' }} but it overrides all of the styles and just use this style. I tried to find a file in your project for all of the styles of the calendar to pass it along side of my custom box-shadow but i couldn't find your styles.
Please tell me how can I disable the box-shadow of the calendar. And in general how can I customize any style of the calendar?
Tnx in advance

read Only

how to set readOnly props for react-datepicke2?

TypeError: Cannot read property 'focus'

also in https://mberneti.github.io/react-datepicker2 !