Is it possible to disable the end date picker until the user enters the start date? Below I am sharing my code. Please tell me where I am doing wrong?
const startDate = new Date();
<Controller control={control} name="start_date" render={({ field }) => (
<DatePicker placeholderText="MM/dd/yyyy" dateFormat="MM/dd/yyyy"
onChange={(date) => field.onChange(date)} minDate={moment().toDate()}
selected={field.value}
id="start_dates"
required={true}
autoComplete='off'
onKeyDown={(e) => {
e.preventDefault();
}} />)}/>
<Controller control={control} name="end_date" render={({ field }) => (
<DatePicker dateFormat="MM/dd/yyyy"
onChange={(date) => field.onChange(date)}
disabled={startDate=== ""? true: false}
minDate={new Date(startDate)}
selected={field.value}
onKeyDown={(e) => {
e.preventDefault(); }} />)}/>
Create state variable dateStart.
In onChange event of startDate set its value, then disable endDate based on dateStart like this:
const [dateStart, setDateStart] = useState(null);
StartDate datepicker
<DatePicker placeholderText="MM/dd/yyyy" dateFormat="MM/dd/yyyy"
onChange={(date) => field.onChange(date); setDateStart(date)}
minDate={moment().toDate()}
selected={field.value}
id="start_dates"
required={true}
autoComplete='off'
onKeyDown={(e) => {
e.preventDefault();
}} />)}
/>
EndDate datepicker
<DatePicker dateFormat="MM/dd/yyyy"
onChange={(date) => field.onChange(date)}
disabled={dateStart ? false : true}
minDate={new Date(startDate)}
selected={field.value}
onKeyDown={(e) => {
e.preventDefault(); }} />)}
/>
Working example
Related
How can i use the date of "start_contract_time" in minValue of "end_contract_time".
The user will fill the field with his intended date. I need to get this date in the "start_contract_time" and then use it as a min value in "end_contract_time".
<FormControl>
<Controller
control={control}
name="start_contract_time"
render={({ field: { onChange, value } }) => (
<InputDate
label='Início do contrato'
dateFormat="dd/MM/yyyy"
locale={ptBR}
onChange={onChange}
onBlur={onChange}
selected={value}
/>
)}
/>
</FormControl>
<FormControl>
<Controller
control={control}
name="end_contract_time"
render={({ field: { onChange, value } }) => (
<InputDate
minDate={DATE HERE}
label='Fim do contrato'
dateFormat="dd/MM/yyyy"
locale={ptBR}
onChange={onChange}
onBlur={onChange}
selected={value}
/>
)}
/>
</FormControl>
With react-hooks-form I am trying to update one field based on another field value. The error I am facing is that my value is not registered in the data object.
This is my code:
const { handleSubmit, control } = useForm({});
const [dateValue, setDateValue] = useState()
const onSubmit = (data) => {console.log(data.week)} \\ undefined
<form
className={classes.root}
autoComplete="on"
onSubmit={handleSubmit(onSubmit)}
>
<Controller
name="date"
control={control}
defaultValue={props.operation === 'edit' ? props.values.date : null}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
id="date"
type="date"
label="date"
value={value}
className={classes.textField}
onChange={(event) => {
onChange(event.target.value);
setDateValue(event.target.value);
}}
error={!!error}
helperText={error ? error.message : null}
InputLabelProps={{
shrink: true,
}}
/>
)}
rules={{ required: 'Date is required' }}
/>
<Controller
name="week"
control={control}
defaultValue=""
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
id="week"
type="text"
className={classes.textField}
label="week"
disabled={true}
value={dateValue}
onChange={onChange}
error={!!error}
helperText={error ? error.message : null}
/>
)
/>
</form>
Finally, my week value is the result of a function which returns a string containing week - year concatenation.
The value is updated in the TextField, but it is not registered in the data object. Any idea what am I missing?
On the onChange handler of the date field you are updating only the state of dateValue and not the state of the form itself.
You have 2 options:
in the onChange handler of the date field call the setValue method you get from useForm
watch the value of the date field const date = watch('date') and have a useEffect to update the value of the week field:
const {watch, setValue} = useForm()
const date = watch('date')
useEffect(() => {
const calculateWeekValue = () => {...//}
setValue('week', calculateWeekValue(date))
}, [date, setValue])
I'm using the datepicker from Material-UI, but the actual format is "mm/dd/yyyy" and I need to change that to "dd/mm/yyyy", how can I do it?
the component:
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
onError={(e) => {
setError(true);
}}
label="Date"
value={infos.date}
onChange={(newValue) => {
setInfos({ ...infos, date: newValue });
setError(false);
}}
renderInput={(params) => (
<TextField
color={error ? "error" : "primary"}
required
error={error}
helperText={error ? messageError.date : ""}
{...params}
/>
)}
/>
</LocalizationProvider>
try inputFormat:
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
inputFormat="dd/MM/yyyy"
onError={(e) => {
setError(true);
}}
label="Date"
value={infos.date}
onChange={(newValue) => {
setInfos({ ...infos, date: newValue });
setError(false);
}}
renderInput={(params) => (
<TextField
color={error ? "error" : "primary"}
required
error={error}
helperText={error ? messageError.date : ""}
{...params}
/>
)}
/>
</LocalizationProvider>
While i setting value dynamically to react-datepicker throwing an error "RangeError: Invalid time value"
This is my datepciker code
<Controller
control={control}
className="form-control"
name="from_date"
render={({ field }) => (
<DatePicker
onChange={(e) => field.onChange(e)}
selected={field.value}
dateFormat="dd-MM-yyyy"
minDate={new Date()}
/>
)}
{...register("from_date", { required: true })}/>
This is how i setting value to datepicker
var mydate = moment(date_from_db, 'DD-MM-YYYY').format("DD-MM-YYYY");
setValue('date_field', mydate)
Can anyone explain whats wrong with my code?
Try doing
<Controller
control={control}
className="form-control"
name="from_date"
render={({ field }) => (
<DatePicker
onChange={(e) => field.onChange(e)}
selected={field.value}
dateFormat="dd-MM-yyyy"
minDate={new Date()}
/>
)}
{...register("from_date", { required: true })}/>
var mydate = moment(date_from_db).format("DD-MM-YYYY");
setValue('from_date', mydate)
I got the following datepickers.
For the Start Date:
<Controller
as={
<DatePicker
selected={travelRoute?.dateStart || new Date()}
selectsStart
startDate={travelRoute?.dateStart}
endDate={travelRoute?.dateEnd}
inline
/>
}
control={control}
rules={{ required: true }}
valueName="selected"
onChange={date => handleStartDateOnChange(date)}
name="dateStart"
placeholderText="Select date"
defaultValue={null}
/>
For the End Date:
<Controller
as={
<DatePicker
name="dateEnd"
selected={travelRoute?.dateEnd || new Date()}
onChange={date => handleEndDateOnChange(date)}
selectsEnd
startDate={travelRoute?.dateStart}
endDate={travelRoute?.dateEnd}
minDate={travelRoute?.dateStart}
inline
/>
}
control={control}
rules={{ required: true }}
valueName="selected"
onChange={date => handleEndDateOnChange(date)}
name="dateEnd"
placeholderText="Select date"
defaultValue={null}
/>
Do I need to add the datepicker props to the datepicker component or to the Controller Component?
The start Datepicker doesn't select the date and the end Datepicker doesn't change the startdate and isn't displaying the range.
I'm saving the data into the travelRoute state with setTravelRoute which is happening in the handleOnChange functions.
EDIT:
Added onChange handler:
const handleStartDateOnChange = date => {
setTravelRoute(prevState => ({
...prevState,
dateStart: date
}))
};
const handleEndDateOnChange = date => {
setTravelRoute(prevState => ({
...prevState,
dateEnd: date
}))
};
Ciao, you are using the wrong approach to customize your onChange event in DatePicker. And onChange event on Controller can't work neihter. Because in this case, you don't have to use as= syntax, but render= syntax like:
<Controller
render={({ onChange }) => (
<DatePicker
...
onChange={date => handleStartDateOnChange(date)}
/>
)}
...
/>
So your code becomes:
Start Date
<Controller
render={({ onChange }) => (
<DatePicker
selected={travelRoute?.dateStart || new Date()}
selectsStart
startDate={travelRoute?.dateStart}
endDate={travelRoute?.dateEnd}
inline
onChange={date => handleStartDateOnChange(date)}
/>
)}
control={control}
rules={{ required: true }}
valueName="selected"
name="dateStart"
placeholderText="Select date"
defaultValue={null}
/>
End Date
<Controller
render={({ onChange }) => (
<DatePicker
name="dateEnd"
selected={travelRoute?.dateEnd || new Date()}
onChange={date => handleEndDateOnChange(date)}
selectsEnd
startDate={travelRoute?.dateStart}
endDate={travelRoute?.dateEnd}
minDate={travelRoute?.dateStart}
inline
/>
)}
control={control}
rules={{ required: true }}
valueName="selected"
name="dateEnd"
placeholderText="Select date"
defaultValue={null}
/>
Here a working example.
Note: I don't know why DatePicker in codesandbox looks so ugly. Could be the Controller because in this other codesandbox looks good.
I have had a different approach to the solution of this issue and wanted to share it.
I answered some related issue in the following post: https://stackoverflow.com/a/72585781/19320134
Anyway, one way to make the code more reusable is to put these controllers in separate files, so that only the function name is imported when calling them.
export const DateRange = ({ name, control, label }) => {
const [dateRange, setDateRange] = useState([null, null]);
const [startDate, endDate] = dateRange;
return (
<Controller
//is a prop that we get back from the useForm Hook and pass into the input.
control={control}
//is how React Hook Form tracks the value of an input internally.
name={name}
//render is the most important prop; we pass a render function here.
render={({
//The function has three keys: field , fieldState, and formState.
field, // The field object exports two things (among others): value and onChange
}) => (
<>
<DatePicker
selectsRange={true}
startDate={startDate}
endDate={endDate}
onChange={(e) => {
setDateRange(e);
field.onChange(e);
}}
isClearable={true}
className="form-control"
/>
</>
)}
rules={{
required: `The ${label} field is required`,
}}
/>
And you can call it in the necesary file like this
import { useForm, Controller, FormProvider } from "react-hook-form";
import {DateRange} from "./your file !"
const defaultValues = {
dateRange: [],
};
export default function ComponentUsingDateRange() {
const methods = useForm({
defaultValues,
mode: "onChange",
});
const { register, handleSubmit, control, setValue } = methods;
return(
<>
<FormProvider {...methods}>
<DateRange
control={control}
name="dateRange"
label="Range of dates"
/>
</FormProvider>
</>
);
}