aboveyunhai / chakra-dayzed-datepicker

Chakra UI + Dayzed = datepicker
https://aboveyunhai.github.io/chakra-dayzed-datepicker/
MIT License
223 stars 46 forks source link

Save date state to Redux #27

Closed tonypingco closed 1 year ago

tonypingco commented 1 year ago

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.

aboveyunhai commented 1 year ago

you just need to convert the between date and string via date-fns (since it's one of dependency of this lib) by yourself before you make any api request, or change the data type before saving into your redux. It's just one extra line of code. This is quite normal for general applications.