aboveyunhai / chakra-dayzed-datepicker Goto Github PK

Currently, there's no provision for passing a ref to the DatePicker component, limiting our ability to interact with it programmatically. It would be valuable to introduce a ref prop or a method (e.g., getDatePickerRef()) that allows users to forward a ref to the DatePicker component. This enhancement would facilitate tasks like focusing the DatePicker or retrieving its current value.

Hi,

A quick question hopefully that can be answered easily - when the Range picker is employed, by default if it's set to show 2 months it's the current month and then next month. However for my needs, all future dates are disabled so it makes no sense to show next month on the right hand side since they're all disabled. So my question is, is there a way to offset it so that the two months showing are last month THEN this month side by side? I found something called offset but it doesn't seem to be settable from either the DatePicker props or the configs?

Is it possible to support adding a left/right element?
Like this:
https://chakra-ui.com/docs/components/input/usage#add-elements-inside-input

Hi there,

I'd like to allow users to see what the selected date is, even if it is disabled and earlier than the minDate. I don't seem to be able to make this work so far, as the selected date doesn't show the "selected" bg color, and just appears transparent like the other disabled dates. Is this possible via a workaround, or would it be possible to add this functionality?

Hello! I'm trying to change the color scheme of the entire component to blue, but the onHover state isn't following the scheme - any idea how I can customize the background from purple to blue?

Here are the props I'm passing right now:

dayOfMonthBtnProps: {
  isInRangeBtnProps: {
    background: "blue.100",
  },
  selectedBtnProps: {
    background: "blue.200",
  },
  todayBtnProps: {
    background: "blue.400",
  },
  defaultBtnProps: {
    background: "white",
  }
},

setting selectedBg to a dark color makes it impossible to read the selected text. and there seems to be no way to change selectedColor

Hi, my name is Bohodir. I am from Uzbekistan. Please add method to control popover. If you want, maybe i help you to do it

It would be easier to work on this project if it was documented in the README how to get from a git repo of this package to an installed forked version.

For example, I just added david-morris/chakra-dayzed-datepicker to my yarn classic project's package.json, installed, and ran npm install && npm run build in the node_modules/chakra-dayzed-datepicker directory. My changes were present, but the chakra theme was broken on the datepicker component. If I knew the correct way to install that, I would have been more confident in my PR.

Thanks for this useful component!

I had to do some tricky workaround in order to change this fontWeight. I think it could be a nice improvement by adding this as propsConfig.

details:

error raise on console when clicking on a RangeDatepicker

build:

• vite (es-build), production

deps:

• react: 18.1
• @chakra-ui/react: 2.1.2
• chakra-dayzed-datepicker: ^0.2.2 - we had this issue in past versions as well

error on console:

TypeError: IU.config is not a function
    at uie (chakra-dayzed-datepicker.esm.js:165:18)
    at Y8 (react-dom.production.min.js:166:137)
    at AZ (react-dom.production.min.js:289:386)
    at $Z (react-dom.production.min.js:279:389)
    at q0e (react-dom.production.min.js:279:320)
    at wC (react-dom.production.min.js:279:180)
    at Vk (react-dom.production.min.js:270:88)
    at mF (react-dom.production.min.js:272:300)
    at sp (react-dom.production.min.js:127:105)
    at react-dom.production.min.js:266:269

possible solution, my coworker @hexelon solve it in this fork
(here is the specific commit)

I can open a pr if needed, please let me know 🙏

Hi, we customized the datepicker to support a custom day button renderer along with event handlers on month view change, in order to accommodate our internal company needs. Is this something that you would be interested in merging back into this repository? If so, please let me know and I will prepare a pull request with the changes.

We used the date picker on multiple pages. So we created a component that just added styling and re-exported it to have a consistent design.

It would be cool to be able to theme it with Chakra's extendTheme as a multipart theme

Upon upgrading from version 1.6 to 2.6, I encountered an issue with the background color of disabled dates in my application. The problem only occurs when hovering over the disabled dates. Editing the background color works as intended, except for the hover state. If I'm missing something obvious let me know

Code:

  defaultBtnProps: {
              color: 'paleBlue',
              _hover: { bg: 'octavGreen', _disabled: { bg: 'blue' } },
            }

Example:

when clicking on SingleDatepicker where the date is already set, the popover will open on today calendar page.
I would expect that it will be open on the provided date.
(after choosing another date it behave as expected)

In advance, thanks for the component! Its awesome! 👍

There is some method to close automatically the Popover when user selects the endDate on RangeDatepicker?

I'm getting warnings saying that the days of the month keys, e.g. "72022S", are duplicated, as well as a significant performance hit when I define configs.

The date prop always expect a Date, ideally it should work if date is not supplied.

The calendar panel does not appear if the input is shown in a modal

Datepicker should be able to display empty state i.e.: yyyy/mm/dd --:--

I am using SingleDatepicker and am trying to allow the field value to be removed in the event someone selected a date but then realizes they do not want one (it is an optional field for my form). I am using it with react-hook-form as well. Is this possible?

I'm trying to create an event calendar that allows people to select dates. Yet once someone selects a date, I need to disable it for others.

Thus how do I pass a disabled prop to individual dates?

I can't find a way to edit the date directly from the input field without having to open the date picker.

It would be nice if it was possible to add an aria-label and/or HTML label.

The <FormLabel> Chakra component doesn't work with this, presumably because the input's ID is being set by whatever is doing the popover logic.

Since that's probably a lot of internal logic, it would be nice to be able to explicitly pass down an aria-label.

<SingleDatepicker
  name="date-input"
  date={date}
  onDateChange={setDate}
  isDateDisabled={(date: Date) => date.getDay() === 0}
/>

I propose to check the date dynamically, this would be easier to filter out repeated days.

How do I integrate <SingleDatepicker /> with Formik and Yup validation schema? I just can't update the Formik/Yup date field value when date is selected...

What exactly should I supply onDateChange so that Formik/Yup field value is updated? I tried supplying Formik's setFieldValue function, but this accepts 2 parameters fieldName and value.

export the Calendar Panel so it doesn't have to be tied with the input.

Ideally, when user focuses on an input, focus handler should run.
And when user moves away from that input, blur handler should run.

RangeDatepicker component isn't handling these events properly.
Both the handlers are being run, for each event, and this is contradictory to the default way of handling HTML events.

Link to reproduced code.
Please check console when triggering focus and blur events.

Add ability to edit properties of this block. I need to make borderWidth: 0.

https://github.com/aboveyunhai/chakra-dayzed-datepicker/blob/main/src/components/calendarPanel.tsx#L93C13-L93C24

Example with borderWidth: 0

Hi,

I am using the library to my app and looking to save date state to Redux, to connect with the backend server as for now we are using Redux for this kind of task. The normal date and setDate setter would work at normal use case but when it comes to Redux, I guess the payload mostly return string type, so the onDateChange function is not working as it needs a Date type.

Here is my code:

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

useEffect(() => {
        if (!state?.trialEndLocal) {
            setState({
                trialEndLocal: Date.now(),
            });
            setDate({
                trialEndLocal: Date.now(),
            });
        }

    }, [state?.trialEndLocal]);

...
<FormControl>
                       <FormLabel>Trial Expiry</FormLabel>
                                         <InputGroup>
                                             <SingleDatepicker
                                                    name="date-input"
                                                    date={
                                                    new Date(state.trialEndLocal)}
                                                    onDateChange={e => setDate(trialEndLocal: e))}
                                               />
                                          <InputRightElement
                                                    color="gray.500"
                                                    children={<CalendarIcon />}
                                          />
                                       </InputGroup>
</FormControl>

Issue: onDateChange not works with Redux and string type.

Hello,

How does the datepicker save the date? Is there a way to set the timezone?

Next step might be adding the month picker due to business need.

dayzed uses framer-motion 4, but 6 is available. Upgrading this dependency would result in easier integration with other projects.

I have a white background with white text. I would like to be able to change one or the either independently of global styles.
Is it possible to implement a popoverProps in the propsConfigs to control this behaviour?

I can't enter the value inside <SingleDatepicker>, is that possible?

<Controller control={control} name="due_date" render={({ field }) => { const { value, onChange } = field; return ( <SingleDatepicker configs={{ dateFormat: "dd/MM/yyyy" }} usePortal onDateChange={onChange} date={value} {...field} /> ); }} />

Hi everyone,
I have set a minDate : Tue Feb 28 2023 , days before minDate are not active but do not have any disabled styles.
I've tried to force it myself with the propsConfigs but it does not work.

Buttons keep whiteColor

propsConfigs={{
                inputProps: { size: 'lg' },
                dayOfMonthBtnProps: {
                  defaultBtnProps: {
                    _hover: {
                      background: 'primary.500'
                    },
                    _disabled: {
                      opacity: 0.4,
                    }
                  },
                  selectedBtnProps: {
                    color: 'white',
                    bgColor: 'primary.500'
                  }
                }
              }}

Any ideas?Thank you
Version:
chakra-ui/react: ^2.4.7
chakra-dayzed-datepicker: ^0.2.6

The npm package doesn't require dayzed, but the code needs it.

Hi!

I am using your RandeDatePicker in a component on the right side of my page. The calendar panels overflow off screen and the user can not select dates from the second panel. I have tried changing the zIndex and the placement props with
propsConfigs={{
popoverCompProps:{
popoverContentProps: {
placement: 'left-start',
zIndex: 300
}
}
}}

I also tried this with popoverBodyProps which also did not work. If we can't change the placement, Is there a way to change the behavior of the overflow? Maybe switch to a column instead of a row? Or is there a way to do a RangeDatePicker with just one calendar panel?

Appreciate the help, thanks!

I made an immature decision to let the range state as an array [startDate, endDate], this will cause some issues when doing state management.

My original intent is to have a empty object if user don't provide their own:

{
  startDate: undefined, 
  endDate: undefined
}

but it will break range usage from previous versions.

I'm trying to display the short names of days as the label/value of the input, but it doesn't seem to work. If I look at the formatting docs of date-fns I should be able to pass 'ddd' to dateFormat of the config object. Doing this just prepends a 0 to the current day for each 'd' added.

Code:

<SingleDatepicker
    ...props
    configs={{
        dateFormat: 'ddd - dd/MM',
        monthNames: MonthNamesShort,
        dayNames: WeekdayNamesShort,
    }}
/>

Formatting like this gives me this result:

The expected result would be: Thu - 19/01

How do I clear the date selection or start with an empty input? This is quite useful for optional fields. For example I might want user to specify an empty date to indicate there is no expiry date.

Seems like onDateChange have to set a Date object. Prehaps we can make it (date: Date | null) => void?

I want to keep the date picker always open and always displayed without the input field. I've set the input field visibility to none, but when i click around the datepicker closes.

Is there anyway, to keep the component always open and displayed?

When trying to build with next, It's showing Can't resolve 'date-fns'