deseretdigital / dayzed Goto Github PK

Apparently Outside Days is a more commonly used term.

• showOutsideDays - react-day-picker
• enableOutsideDays - react-dates

Should we rename fillAdjacentMonths to showOutsideDays?

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 :)

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 was curious if this library is compatible with react 15

Would be nice to add Prettier and ESLint to the project.
https://prettier.io/
https://eslint.org/

Arrow keys are a very nice feature when navigating through something with as many elements as a calendar.

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 😇

Need to add test coverage to the lib.

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.

There isn't a way to display the user a weekly view instead of a monthly view?

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?

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

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.

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?

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:

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:

... but those kind of already work because they utilize the browsers locale.

Thanks in advance!

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.

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

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!

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?

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?

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:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#interpretation_of_two-digit_years

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.

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.

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

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?

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?

The following line returns an aria-label in an english american format.

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?

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?

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:

http://airbnb.io/react-dates/?selectedKind=DRP%20-%20Calendar%20Props&selectedStory=with%20outside%20days%20enabled&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

Would you be open to a PR?

Thanks in advance!

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.