hernansartorio / react-nice-dates Goto Github PK

Customizing days example showing wrong disabled date.
Disabled dates as per example should be Sundays, but in the example they are shown as Saturdays.

need to change the modifiers to fix the issue.

// ModifiersExample.js

const modifiers = {
  disabled: date => getDay(date) === 0, // change from 6 to disable Sunday 
  highlight: date => getDay(date) === 2
}

Thought this fixes the issue in example, Ideally I feel like the change should be made in how the CalanderGrid is laid out.

Hi there, thanks for the lib!

If i understand correctly the calendar will size to fit it's parent on render, I'm not sure how this is possible though since the in Calendar.js we are wrapping the contents of the calendar in a div that can't be styled.

Perhaps giving that container a 100% height and width would help with the scaling? I think this is the reason I am running into issues with the calendar being pretty small and not sizing to fit the parent.

Currently I have to target my custom calendar container and do a > selector to target that specific div in order to size the calendar appropriately.

If this is valid, Im more than happy to create a PR

I really love how this looks. Congratulations on this!

Sorry that the first issue is mine, and that it's a complain, but your repository doesn't have a license file and maybe you could clarify that?:)

@hernansartorio do you mind if i add storybook for this project?

Hi, great lib! It is helping me very much.

I notice that, when the <DatePicker /> or <DateRangePicker /> is placed inside a collapsible element which in the first render has a display: none;, it doesn't render correctly.

Here is the reproduced example in codesandbox

Going further, comparing with the rendered element in the docs, I see that the wide class is not applied to .nice-dates-day and .nice-dates-grid is rendered with height: 6px.

Perhaps this happens because the initial width of the ref element is 0 and by that it can't render correctly?

I can open a PR setting a mininum height for .nice-dates-day and .nice-dates-grid but I'd like to discuss it here before to check if this is the best option available.

as per https://web.dev/uses-passive-event-listeners/

Currently I have to hack around with flexbox to get a span layout. Why not make it a span by default so if someone wants a block layout they can wrap it with a div.

While to do a inline layout, it requires a flexbox hack which IMO is worse as a library shouldn't make design decisions :)

With the default configuration of DateRangePicker, if you select a date, then select an end date that is earlier, the startDate is cleared. From that point onward, you can select ranges spanning backwards in time (as is probably the expected behaviour).
A related quirk (which may be the desired behaviour), is that clicking the same date over and over causes the date to swap (clear startDate and set endDate, and vice versa). Though this does make it impossible to set same-day intervals with the default configuration.

I'm using DatePickerCalendar, and i want to be able to write some text when my mouse is on disable dates or higlighted dates. I need someting like title attribute on div. I read the api referances in your documents, but there is no such a thing 'onFocus' in DatePickerCalender. is it possible to add this props?

I can't figure out how to use css to resize the total div popover. I would like to have it half the size, is it possible?

Hi everyone,

I'm using DatePickerCalendar, I want to disable month navigation, I check the API references but can't find any prop for this.

Is there any way to archive this without wait new version to add this props ?

Hello and thanks for a great lib!

Im looking for a way to show the next month when current date is the last of the current month, is this possible?
I have tried for a while but without no success.

If its achievable I would greatly appreciate the help!

When running npm install react-nice-dates date-fns --save
I get the error:

npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16" from [email protected]
npm ERR! node_modules/react-nice-dates
npm ERR!   react-nice-dates@"*" from the root project

This is because the handleClick handler is being passed to the onTouchEnd prop in the file below.

This is specially an issue when there's not enough vertical space to fit the full height of the calendar on mobile (because of the mobile browser address bar at the top and navigation bar at the bottom, in this case). The user will try to scroll down to click one of the last dates of the month for example triggering the click event will the CalendarDay that was initially held for the drag up movement

💡 This is only an issue when touchDragEnabled is set to false. I could look more into it and submit a PR with a potential fix, if yo want me to.

I'm working on an app to visualize (highlight) my workdays in the calendar (they vary week to week). Right now, I fetch my workdays based on the month the calendar is set to. The challenge I'm facing is that if I work the week of September 27th (1 week before October) and want to see what days I'll be working the next week I have to advance the calendar month to October and my workday fetching functions will return the dates I'm working on October, and not September, and therefore the dates that display in the calendar from September won't be highlighted.

So, if the calendar had a way of communicating what is the start and end displayed date (for October 2021 that would be Sept 26 and Nov 6) I could use those dates to fetch my workdays in that range.

I know that I could adjust my data fetching functions to always include one week before and one week after each month, but it would be quite convenient if the Calendar component offered the functionality I mentioned in the previous paragraph. Maybe the onMonthChange handler accepting a callback like (monthStartDate, startDisplayedDate, endDisplayedDate) => {...}??

✅ Also, really nice library! I'm interested in contributing, specially working on issue #3 if no one is already.

Is it possible that the calendar highlights an array of dates in the modifiers?

I noticed that the format of the week day is hard-coded to be "eee". Any chance this could be dynamic and exposed in the API?

Thanks for this library! It's awesome :)

Hi, I'm working on something where it would be nice to show week numbers. I'm quite happy with your library but unfortunately this is missing for my use case.

Is this something you'd be interested in adding? If you are interested I'd be willing to give it a look.

Hi
Love the work :), It's very neat and beatiful.
Would be great if there would be a possiblity to add some kind of clear icon when you want to resign from selected date :)

BR
Daniel

Hi there.
How could i choose year when i'm with touch device?
As i can see, you blocked input focus (dunno why)

onFocus() {
        inputProps.onFocus();
        setFocused(true);
        if (isTouch) {
            ^^^^^^^
          inputRef.current.blur();
        }
      }

so for now i can only play like cookie-clicker to set something like 2000 and earlier.

The calendar draws one more line of -outside dates per month.
On the example image below, Calendar should stop on 3rd of January but displays one more row of January dates.

Hi, is there anyway to make the calendar popover stay above the input instead of below it ?
I'm having a select date at near bottom of the page so it would be great to set it above the input

This has been blowing up my sentry, I'm not sure why but all I see is refA.current.contains is undefined when evaluating:

I don't really understand what's causing it, I'm just using it like this:

<DatePicker date={this.state.date?.toJSDate()} onDateChange={(date) => this.updateDate(date)} locale={enGB}>
  {({ inputProps, focused }) => (
    <Input
      {...inputProps}
      type="text"
      className={'input' + (focused ? ' -focused' : '')}
    />
  )}
</DatePicker>

Suggested fix:

diff --git a/index.d.ts b/index.d.ts
index 11d03eb..b9ad938 100644
--- a/src/useOutsideClickHandler.js
+++ b/src/useOutsideClickHandler.js
@@ -8,9 +8,9 @@ export default function useOutsideClickHandler(callback) {
   useEffect(() => {
     const handleOutsideClick = event => {
       if (
-        (!refA.current || !refA.current.contains(event.target)) &&
-        (!refB.current || !refB.current.contains(event.target)) &&
-        (!refC.current || !refC.current.contains(event.target))
+         (!refA.current || (refA.current.contains && !refA.current.contains(event.target))) && 
+         (!refB.current || (refB.current.contains && !refB.current.contains(event.target))) && 
+         (!refC.current || (refC.current.contains && !refC.current.contains(event.target)))
       ) {
         callback()
       }

Thanks for very nice library.

ISSUE
Using DatePockerCalendar in Ionic React project comes with miscalculated height of day cells and whole grid as shown in attached pictures.

PARTIAL "FIX"
I am unable to find how to wrap or style your component to get proper result.
Resizing window recalculates grid and it starts working as expected with all days visible.

WHAT NEEDS TO BE FIXED - GRID CALCULATION ON FIRST RENDER
Would you please review how to get grid correct on first render?

My wrapper/placement of component in Ionic React app (https://ionicframework.com/docs/react/quickstart).

<IonPage> <IonHeader> <IonToolbar> <IonTitle>Ionic Blank</IonTitle> </IonToolbar> </IonHeader> <IonContent> <div> <DatePickerCalendar locale={cs} date={date} /> </div> </IonContent> </IonPage >

Unexpected broken days layout on first render before I try to resize window to force grid recalculation:

Thanks
Martin

Hi there

I'm seeing the following when on a mobile view:

Where the pop up calendar isn't scaled when on a mobile. Is there anything special i need to do?

The demo site works correctly...

Any advice would be appreciated...thank you for this library..just what i was looking for.

I noticed in the type definitions that START_DATE / END_DATE aren't exported, but instead a DateRangeFocus type is used.

This makes it a little hard to check without declaring these two string values ourselves.

Is it reasonable to use an enum?

export enum DateRangeFocus {
    startDate = 'startDate',
    endDate = 'endDate'
}

So then we could do something similar to:

import {DateRangePicker, DateRangeFocus} from 'react-nice-dates'

return <DateRangePicker {...args}>{
    ({focus}) => <p>{focus == DateRangeFocus.startDate ? "Start is focused" : "End is focused"}</p>
}</DateRangePicker>

I'm happy to PR this if people are happy with this.

Nothing happens when clicking the input on mobile in Safari or Chrome. If I double-tap it opens but gives this error in chrome:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

Hi,

I tried to extract the date props fro startDate using day=stratDate.split(' ')[0] in DateRangePicker
but I get TypeError: Cannot read property 'split' of undefined.
What can I do the selection without needing to use packages like moment...?

Thank you for your recommandations

Thank you for the minimal date picker.

Coming to the issue, creating a placeholder for time picker (As also requested in HN comments)

Thanks in advance.

Hi,
I really wanted to use this library, it looks great, but I get a loop of a warning and an error, like in the included picture/

If this is solved I would definitely use it.

Hi there, thanks for the great work on this library!

Can I just check what is the best way to ensuring the calendar popup is hidden when tabbing out of an input within a <DatePicker /> example?

Currently it's remaining open when I'm tabbing from one form item to another.

Thanks!

Blocker for #12.

Currently, the mobile support of the calendar (controllable by the undocumented nor typed touchDragEnabled) is not so mobile friendly.
Example:

The main issue arises from the fact that the user is trying to scroll through the page, but he is stuck scrolling through the calendar months.

If the months could be scrolled horizontally (left to right) instead of vertically (top to bottom) that would allow the user to better navigate the site.

Let me know what you think.

we need pick birthday in profile page not this package not good user experience for select years and month

Swipe months on mobile ignore maximum date
maximumDate={addMonths(new Date(), 2)}

And you able swipe forward after that date

I'd love this lib if it was more accessible.
Like support for keyboard only and screen readers and some mild contrast issues here and there.

Hello. do you have plans for supporting multiple calendar view? For a start/end date without 2 inputs?

Thanks

Hi, it's possibile to disable by prop the up/down swipe on calendar for mobile navigation?

It creates a problem with scroll on mobile devices. Sometimes when a scroll down (on tap) the calendar goes to next month and select a different date. So I need to change months only by arrows (next/prev). Thanks

how to change the placement of datepicker popover. kindly help

Hello!

First and foremost - thanks for the great work and an awesome library!

I have a suggestion to add a property showCurrentYear<boolean> or even showYear<boolean> in the dates navigation. Currently the year is only visible when calendar isn't the current year.

Thanks!

Hi @hernansartorio

I'm a react typescript user and i have some issues with the new embedded typescript types.

Some problems :

• Components children are not JSX, but functions
• onChange callback return Date | null and not Date | undefined. It can be a problem if someone write date === undefined in the onChange handler
• modifiers functions is (date: Date) => boolean

I have fork the repo and will create a PR with some enhancements only in the index.d.ts file.

Thanks for this awesome library !

Could not find a declaration file for module 'react-nice-dates'.

Is there a possibility to get the types?

How can I disable specific days? For example the 1st, 23rd and 25th of a month?
Is there any way I can disable specific days using an date array?
Thank you

Hi,

I'm using react nice dates in Ionic so far is pretty good.

I have a request, can you add animation / drag feature right to left as well. I see it only supports top bottom. What I'm asking is if it is possible to make it horizontal, that make much more sense to me cause the buttons to change month have an horizontal layout but the animation is vertical.

Thank you very much,
Best regards.

Hey, really nice work!
I am working on date-io - adapter between different date-management libraries, which can be useful to not require date-fns for all the users, who for example needs time-zone management out of the box, like in luxon or already using moment, or for example using different from gregorian calendar system.

If you find this usefull I can help you integrate date-io :0

Hey, thanks for the awesome and lightweight package!

I have been trying to use DateRangePickerCalendar with my popover component as I did with DatePickerCalendar component, but both onStartDateChange and onEndDateChange don't trigger any actions. Typescript is giving me errors, but I think it's only about types, but it didn't work. I tried using the exact example in the docs to see if I was doing something wrong but it still didn't work.

Thanks for the help!

The repo is missing contributing guidelines with instructions for installing and developing the plugin locally.

Looks like the docs hosting has an error - https://reactnicedates.hernansartorio.com/

  const [date, setDate] = useState(new Date(2000,0,1));

      // should render 1 jan 2000, but it displays current date
      <DatePickerCalendar date={date} onDateChange={setDate} locale={enGB} />

I'm setting up a DatePickerCalendar with initial date but caledar is not rendering the preselected date but current date. Is it a bug or I have to "turn some switches" to make it work?