massierc / react-date-inputs Goto Github PK

Is there a way to have this switch to MM/DD/YYYY format? Optimally I'd like to have it display this format for the US and DD/MM/YYYY for other locales based on the country selected.

All releases since v1.7.0 are broken as package.json specifies an non existing entry point dist/index.js .

The onBlur() prop uses the wrong type in two places:

export type DateInputProps = {
-  onBlur?(e: React.ChangeEvent): undefined;
+  onBlur?(e: React.FocusEvent): void;
}

Note: the changed return type as well.

and

- const handleGroupBlur = (e: React.ChangeEvent<HTMLDivElement>) => {
+ const handleGroupBlur = (e: React.FocusEvent<HTMLDivElement>) => {

I'm combining this component with a date picker. Thus I need to sync the value of the input when selecting a date with the picker.

Would you be open to watch value for changes with useEffect() and update parsedValues accordingly?

Right now I'm working around this by generating a unique key when selecting a value with the picker.

This logic seems flawed:

 const {
      day = show.includes(Unit.day) ? undefined : 1,
      month = show.includes(Unit.month) ? undefined : 1,
      year = show.includes(Unit.year) ? undefined : 2020,
    } = parsedValues;

    const isInitial =
      day === getDate(value as Date) &&
      month === getMonth(value as Date) + 1 &&
      year === getYear(value as Date);

    if (onChange && !isInitial) {
      if (day === undefined || month === undefined || year === undefined) {
        onChange(undefined);
      } else if (isValid(day, month, year) && year.toString().length === 4) {
        onChange(new Date(year, month - 1, day));
      } else {
        onChange(undefined);
      }
    }

If invalid input is supplied, onChange is triggered with undefined. All good. However, if moving back to the initial value, I would expect to onChange to trigger with (initial) value.

If one want to avoid calling onChange on mount, you could use something like:

  const isInitialRef = useRef(true);

  useEffect(() => {
    if (isInitialRef.current) {
      isInitialRef.current = false;
    } else {
      // business as usual
    }
  }, [parsedValues]);

I would prefer for this to mimic more behaviors found in native <input type="date"> element:

1. Increment/decrement with arrow up/down
2. Delete the whole input on Backspace
3. Pad with 0s up to maxLength
4. Keep the contents of focused input selected at all times

1. can be achieved quite easily by using type="number" on the default input component, together with some styles:

<input 
  type="number"
  style={{ 
    appearance: "none",
    MozAppearance: "textfield", 
    ...inputComponentProps.style
  }}
/>

Of course, one can stick to type="text" and add logic using onKeyDown. Might be cleaner.

Preferably, it should also handle wrap-around, i.e. when decrementing below 0 it assigns the max allowed value, e.g. 12 for month or 31 for day (could be made even smarter to take current month into consideration).

Something to consider is autoTab needs to take this into account, i.e. it should only auto tab when typing, not using arrow keys.

2. should only be a matter of adding an onKeyDown-listener and clear the parsed value for the unit input at hand if event.key === "Backspace".

3. could be achieved with something along the lines

-const newUnitValue: number | undefined = val >= 0 ? val : undefined;
+const newUnitValue: number | undefined = val >= 0 ? String(val).padStart(maxLength, "0") : undefined;

4. This one is potentially a little trickier, but since state is kept outside the DOM, I believe one could do event.target.select() in onFocus and onKeyDown listeners (unless using Tab).

Please I need some help with this. After I installed the react-date-inputs package in my project, it now throws the following error message:

Any reason not to support React 16 and 17 as a peer dependency? Is anything React 18-specific being used?

If 16 and/or 17 is proving to be a pain in the future, I'd find it completely motivated to drop support for them again.

  "peerDependencies": {
    "react": "16.x || 17.x || 18.x",
    "react-dom": "16.x || 17.x || 18.x"
  }

Hey @massierc!

Thank you for this project!
I have a question about your other project but I don't have any of your contacts. Could you please give me your email?

Expected Behavior

When prop autoTab is set to true, focus on inputs moves in both directions, i.e. forwards on type and backwards on delete.

Current Behavior

Automatic focus only works forwards.

Possible Solution

Conditions inside handleFocus must be reviewed.

Steps to Reproduce

1. Go to Storybook
2. Type date (e.g. 22 - 4 - 2020)
3. Delete year
4. Focus is still on year input. It should now be on month.