mberneti / react-datepicker2 Goto Github PK
View Code? Open in Web Editor NEWreact datepicker component.(include persian jalaali calendar)
Home Page: https://mberneti.github.io/react-datepicker2/
License: MIT License
react datepicker component.(include persian jalaali calendar)
Home Page: https://mberneti.github.io/react-datepicker2/
License: MIT License
Hi,
when I change isGregorian
state in demo (header section) multi times, the format goes incorrect.
this behavior occurred also in my app.
tnx
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)
It would be nice if we could display placeholder in input.
How can i do this?
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?
it is good to support placeholder
I'd like to add min date and max date, just enable part of month.
Is it possible?
It would be nice if persianNumbers is a property.
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
.
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
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
Please add a prop to the component to handle disabled mode
for example :
<DatePicker disabled />
When already date selected, onChange won't fire if user wants to clear the input
How to clear date picker and get null or empty value from it?
datepicker appearing behind of bootstrap modal. what should I do?
css used is not quite mobile-friendly, and positioning doesn't work properly. please take a look at this ScreenShot.
Hi,
Is there any way to make the DatePicker smaller and have a compact one for smaller devices?
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?!
add year picker when click on year, thanks
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
Warning: Failed prop type: Invalid prop `inputReadOnly` of type `boolean` supplied to `DatePicker`, expected `object`.
the prop type of InputReadOnly is wrong
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??
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:
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.
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.
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)
میخوام از این کامپوننت در فرم جستجو استفاده کنم که از تاریخ تا فلان تاریخ
چطور میکنم به اینپوت هائی که ساخته شده نام اختصاص بدم
مثلا date_from, date_to
how to set readOnly props for react-datepicke2?
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
Hello Guys!
I can't find range-picker in demo page, would you please inform us from this feature?
Thanks
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!
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.
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
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:
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?
hi.
OnChange callback is being called twice at the same time
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
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 />);
});
Hi, this shouldn't be of type 'bool' ?
How can I style calendar using styled components
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.
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
hi
Does it support react native?
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.
Is there any way to use it with React Typescript?
با سلام و تشکر از زحمت شما؛
در زمان استفاده از این کامپوننت با دو تا مشکل مواجه شدم:
۱. در مرتبه اول که بخش انتخاب تاریخ نمایش داده میشه، باکس مربوط به انتخاب زمان نمایش داده نمیشه (در شرایطی که مقدار پیش فرض نداشته باشه)
۲. بعد از انتخاب تاریخ که باکس انتخاب زمان نمایش داده میشه، غیر فعال هست و امکان انتخاب زمان وجود نداره.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.