DatePickers CustomDatePicker.tsx

0% Statements 0/4

100% Branches 0/0

0% Functions 0/3

0% Lines 0/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.


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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React from "react";
import { Controller, useFormContext } from "react-hook-form";
import { DatePicker } from "@common/DatePickers";
import { TextField } from "@mui/material";
 
interface Props {
  name: string;
}
 
function CustomDatePicker({ name }: Props) {
  const { watch, control } = useFormContext();
  return (
    <Controller
      name={name}
      control={control}
      render={({ field: { ref, ...rest }, fieldState: { error } }) => {
        return (
          <DatePicker
            {...rest}
            minDate={new Date().setDate(new Date().getDate() + 1)}
            inputRef={ref}
            inputFormat="MM/dd/yyyy"
            adornmentPosition="end"
            renderInput={({ inputProps, ...params }) => {
              return (
                <TextField
                  inputRef={ref}
                  {...params}
                  error={!!error}
                  label="End date"
                  helperText={error?.message}
                  inputProps={{
                    ...inputProps,
                    placeholder: "Choose date",
                  }}
                  style={
                    {
                      //  minWidth: "100%",
                    }
                  }
                />
              );
            }}
          />
        );
      }}
    />
  );
}
 
export default CustomDatePicker;