All files / src/components/Inputs/InputTypes Date.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { DatePicker } from "rsuite";
import { isAfter } from "rsuite/esm/internals/utils/date";
 
type DateInputTypes = {
  value: string;
  handleChange: (val: string) => void;
  error?: string;
  disabled?: boolean;
  className?: string;
  format?: string;
  disabledDate?: (date: Date) => boolean;
};
 
function DateInput({
  value,
  error,
  handleChange,
  disabled,
  className,
  format = "dd/MM/yyyy hh:mm:ss aa",
  disabledDate: disabledDateFromProps,
}: DateInputTypes) {
  const onChange = (d: Date) => {
    const dateInSeconds = d.getTime() / 1000;
    handleChange(dateInSeconds.toString());
  };
 
  let disabledDate =
    disabledDateFromProps !== undefined
      ? disabledDateFromProps
      : (date: Date) => isAfter(date, new Date());
 
  return (
    <DatePicker
      format={format}
      disabled={disabled}
      onChangeCalendarDate={onChange}
      showMeridian
      cleanable={false}
      shouldDisableDate={disabledDate}
      value={
        typeof value === "string" || typeof value === "number"
          ? new Date(parseInt(value.toString(), 10) * 1000)
          : value
      }
      className={`${className} ${
        error ? "border-red-500" : ""
      } !text-violet-500 !w-full !rounded !border min-w-[220px] hover:!border-violet-500`}
      menuClassName="!z-[90] text-violet-500 bg-violet-500 !rounded"
    />
  );
}
 
export default DateInput;