massierc / react-date-inputs Goto Github PK
View Code? Open in Web Editor NEWSimple and lightweight date inputs for your React app
Home Page: https://massierc.github.io/react-date-inputs/
Simple and lightweight date inputs for your React app
Home Page: https://massierc.github.io/react-date-inputs/
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.
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>) => {
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"
}
When prop autoTab
is set to true
, focus on inputs moves in both directions, i.e. forwards on type and backwards on delete.
Automatic focus only works forwards.
Conditions inside handleFocus
must be reviewed.
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?
All releases since v1.7.0 are broken as package.json
specifies an non existing entry point dist/index.js
.
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]);
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.
I would prefer for this to mimic more behaviors found in native <input type="date">
element:
Backspace
0
s up to maxLength
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.
onKeyDown
-listener and clear the parsed value for the unit input at hand if event.key === "Backspace"
.-const newUnitValue: number | undefined = val >= 0 ? val : undefined;
+const newUnitValue: number | undefined = val >= 0 ? String(val).padStart(maxLength, "0") : undefined;
event.target.select()
in onFocus
and onKeyDown
listeners (unless using Tab
).A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.