React-datepicker and react-hook-form. I am trying to make react-datepicker required, but its not working
<Controller
name="resetDateTime"
control={control}
required
render={({ field }) => (
<Datetime
onChange={(date) => field.onChange(date)}
selected={field.value}
inputProps={{
placeholder: "MM-DD-YYYY HH:mm",
}}
viewMode="time"
/>
)}
/>
{errors.resetDateTime && <span>This field is required</span>}
When I submit form without selecting any datetime, I am expecting the error to be show, but instead it submits the form
<Controller /> has no required prop, instead of you have to pass the validation rules via the rules prop. Check the docs for more info.
<Controller
name="resetDateTime"
control={control}
rules={{ required: true }}
render={({ field }) => (
<Datetime
onChange={(date) => field.onChange(date)}
selected={field.value}
inputProps={{
placeholder: "MM-DD-YYYY HH:mm",
}}
viewMode="time"
/>
)}
/>
{errors.resetDateTime && <span>This field is required</span>}
Related
I'm trying to load a file using React hooks form and yup, but by wrapping the input type file component in Controller I get instead of the usual Blob, system paths like value
Example of result:
C:\\fakepath\\image.jpeg
Expected result
Blob file
Code example:
Link to sandbox: https://codesandbox.io/s/react-select-with-react-hook-form-forked-4t6ncr?file=/src/App.js
Code:
<form onSubmit={handleSubmit(saveData)}>
{!countryValue && (
<Controller
name="country"
control={control}
render={({ onChange, value, ref }) => (
<Select
options={country}
value={country.find((c) => c.value === value)}
onChange={(val) => onChange(val.value)}
/>
)}
rules={{ required: true }}
/>
)}
{countryValue && (
<Controller
name="country"
control={control}
render={(field) => {
const { onChange } = field;
return <input {...field} type="file" onChange={onChange} />;
}}
rules={{ required: true }}
/>
)}
{errors.country && <div>Field is rquired</div>}
<button type="submit">Save</button>
</form>
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>
I am trying to configure a react-hook-form to work for create and update operations. I am using material ui autocomplete and textfield.
The problem I am facing is with a field that has autocomplete.
If I pass an input value, it displays it, but when the form is submitted, the required error is triggered (as if the field has not been filled in).
This is my code:
<Controller
control={control}
name="type"
render={({ field: { onChange, value }, fieldState: { error } }) => (
<Autocomplete
value={value}
onChange={(event, item) => {
onChange(item.value);
}}
id="type"
defaultValue={props.operation === 'edit' ? props.values.type : null}
options={projectTypes}
renderInput={(params) => <TextField {...params}
error={!!error}
helperText={error ? error.message : null}
label="type"
{...register('type')}
/>}
/>
)}
rules={{ required: 'Project type is required' }}
/>
I have tried to add the input value as "inputValue", but then my options, are not available and I cannot either clear the value from the field.
Any ideas on what is wrong here?
The problem is you're using both <Controller /> and register to register your field.
You should only use one of them, in your use case you should use <Controller /> and get rid of the register call inside your <TextField />.
You should also pass the defaultValue for your field to <Controller /> instead of passing it to <Autocomplete />.
<Controller
control={control}
name="type"
defaultValue={props.operation === 'edit' ? props.values.type : null}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<Autocomplete
value={value}
onChange={(event, item) => {
onChange(item.value);
}}
id="type"
options={projectTypes}
renderInput={(params) => (
<TextField
{...params}
error={!!error}
helperText={error ? error.message : null}
label="type"
/>
)}
/>
)}
rules={{ required: 'Project type is required' }}
/>
I am validating a material UI KeyboardDatePicker with react-hook-form:
<Controller
name="endDate"
control={control}
defaultValue={new Date()}
rules={{
required: "End date is required"
}}
render={({ field, fieldState }) => {
return (
<KeyboardDatePicker
autoOk
variant="inline"
inputVariant="standard"
label="End Date"
format="MM/dd/yyyy"
value={field.value}
InputAdornmentProps={{ position: "start" }}
onChange={() => {
field.onChange();
}}
error={(!!fieldState.error || field.value === 'Invalid Date')}
helperText={
fieldState.error ? fieldState.error.message : null
}
/>
);
}}
/>
It works fine and throws the message "End date is required" if KeyboardDatePicker is empty. However I also need to throw an error message "Invalid date format" if user edits the date and removes a couple of characters like '06/01/2021' to '06/01/20__'. This functionality works built-in and works fine in isolation i.e. if I don't combine date picker with react-hook-form.
However I am not getting how to achieve this in combination with react-hook-form. I tried to modify helperText but to no avail.
This is how I do it :
<Controller
name="endDate"
control={control}
defaultValue={new Date()}
rules={{ required: true }}
render={({ field: { ref, ...rest } }) => (
<KeyboardDatePicker
margin="normal"
id="date-picker-dialog"
format="dd/MM/yyyy"
disablePast={true}
initialFocusedDate={Date.now()}
KeyboardButtonProps={{
"aria-label": "change end date",
}}
invalidDateMessage={"End date is required"}
{...rest}
/>
)}
/>
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)