deseretdigital / dayzed Goto Github PK
View Code? Open in Web Editor NEWPrimitives to build simple, flexible, WAI-ARIA compliant React date-picker components.
Home Page: https://dayzed.netlify.app
License: MIT License
Primitives to build simple, flexible, WAI-ARIA compliant React date-picker components.
Home Page: https://dayzed.netlify.app
License: MIT License
Need to add test coverage to the lib.
Hello i noticed that there is possible bug in Type definition for Props
Since I am trying to extend those props to my custom component, in this case the onDateSelected is requiered. So i get this error
So its a simple fix of adding a '?' to the type difinition for the onDateSelected so that its not requiered.
When you create a calendar in a range style. By default, it will show the current month and the next month.
But if you want to show the last month and the current month, you need to set offset-1
For example.
onst dayzedData = useDayzed({
onDateSelected: handleOnDateSelected,
selected: selectedDates,
offset: -1,
monthsToDisplay: 2,
firstDayOfWeek: 1,
date: new Date(),
showOutsideDays: true,
});
And it displays fine, but the onClick
with getBackProps
and getForwardProps
stop working
I am not able to get the correct date with dayzed, and I believe it is because of timezone issue:
Get current month 2020-11-19T09:17:17.952Z //got this with new Date()
checking dayzed props {
calendars: [
{
firstDayOfMonth: 2020-10-31T16:00:00.000Z,
lastDayOfMonth: 2020-11-29T16:00:00.000Z,
month: 10,
year: 2020,
weeks: [Array]
}
],
getDateProps: [Function: bound getDateProps],
getBackProps: [Function: bound getBackProps],
getForwardProps: [Function: bound getForwardProps]
}
My dayzed's config:
<Dayzed
minDate={currentMonth}
offset={0}
firstDayofWeek={1}
onDateSelected={(date, e) => {
console.log('getting date', date)
}}
>
How can I fix this?
How could I handle the moth offset when the selected state changes. E.g. If I change the selected state from an input to a date in June, I want to move the calendar from Janury to June.
Thanks
I think that date-fns
should be moved to dependencies as opposed to peer deps and dev deps.
The reason being that it directly uses them internally and doesn't expose an API that consumes them - that's why react
is defined that way.
Hey! Great library. It let me build my date picker with my UI kit without locking myself in to something that would be hard to maintain. Great work!
I would love to be able to translate the aria-label
:
Line 55 in ebf1de1
Maybe add support for passing in a function for back and one for forward? See suggestion in typescript definition:
export interface Props {
date?: Date;
maxDate?: Date;
minDate?: Date;
monthsToDisplay?: number;
firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
showOutsideDays?: boolean;
selected?: Date | Date[];
children?: RenderFn;
render?: RenderFn;
offset?: number;
onOffsetChanged?(offset: number): void;
onDateSelected(selectedDate: DateObj, event: SyntheticEvent): void;
+ getBackwardText?(offset: number): void;
+ getForwardText?(offset: number): void;
}
They would default to the existing values:
getBackwardText(offset: number) => {
return `Go back ${offset} month${offset === 1 ? '' : 's'}`,
}
getForwardText(offset: number) => {
return `Go forward ${offset} month${offset === 1 ? '' : 's'}`,
}
The same kind of goes for the aria-label
for the actual date buttons:
Line 32 in ebf1de1
... but those kind of already work because they utilize the browsers locale.
Thanks in advance!
The current implementation of useDayzed
causes new objects, e.g. calendars
, to be created on every render, even though its params didn't change.
To demonstrate this, I created this sandbox. Update the count and check the logs on the console.
For each render, we get new calendars
, getDateProps
, getBackProps
and getForwardProps
.
These issues can be solved with memoization and #41 proposes a fix for them.
Please let me know your thoughts around this behaviour and the proposed solution.
There are a number of places in utils.js
where you call new Date(year, month, day)
. There is a documented issue with the JavaScript Date constructor where year values from 0-99 are interpreted as a relative offset from the year 1900. See this MDN article:
The result is that if we pass a year in this range to useDayzed, the calendar shows (for example) 1999 instead of 0099.
Admittedly, it's pretty unlikely that real users will be working with years in this range - we only ran across the problem because we were testing extreme values. But I thought you should be aware that this issue exists.
I have a specific usecase where user should be able to change year/month by dropdowns from outside of the calendar, when dropdown changes, I want the calendar to update. I tried setSelectedDate
(in the main example in README) but it doesn't update the calendar.
Is this possible at the moment?
First, just wanted to say this is a wonderful little abstraction for calendars in React! π I was curious if you would be willing to swap out similar functions with date-fns where it makes sense? I think it could reduce bundle sizes for others utilizing the date-fns
library and hopefully it would keep this one a similar size since each function can be imported individually. If this sounds ok, I'd be willing to submit a PR, just let me know π
For date range, I think adding something like this would be helpful https://github.com/deseretdigital/dayzed/blob/master/src/dayzed.js#L89
It would give us the ability to add styling to dates in between a potential range selection like how react-dates does http://airbnb.io/react-dates
Apparently Outside Days is a more commonly used term.
Should we rename fillAdjacentMonths
to showOutsideDays
?
Hi,
I needed to experiment with a new feature (the ability to block specific days, not just a start and end date).
While doing this I converted the whole codebase to TypeScript.
I can make a PR with the changes if you're interested ?
I'd like to upgrade to version 2 of date-fns and continue using this component.
It seems like it should be relatively straight forward to update the package and fix the breaking changes. Would a pull request to do that be of interest?
Hi! π
I'm trying to work on this issue, but I can't achieve it at the moment because we are not passing the event to the onDateSelected
callback here.
Are you in favor of adding it as a second argument (to prevent a breaking change)?
If so, I'd like to work on it :)
Currently the library only exposes Dayzed component. What if we turn all the components in examples into reusable ones, i.e. RangeDatePicker, MultiDatePicker, DatePicker, while still exposes the render props to userland?
Arrow keys are a very nice feature when navigating through something with as many elements as a calendar.
Hello π
I'm building a datepicker on top of this library and wanted to know if it's possible to export the functions on the utils
module. In my use case, I have a Today button and to make it work properly, I'm making use of the normalizeDate and isEqual functions (but copying them).
Would be nice to import them directly from dayzed. What do you think about it?
Thanks in advance.
Hi, I'm trying to create a calendar component that shows a <input type="date" />
along with a custom date picker created by dayzed, the issue is that when I receive the date selected from dayzed and try to assign it to the native input with <input value={date.toISOString().split('T')[0]} type="date" />
I see a different day.
For example, if I select Sept 1st, it will read August 31th
in the native picker. I suppose it's an issue with timezones, so now I'm wondering how should I parse the dayzed-provided date so that I get back the correct value to populate the native input element?
There isn't a way to display the user a weekly view instead of a monthly view?
Thank you for your awesome work and the innovative way to handle date pickers π
Unfortunately, I'm unable to use the lib because the types seem to be old enough to not export useDayzed
.
Are them planned to be updated soon?
As can be seen in the codesandbox example - https://codesandbox.io/s/6xz727lr0z
Once a date is selected, the calendar renders all the dates a second time.
An array containing an array of date objects for each week of the month. Starting from Sunday to Saturday.
What about locales where the week starts on Mondayβmost of Europe, for example? Is there a way to specify this?
Hi there, love the library!
What I'm working on at the moment requires me to provide the option to move forwards or backwards in both monthly increments and yearly increments. Whilst the former is handled natively by the library with getBackProps
and getForwardProps
, the latter is not and at present will require me to write my own logic checking dates, something which is otherwise within the library's purview.
I'm not sure exactly how the API should be designed. For example, you could provide an optional property to the aforementioned methods which internally defaults to 1
:
<button
...getBackProps({ calendars, monthsToIncrement: 12 })
/>
Also, while I'm here, I've written up some basic TypeScript typings. Are you cool with me putting them up on DefinitelyTyped for other TS users?
Cheers!
Hey,
It would be nice to provide the feature (maybe via a prop) to see days outside of the month, and being able to select them. Basically, the same thing react-dates is providing:
Would you be open to a PR?
Thanks in advance!
Would be nice to add Prettier and ESLint to the project.
https://prettier.io/
https://eslint.org/
The following line returns an aria-label in an english american format.
Line 32 in 40d0161
This does not seems right in the context of internationalization.
In fact, the w3 aria datepicker example (see: https://w3c.github.io/aria-practices/examples/combobox/combobox-datepicker.html) shows a slightly different usage with a table with a 'grid' role and custom 'data-date' attributes.
What is the intended way to cope with a11y and i18n?
I was curious if this library is compatible with react 15
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.