hernansartorio / react-nice-dates Goto Github PK
View Code? Open in Web Editor NEWA responsive, touch-friendly, and modular date picker library for React.
Home Page: https://reactnicedates.hernansartorio.com
License: MIT License
A responsive, touch-friendly, and modular date picker library for React.
Home Page: https://reactnicedates.hernansartorio.com
License: MIT License
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?:)
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
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.
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!
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!
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.
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
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?
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?
Is it possible that the calendar highlights an array of dates in the modifiers?
we need pick birthday in profile page not this package not good user experience for select years and month
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.
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.
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.
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 :)
I'm a react typescript user and i have some issues with the new embedded typescript types.
Some problems :
Date | null
and not Date | undefined
. It can be a problem if someone write date === undefined
in the onChange handlermodifiers
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 !
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!
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
Looks like the docs hosting has an error - https://reactnicedates.hernansartorio.com/
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.
Could not find a declaration file for module 'react-nice-dates'.
Is there a possibility to get the types?
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.
Hello. do you have plans for supporting multiple calendar view? For a start/end date without 2 inputs?
Thanks
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.
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.
Blocker for #12.
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.
how to change the placement of datepicker popover. kindly help
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 ?
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.
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, 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
@hernansartorio do you mind if i add storybook for this project?
The repo is missing contributing guidelines with instructions for installing and developing the plugin locally.
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.
react-nice-dates/src/CalendarDay.js
Line 54 in 21116de
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.
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'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.
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
Swipe months on mobile ignore maximum date
maximumDate={addMonths(new Date(), 2)}
And you able swipe forward after that date
This has been blowing up my sentry, I'm not sure why but all I see is refA.current.contains
is undefined when evaluating:
react-nice-dates/src/useOutsideClickHandler.js
Lines 11 to 13 in b61f0c7
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()
}
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
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.