Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions example/src/DatePickerExample.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,8 @@ function DatePickerExample({ theme }) {
label="Date with minimum and maximum"
placeholder="Select a date..."
type="solid"
minimumDate={new Date("April 10, 2023")}
maximumDate={new Date("May 10, 2023")}
minimumDate={new Date("2023-04-10")}
maximumDate={new Date("2023-05-10")}
/>
</Section>
<Section title="Styled">
Expand Down
40 changes: 24 additions & 16 deletions packages/core/src/components/DatePicker/DatePicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import {
paddingStyleNames,
positionStyleNames,
} from "../../utilities";
import { parseDate } from "./parseDate";

const AnimatedText = Animated.createAnimatedComponent(Text);

Expand Down Expand Up @@ -399,6 +400,29 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
type === "solid" ? { marginHorizontal: 12 } : {},
];

React.useEffect(() => {
const currentDate = parseDate(value);

if (!currentDate) return;

const minDate = parseDate(minimumDate);
const maxDate = parseDate(maximumDate);

let newDate = currentDate;

if (minDate && currentDate < minDate) {
newDate = minDate;
}
if (maxDate && currentDate > maxDate) {
newDate = maxDate;
}

if (newDate !== currentDate) {
setValue(newDate);
onDateChange(newDate);
}
}, [value, minimumDate, maximumDate, onDateChange]);

const Picker = (
<DateTimePicker
value={getValidDate()}
Expand Down Expand Up @@ -619,20 +643,4 @@ const styles = StyleSheet.create({
pickerContainer: { flexDirection: "column", width: "100%", zIndex: 100 },
});

function parseDate(date?: string | Date) {
if (typeof date === "string") {
const parsed = Date.parse(date);
if (!isNaN(parsed)) {
return new Date(parsed);
}
console.warn(
"Invalid date string:",
`'${date}'.`,
"See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format"
);
return undefined;
}
return date;
}

export default withTheme(DatePicker);
15 changes: 15 additions & 0 deletions packages/core/src/components/DatePicker/parseDate.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export function parseDate(date?: string | Date) {
if (typeof date === "string") {
const parsed = Date.parse(date);
if (!isNaN(parsed)) {
return new Date(parsed);
}
console.warn(
"Invalid date string:",
`'${date}'.`,
"See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format"
);
return undefined;
}
return date;
}
Loading