kiarash-z / react-modern-calendar-datepicker Goto Github PK

Hi,
dose it support multi select date by click?!

TypeError: o is not a function
y
node_modules/react-modern-calendar-datepicker/lib/index.js:1

it gets this error when render function executes
<DatePicker selectedDay={today} inputPlaceholder="date" // placeholder formatInputText='YYYY/MM/DD' // format value inputClassName="input" // custom class shouldHighlightWeekends />

{today} is defined in the code
css is imported.

Describe the bug
For keyboard / accessibility component shows as input but nothing else. How to select day with keyboard?

Reproduced Version on CodeSandbox
Here it is on CodeSandBox: https://codesandbox.io/s/sad-chatelet-t4s0p

Expected behavior
Input needs to have guidance for screenreader and keyboard can be used to go through calendar and select days.

Hello,

Any plans on making a locale option?

Thanks.

Describe the bug

Cannot translate hardcoded texts like:
https://github.com/Kiarash-Z/react-modern-calendar-datepicker/blob/master/src/components/Header.js#L101

Expected behavior

Hardcoded texts to be implemented so that changeable via the API

Describe the bug
Range date picker throws an error on onChange handler. There is no issue with single day nor multiple days selector.

Reproduced Version on CodeSandbox
Here it is on CodeSandBox

Expected behavior
It should run the onChange handler without throwing any exception.

Is your feature request related to a problem? Please describe.
Hi Kiarash, Thanks for awesome project. I feel animation on change month or year is a bit slow.

Describe the solution you'd like
If that's fine I can make a PR and fix this, then you can check it out and if that was fine merge it.

Calendar needs index.d.ts file or @types so project with typescript base can have their type checking

I'm not sure this is the issue with the project or a bug in browsers. the input text is rendered without cleartype/subpixel when magnified,

with cleartype

without cleartype

normally it's hard to notice with the naked eye, but I can notice it, and it makes an inconsistent look.

Currently, as component's functionality grows, API grows too (as in #21). So maybe it would be an API reconsideration symptom.
Maybe we can determine all 3 types of date pickers based on the input value and there is no need for the extra properties. So in this way, we can make API simpler.

Single Date Selection

const [date, setDate] = useState(undefined)

<Datepicker value={date}
            onChange={setDate}  />

Range Date Selection

const [dateRange, setDateRange] = useState({ from: undefined, to: undefined })

<Datepicker value={dateRange}
            onChange={setDateRange} />

Multiple Dates Selection

const [dates, setDates] = useState([])

<Datepicker value={dates}
            onChange={setDates}  />

As the above API suggests we can differentiate between 3 types of date pickers by the type of value property that has been sent to the component.

• undefined/null: single-day selection
• { from: undefined, to: undefined }: range-day selection
• Array: multiple-dates selection

Changes that should be considered in moving from the current API to the suggested API is as follow:

• replace selectedDay and selectedDayRange with value property (Also there is no need for selectedDays property for multiple-days selection).
• remove isDayRange property (Also there is no need for isMultiSelectable property for multiple-days selection).

As the suggested API is similar to related HTML tags (e.g. <input type="date"> and <select>) maybe it would be better to use conventional interface for minimumDate and maximumDate which are min and max respectively in HTML <input type="date"> tag.
BTW, this is a huge breaking change for the API but I think the simpler API will worth it.

Do you plan on adding accessibility support to the calendar?

its the only thing stoping me from using your great calendar component
as accessibility is mandatory on my country.

we need full keyboard support and aria rules all over the place.

thanks.

Describe the bug
If you click on the month select, after that click on the empty space near the select:

we will see that the month-picker has disappeared:

Same thing for year picker:

how can i pick my birthday ? scroll to last years several times ?! add ability to change years quickly please .
thank you <3

how can I use datepicker in formik?
I used it like this but when I submit form "required" error show
```

<Formik
         initialValues={{title: '', company: '', current: '', location: '', description: '', from: '', to: ''}}
         validationSchema={Yup.object({
             title: Yup.string()
                 .required('Required'),
             company: Yup.string()
                 .required('Required'),
             current: Yup.string()
                 .required('Required'),
             location: Yup.string()
                 .required('Required'),
             description: Yup.string()
                 .required('Required'),
             from: Yup.string()
                 .required('Required'),
         })}
         onSubmit={(values) => {
             console.log(values)
             props.onSubmitExp(values)
         }}
     >
         <Form className="mt-30 mb-30">
             <label htmlFor="title">Title</label>
             <Field name="title" type="text"/>
             <ErrorMessage className="error-message" name="title"/>
             <label htmlFor="company">Company</label>
             <Field name="company" type="text"/>
             <ErrorMessage className="error-message" name="company"/>
             <label htmlFor="location">Location</label>
             <Field name="location" type="text"/>
             <ErrorMessage className="error-message" name="location"/>
             <label htmlFor="from">From</label>
             <DatePicker
                 name="from"
                 value={selectedFrom}
                 onChange={setSelectedFrom}
                 inputPlaceholder="Select a day"
                 shouldHighlightWeekends
             />
             <ErrorMessage className="error-message" name="from"/>
             <label htmlFor="to">To</label>
          
             <DatePicker
                 value={selectedTo}
                 onChange={setSelectedTo}
                 inputPlaceholder="Select a day"
                 shouldHighlightWeekends
             />
             <ErrorMessage className="error-message" name="to"/>
             <label htmlFor="current">Current</label>
             <Field name="current" type="text"/>
             <ErrorMessage className="error-message" name="current"/>
             <label htmlFor="description">Description</label>
             <Field name="description" type="text"/>
             <ErrorMessage className="error-message" name="description"/>

             <button className="submit-btn" type="submit">Submit</button>
         </Form>
     </Formik>

If the component is used at the window sills, the pop-up will opens out of the window

thanks for the great library. i think it would be great if a native option for setting max/min date was added to this library. there are many use cases e.g. setting birthday or reserving a date. just removing the user's access to those dates is a much better solution (than my current solution of) showing an error to user.

Hi,thanks for this library.
I think one feature this library needs is the ability to select particular year or month without sliding.
something like this for example:

when I want to use this calendar for Persian range, it makes an error and exactly not work, :(
please add this feature soon, thx

Crash while openning Calendar.

Code:

<Calendar
  value={{day: 1, month: 1, year: 1200}} <---- YEAR is a problem
  onChange={this.onAccept}
  shouldHighlightWeekends
  colorPrimary="#168093"
  colorPrimaryLight="#168093"
  slideAnimationDuration="0.1s"
  calendarClassName="date-picker-v3"
/>

When I add this datePicker to my class component ,It will show an arrow at the bottom, how can I hide it?

Is it possible to change day item's layout .

Is it impossible add feature show panel in a modal like this.

hi ! can i use this on my react-native project ?

Describe the bug
<Datepicker/> showed inline when used inside material-ui modal

Reproduced Version on CodeSandbox
Here it is on CodeSandBox: https://codesandbox.io/s/calendar-problem-1qe24?fontsize=14

Expected behavior
to not open inline

The problem is when you try to send selectedDayRange to the component it doesn't return the right value. I looked at the tutorial but it didn't work for me. Can you show me how to do it?

Describe the bug
My code was broken after running a yarn install on a different machine.
The input of locale utilities has been changed (from true/false to 'fa'/'en') since v1.1.0 and this utitlity was exported in the index file. So I think this is an API Change and requires a major version upgrade not a minor one.

Expected behavior
No change in api should be experienced on minor upgrades.

how can I show rang selection on datepicker when start date is selected until end date is selected?

hi
Does it support react native?

i have class component and i have state
i dont wanna use like this :
const [selectedDay, setSelectedDay] = useState(null);

how can i change it for class component
thanks

Thanks for your sleek date-picker.

Would you create a branch and use bootstrap as theme?

Describe the bug

TypeError: Cannot read property 'offsetTop' of null
(anonymous function)
node_modules/react-modern-calendar-datepicker/lib/components/YearSelector.js:42
39 | var classToggleMethod = isOpen ? 'add' : 'remove';
40 | var activeSelectorYear = wrapperElement.current.querySelector('.Calendar__yearSelectorItem.-active');
41 | wrapperElement.current.classListclassToggleMethod;

42 | yearListElement.current.scrollTop = activeSelectorYear.offsetTop - activeSelectorYear.offsetHeight

thanx in advance for this great package,
I am creating a full-page datepicker and I need to add some custom elements in opening datepicker, for example, I need to implement today button and also I want to add a close button and header title in datepicker
how can I achieve this?
something like this is in my mind:

does this datePicker or Calender supports the hour ?
I use this calender for date filtering and now i need to filter hour with date

Hi, thank you for this great library.
I took a look at it and I thought it would be nicer for this library if it supports drag to select feature out of the box.
So I tweaked its code for one or two hours and here is what I achieved so far:

I wonder if It's ok to open a pull request for this.

hi
How can I choose the exact time? (Hours and minutes)

hi
minimumDate is not working when locale is 'fa'.
it disables all days and when you try to set min date manually it doesn't do anything at all
<DatePicker value={this.state.x1} shouldHighlightWeekends inputClassName="form" locale="fa" minimumDate={utils().getToday()} onChange={this.handlefirst} wrapperClassName="firstDatePicker" inputPlaceholder="Date" />

First off, thank you for this great project, it's awesome. I used it today and realized that other inputs of Datepickers overlap other Datepciker like this. I dunno if this is because of z-index or what. any ideas?

I set the datepicker into a dropdown . when click the datepicker dropdown closed , I tried to use refs to solve this problem but always return null ,
what do I do ??????????????

Hi ,
Thanks Kia to this great work.

Some times we may need to select disabled days on a range.
for example :
If we want to get pool ticket for a range, and odd days of week are for female we should allow male user to select a range of dates that only contain select-able days.

i want to use this datepicker inside the class and dont want to use useSet().
what is the syntax for using this datepicker?

So everything is working as expected when I do test my DatePicker component in a desktop browser. But isPersian directive has no effect when my testing device is a phone. e.g. Google chrome in Android or Safari in iOS.

Is this a bug? or am I missing something? please let me know how can I help? Thanks.

hi, I want to show two months exactly together I mean current month and next month , how can I do that

I use Range Datepicker, it isn't correct that "from" date be equal with the "to" date, minimum date for the "to" date should be more than "from" date

from: {day: 9, month: 10, year: 1398}
to: {day: 9, month: 10, year: 1398}

There is a proprietary font used in the playground which can cause troubles. How about Shabnam?

Hello
I am using material UI, i use Cards as panels to style my pages, today i tried implanting the DatePicker but it seems that when i open the calendar it falls behind the other panels and even the elements inside the same panel (<Card>)
Here is an image :
https://ibb.co/842DZjq

I tried giving the DatePicker and the calendarClassName style, in which i changed the z-index and position, but none of them work and the calendar still doesn't open in the front
Can you help me solve this issue ?, is there some kind of property that i don't know about ?
Thanks!

I tried using this datepicker and i liked everything about it the only problem is that its extremely slow, meaning the window for pick the date lags and it has low FPS
"react": "^16.8.6",

import "react-persian-calendar-date-picker/lib/DatePicker.css";
import DatePicker from "react-persian-calendar-date-picker";

<DatePicker
    selectedDay={null}
    onChange={null}
    inputPlaceholder="انتخاب روز"
/>

Hi
While I’m using the date picker in a form, and press tab to change inputs, suddenly the date picker crashes and its style misaligns; consequently it doesn’t work anymore!
Do you have any possible solution for this?!

Any plans to port the project for react-native?