I'm using date picker in redux form. I want to show only year. But while posting data year field is going NULL in database.
Can anyone help me.
This is my code :
const renderDatePicker = ({input, placeholder, defaultValue, meta: {touched, error} }) => (
<div>
<DateTimePicker {...input} format={"YYYY"} selected={input.value ? moment(input.value) : null} time={false} initialView={"decade"} finalView={"decade"} />
{touched && error && <span>{error}</span>}
</div>
);
<Field name="year" component={renderDatePicker} />
Thanks
you have to pass all props to DateTimePicker props in the correct way. I don't know how is working DateTimePicker component, but when you do
<DateTimePicker **{...input}** format={"YYYY"} selected={input.value ?
moment(input.value) : null} time={false} initialView={"decade"}
finalView={"decade"} />
{touched && error && <span>{error}</span>}
Into DateTimePicker has to assign redux-form input to its input prop, else always you will get null in that case. Also you can check in redux-form with property function 'validate' every time when you change that value you should see it.
edit:
I was looking for some issues like this, because I have to do something looked like in DatePicker for React-Native, in that case we don't have input but I have used in this way:
<Field name="birthday"
component={ props =>
<DatePicker
date={props.input.value}
onDateChange={(date) => props.input.onChange(moment(new Date(date)).format("MM/DD/YYYY"))}
/>
}/>
It's not best way, but this solution could help your case.
Related
I'm using the react-datepicker inside the react-final-form. I'm using a template with multiple steps https://codesandbox.io/s/km2n35kq3v?file=/index.js. The problem is that I'm not able to integrate the datepicker inside the component. My Code looks like this:
return (
<Field name={props.name} parse={() => true}>
{props => (
<DatePicker
locale="de"
placeholderText="Datum eingeben"
selected={startDate}
dateFormat="P"
openToDate={new Date()}
minDate={new Date()}
disabledKeyboardNavigation
name={props.name}
value={startDate}
onChange={(date) => setStartDate(date)}
/>
)}
</Field>
);
Does anyone knows how I can use it so the data gets passed at the end of the form?
Best regards
I used the wizard form example you sent and added DatePicker similar to yours.
Check the wizard example
But basically, I changed your onChange method to actually use react-final-form field props. Now, it uses this.props.input.onChange, which updates the final form state value, and used this.props.input.value to set the selected state (you can then load initial values into final form):
const RenderDatePicker = ({ name, input, input: { value, onChange } }) => {
return (
<DatePicker
locale="de"
placeholderText="Datum eingeben"
dateFormat="P"
selected={value && isValid(value) ? toDate(value) : null} // needs to be checked if it is valid date
disabledKeyboardNavigation
name={name}
onChange={(date) => {
// On Change, you should use final-form Field Input prop to change the value
if (isValid(date)) {
input.onChange(format(new Date(date), "dd-MM-yyyy"));
} else {
input.onChange(null);
}
}}
/>
);
};
<div>
<label>Date of birth</label>
<Field
name="dateOfBirth"
component={RenderDatePicker}
validate={required}
/>
<Error name="dateOfBirth" />
</div>
Hopefully this helps you.
I have set up the following form using Formik:
const RenderForm = ({ errors, isSubmitting, isValid, touched }) => {
return (
<Form>
<h3>Sign Up</h3>
<Email
name="email"
error={touched.email && errors.email ? 'error' : null}
/>
<Password
name="password"
error={touched.password && errors.password ? 'error' : null}
/>
<Button disabled={!isValid || isSubmitting} type="submit">
Submit
</Button>
{/* {errors.firebaseErrorMessage && ( */}
{/* <Help>{errors.firebaseErrorMessage}</Help> */}
{/* )} */}
</Form>
)
}
The Email component and the Password components are just wrappers for the Formik Field Component. I want to be able to add a red border a particular field if it fails validation.
To do that, I have set up a conditional for the error prop. IF it is touched AND IF the error is passed, then it renders that prop with a value of 'error'.
Now there are a few problems with this.
FIRST PROBLEM
I don't need to render a value of 'error' (or any other value) to the error attribute. I just need to have the attribute 'error' itself (without any value) and then it will be styled appropriately.
SECOND PROBLEM
It's a bit annoying to write out the same conditional test for each field. I would like to know if there is something like the ErrorMessage component, except for a prop. Basically, something like this:
<Email name="email" errorProp />
<Password name="password" errorProp />
The idea being that errorProp will set an attribute of 'error' if an error exists and nothing if an error does not exist.
So here is my question...
How can I create my own errorProp or, at the very least, simplify what I am trying to do?
Thanks.
I have a field in a form that I want to render based on another field's value.
I listen to "OnChange" event of the field, and then trigger form.change of the new field (which is not rendered yet), but it won't get the value while rendered.
I created a sandbox for the issue: https://codesandbox.io/embed/priceless-keldysh-gfd3b
THe expected result: when selecting "Heat", scaling factor should be displayed and get the value '1'
What is the best practice to solve that? assuming there are a lot of dependencies inside a form.
Since <Form /> need visible <Field /> for subscribe
but your field scalingFactor would be removed when values.meterType !== "heat"
{values.meterType && values.meterType === "heat" && (
<Field name="scalingFactor" component="input" />
)}
You need to change your code as bellow:
<Field name="scalingFactor">
{({ input }) => {
return (
<React.Fragment>
{values.meterType && values.meterType === "heat" &&
<input {...input} />
}
</React.Fragment>
);
}}
</Field>
I am using Formik and React-Quill in my form,
The value seems to be updating when i use <input> but when i plug-in <ReactQuill /> it's not.
Is there something wrong with the setup?
<Field
name="designation"
value={this.props.values.designation}
render={({ field /* _form */ }) => (
// <input {...field} placeholder="designation" />
<ReactQuill
{...field}
/>
)}
/>
For anybody who is still interested in the answer (like I was), you can find it here:
<Formik initialValues={{ designation: '' }}>
<Field name="designation">
{({ field }) => <ReactQuill value={field.value} onChange={field.onChange(field.name)} />}
</Field>
</Formik>
This helps match formik field to ReactQuill props.
I am using "setFieldValue" to update changes. This is working perfectly fine for dynamic Formik forms.
<ReactQuill
value={values.description}
onChange={v => setFieldValue('description', v)}
/>
I'm trying to use react-datepicker in my project and I have it wrapped so I can easily use it with redux but the openToDate prop doesn't seem to be doing anything. Has any one else experienced this and/or found a fix/workaround.
Here's my control
export function renderDatePicker ({input, placeholder, defaultValue, meta: {touched, error}, ...custom }){
return (
<div className="form-group">
<DatePicker
{...input}
{...custom}
dateFormat="MMDDYYYY"
selected={input.value ? input.value : null}
placeholderText={placeholder ? placeholder : ''}
isClearable={!custom.disabled}
className="form-control" />
{touched && error && <span className="error">{error}</span>}
</div>
);
}
And how I use it...
<Field name="StartdDate"
component={renderDatePicker}
openToDate={this.props.minDate}
minDate={this.props.minDate}
maxDate={this.props.maxDate}
placeholder="Select Start Date"
showMonthDropdown
showYearDropdown />
Most of my use cases limit the selectable dates to previous years and limit it to only that year (i.e January 1, 1990 - December 31 1990). So always opening to the current date is kind of annoying, which is why I'd like openToDate to open to the minimum allowed date. For some reason though it always opens to the current date.
The only way I got it to open to the min date was to set selected to default to defaultValue and pass in this.props.minDate as the defaultValue. But I don't want the date to be pre-selected.
I found that downgrading the version to v.0.40.0 fixes the problem and opens to the openToDate value or the maxDate if no openToDate is set.