Im having an issue with the datepicker component. I have tried multiple things but the date I am passing will not display in the datepicker. I just set the fields in the beginning of my component. The warrantynotes field shows just fine. I get different errors depending on what I try but mostly :
TypeError: date.clone is not a function
format
form.setFieldsValue({
datepurchased: e.datepurchased,
warrantynotes: e.warrantynotes,
})
<Form.Item
name={'datepurchased'}
label="Date Purchased:"
// defaultValue={moment(warranty.datepurchased)}
// format={dateFormat}
// defaultPickerValue={moment(warranty.datepurchased)}
>
<DatePicker
onChange={handleChange}
// defaultValue={moment(warranty.datepurchased)}
// format={dateFormat}
// defaultPickerValue={moment(warranty.datepurchased)}
></DatePicker>
</Form.Item>
I tried to change your code, use defaultValue instead defaultPickerValue
const { DatePicker, Space } = antd;
function handleChange() {}
const myDate = "2021-01-07";
ReactDOM.render(
<Space direction="vertical" size={12}>
<DatePicker onChange={handleChange} defaultPickerValue={moment()} />
<DatePicker onChange={handleChange} defaultValue={moment()} />
<DatePicker onChange={handleChange} defaultValue={moment(myDate)} />
</Space>,
mountNode
);
Related
I'm having a hard time integrating material Ui Slider with React hook form. It's not registering the values. It's printing the value as undefined on console.log. Got an idea where I might be wrong?
<Controller
render={({ field: { value, onChange } }) => (
<CustomSlider
onChange={onChange}
value={value}
max={60}
marks={marks}
className={classes.slider}
defaultValue={10}
/>
)}
control={control}
name="slider"
/>
Here is codesandbox made by author of react-hook-form that contains many examples. Mui integration is also made.
According to example, you are supposted to do something like this:
<Controller
name="MUI_Slider"
control={control}
defaultValue={[0, 10]}
render={(props) => (
<Slider
{...props}
onChange={(_, value) => {
props.onChange(value);
}}
valueLabelDisplay="auto"
max={10}
step={1}
/>
)}
/>
Another question is in which part of your code are you trying to console.log() values.
You can use watch() method or
<button Click={() => console.log(getValues())}>get values</button>
I'm trying to use OutlinedInput with KeyboardDatePicker, both from Material UI. I'm passing a DatePicker as input component to 'OutlinedInput' component of Material UI. I want to know how to get date from the inputComponent I'm passing.
With the following code I'm getting "_onChange is not a function" error.
const handleInputChange = (event) => {
if (event.target.name === "deliveryDate") {
temp.deliveryDate = event.target.value;
}
}
function datepicker() {
return <MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
name="deliveryDate"
format="MM/dd/yyyy"
value={projectDetails.deliveryDate}
onChange={props.handleInputChange} /> //not sure if this is how I should write it
</MuiPickersUtilsProvider>;
}
return(
<OutlinedTextBox
name="deliveryDate"
id="deliveryDate"
maxlength={20}
onChange={handleInputChange}
inputComponent = {datepicker} //passing the KeyboardDatePicker as input component
inputLabel="Delivery Date" />
)
Below is my OutlinedTextBox component. It returns
<OutlinedInput
name={props.name}
inputProps={{
maxLength: props.maxlength?props.maxlength:100,
}}
onChange={props.handleInputChange}
{...props}
/>
How to capture onChange function of inputComponent attribute.
Update
From what you said in your comment, all you actually have to do then is edit your datepicker component. You dont need to pass in the value, onChange or name directly as those are already being passed in as props from when you use inputComponent={datepicker}. So all you need to do is declare the props and spread them all into the KeyboardDatePicker.
const DatePicker = (props) => {
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
format="MM/dd/yyyy"
{...props}
/>
</MuiPickersUtilsProvider>
);
};
Original Answer.
You could just add the inputVariant="outlined"property to the KeyboardDatePicker as that will make it outlined. Then you dont actually need to use the OutlinedInput component at all.
<KeyboardDatePicker
name="deliveryDate"
format="MM/dd/yyyy"
value={projectDetails.deliveryDate}
onChange={props.handleInputChange}
inputVariant="outlined
/>
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.
So, the main problem is, that antd form does not detect my custom input based on antd standard input:
There is a piece of form code (AddProduct):
<Form.Item
className="m-t-10"
name="price"
rules={[
{
required: true,
message: `${t('FORM.ERR.SHOP.PRICE')}`,
},
]}
>
<CurrencyInput size="small" placeholder={t('FORM.SHOP.PRICE_VAT')} name="price" />
</Form.Item>
There is my custom input (CurrencyInput):
return (
<Input size={props.size} placeholder={props.placeholder} name={props.name} type="number" prefix={settings[6].value} />
)
The problem is when I try to submit the form it does not detect currency input, throws err that this field is required. Any ideas are it possible to implement custom input, basically, it's more HOC than custom input
You need to pass to your custom component all props, because Form.Item pass to there onChange and value props
function CustomInput({size, placehodler, name, ...restProps}) {
return (
<Input size={size} placeholder={placeholder} name={name}
type="number" prefix={settings[6].value} {...restProps} />
)
}
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)}
/>