/
DateRangePicker.tsx
62 lines (59 loc) · 1.69 KB
/
DateRangePicker.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import { Box } from "@material-ui/core";
import { Close } from "@material-ui/icons";
import moment from "moment";
import React from "react";
import { DateRangePicker as DateRange } from "react-dates";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
interface IDateRangePickerProps {
label?: string;
onChange: (args: {
startDate: moment.Moment | null;
endDate: moment.Moment | null;
}) => void;
startDate: moment.Moment | null;
endDate: moment.Moment | null;
startDateId?: string;
endDateId?: string;
size?: "regular" | "small";
}
export const getDate = (value: any) =>
value && moment(value).isValid() ? moment(value) : null;
/**
* Deprecated. Use `DateRangeFormField` or `DateFormField` instead.
*/
export const DateRangePicker: React.FC<IDateRangePickerProps> = ({
label,
endDateId = "end_date",
endDate,
startDate,
onChange,
startDateId = "start_date",
size = "regular",
}) => {
const [focusInput, setFocusInput] = React.useState<any>(null);
return (
<Box className="my-2">
{label && <span className="text-sm font-semibold">{label}</span>}
<DateRange
endDate={endDate}
endDateId={endDateId}
focusedInput={focusInput}
onDatesChange={onChange}
onFocusChange={(focus) => setFocusInput(focus)}
startDate={startDate}
startDateId={startDateId}
minimumNights={0}
numberOfMonths={1}
showClearDates
isOutsideRange={(date) => date.isAfter(new Date())}
daySize={40}
small={size === "small"}
regular={size === "regular"}
block
displayFormat="DD/MM/yyyy"
customCloseIcon={<Close />}
/>
</Box>
);
};