uselessdev / datepicker Goto Github PK

i get the following error while running npm I:
I'm using:

    "framer-motion": "^10.2.4",
    "@uselessdev/datepicker": "^2.7.0",
    "@chakra-ui/react": "^2.5.1",

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @uselessdev/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/framer-motion
npm ERR!   framer-motion@"^10.2.4" from the root project
npm ERR!   peer framer-motion@">=4.0.0" from @chakra-ui/[email protected]
npm ERR!   node_modules/@chakra-ui/accordion
npm ERR!     @chakra-ui/accordion@"2.1.9" from @chakra-ui/[email protected]
npm ERR!     node_modules/@chakra-ui/react
npm ERR!       @chakra-ui/react@"^2.5.1" from the root project
npm ERR!       1 more (@uselessdev/datepicker)
npm ERR!   8 more (@chakra-ui/menu, @chakra-ui/modal, @chakra-ui/popover, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer framer-motion@"^6" from @uselessdev/[email protected]
npm ERR! node_modules/@uselessdev/datepicker
npm ERR!   @uselessdev/datepicker@"^2.7.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/framer-motion
npm ERR!   peer framer-motion@"^6" from @uselessdev/[email protected]
npm ERR!   node_modules/@uselessdev/datepicker
npm ERR!     @uselessdev/datepicker@"^2.7.0" from the root project

It would be nice if a default start date was given if I choose not to give one.

Following the installation and usage guide, using the component throws the following error:

Uncaught TypeError: can't access property "start", value is undefined
    Calendar$1 uselessdev-datepicker.esm.js:294
    React 11
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-MB5FDF5C.js:12
    js index.js:6
    __require chunk-MB5FDF5C.js:12
    React 2
    __require chunk-MB5FDF5C.js:12
    js React
    __require chunk-MB5FDF5C.js:12
    js React
    __require chunk-MB5FDF5C.js:12
    <anonymous> react-dom_client:1
uselessdev-datepicker.esm.js:294:6

The above error occurred in the <Calendar$1> component:

Calendar$1@https://8fqih0.csb.app/node_modules/@uselessdev/datepicker/dist/uselessdev-datepicker.esm.js:326:18
EnvironmentProvider@https://8fqih0.csb.app/node_modules/@chakra-ui/react-env/dist/index.esm.js:119:62
ColorModeProvider@https://8fqih0.csb.app/node_modules/@chakra-ui/color-mode/dist/index.esm.js:183:15
ThemeProvider@https://8fqih0.csb.app/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:106:21
ThemeProvider@https://8fqih0.csb.app/node_modules/@chakra-ui/system/dist/index.esm.js:182:21
ChakraProvider@https://8fqih0.csb.app/node_modules/@chakra-ui/provider/dist/index.esm.js:20:177
ChakraProvider@https://8fqih0.csb.app/node_modules/@chakra-ui/react/dist/index.esm.js:110:24
App@https://8fqih0.csb.app/src/App.js:26:41

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. 
    in Unknown index.js:27:25

This is replicated in the following codesandbox:

https://codesandbox.io/embed/uselessdev-datepicker-demo-8fqih0

Using this code:

import { useState } from "react";
import { ChakraProvider } from "@chakra-ui/react";
import {
  Calendar,
  CalendarDefaultTheme,
  CalendarControls,
  CalendarPrevButton,
  CalendarNextButton,
  CalendarMonths,
  CalendarMonth,
  CalendarMonthName,
  CalendarWeek,
  CalendarDays
} from "@uselessdev/datepicker";

export default function App() {
  const [dates, setDates] = useState();

  const handleSelectDate = (values) => setDates(values);

  return (
    <>
      hello world
      <ChakraProvider theme={CalendarDefaultTheme}>
        <Calendar value={dates} onSelectDate={handleSelectDate}>
          <CalendarControls>
            <CalendarPrevButton />
            <CalendarNextButton />
          </CalendarControls>

          <CalendarMonths>
            <CalendarMonth>
              <CalendarMonthName />
              <CalendarWeek />
              <CalendarDays />
            </CalendarMonth>
          </CalendarMonths>
        </Calendar>
      </ChakraProvider>
    </>
  );
}

Hi,

I would like display a month view with weeks starting on Monday. The default is starting on Sunday.
Is that somehow possible or would that needed to be developed?
I could not find any hint in documentation/storybook or in source.

Thanks
v

There's a key issue where it's using the weekday names. In the US locale there are 2 S's and 2 T's causing duplicate key issues.
Created PR to resolve: #69

See https://uselessdev-datepicker.netlify.app/?path=/docs/calendar--disable-past-dates

The current day is disabled, although (at least to my understanding) it does not yet lie in the past.

Just a theoretical question: Is there any scenario in which the date supplied to the handleSelectDate-callback would not be valid?

Our implementation is based on this example and i couldn't reproduce or think of a scenario where the supplied date becomes invalid, that's why i wanted to ask.

First of all, great and well-written package!

I wonder if it's possible to skip years, not only months. It's a requirement I have for my app, and wonder if this needs to be added or could be easily customized?

Can be seen at https://uselessdev-datepicker.netlify.app/?path=/docs/calendar--highlight-today

Although one can select today's date, the style doesn't change as it does on every other day.

It seems that variant CalendarDay.variants.today has a higher priority than CalendarDay.variants.selected and thus overrides selected styles, while it should be vice versa.

Cannot be installed using npm. Only works with yarn

The bug is that the 201c0c9 commit is not actually reflected in the current version(2.7.0) of the package.

This can be easily verified:

• Here is the link to the npm code (open .cjs.dev.js or .cjs.prod.js file) where you need to find the line var styles = react.useStyleConfig('CalendarDay', {, and see that there is no interval here.
• If you download the code and run npm run build, in the source code at around line +- 541 (or it's better to find it by the line I provided above), there will be a parameter interval.

First of all, great datepicker built with chakra 👏

on the useCalendarDay in my opinion variant should be an array since is possible to have two variants at the same time
['today', 'selected'] or ['today', 'range']

example of MUI with variant, 'today' and 'range'.

Is it possible to select full weeks?
If not, could you point out how such a feature could be implemented?

Something like this:

The only identifiable selector is aria-label=[today] which isn't ideal and I can't find a better solution in the docs.

It would be useful if props disablePastDates, disableFutureDates could take a date as an option. Alternatively, it could be new props called disablePastDatesFrom, disableFutureDatesFrom.
In my case, I need to allow users to select only a certain range let's say from January first to February second. I need all other dates to be disabled.
I can make PR for that if it is okay.

Issue

#38 is a good demonstration for this bug. If I change locale to the one that has Monday as their first day of the week, the calendar will not respect that. Eg. Italian locale https://github.com/date-fns/date-fns/blob/v2.25.0/src/locale/it/index.js

Has an options.weekStartsOn = 1. With #38, it gives:

Where Dom (domenica) is Sunday in Italian and Lun (lunedì) is Monday in Italina

Solution

Whenever date-fns functions are used, they should given the locale object.
https://date-fns.org/v2.28.0/docs/Locale

I will see if I could submit a PR for this. Thank you

It's difficult to find this repo.
Changing name to Chakra UI datepicker shoud improve SEO.

Hi!
I'm trying to use it in a NextJS project and I'm facing some issues.
When I try to implement with format dd/MM/yyyy with input as the example given I face an error as followed.

Any hints on how to fix it?

Thanks in advance.

Notes

It seems the new complied output on npm will reference unscoped React global variable. I believe it's due to JSX creation.

Screenshots

It would be nice to be able to see the current day.
Something like this:

Using https://uselessdev-datepicker.netlify.app/?path=/docs/calendar--custom-control-buttons, the theme customizations made in a seperate datepicker.ts theme file (as outlined in the README and working fine for non-custom control buttons) are not applied to the custom button.

Problem

I need to create Date Range Picker with dd/MM/yyyy format, but It's hard to find docs about it.

Suggested Solution

Create a full docs of usage coverage, start with how to custom the format of the input date.