I have issue with date picker implementation. I am using this date picker:
https://www.npmjs.com/package/react-mobile-datepicker
I am also using redux-form.
Could someone check my code and give me some tips what might be wrong.
It is doing nothing. No error, nothing is happening.
import { Field } from 'redux-form';
import DatePicker from 'react-mobile-datepicker';
renderDatePicker = () => <DatePicker dateConfig={dateConfig} showCaption={true} />
<Field
name="date"
type="date"
component={this.renderDatePicker}
label={"date"}
/>
You have to manage the attribute isOpen in <DatePicker>, which has the control over the display of the component.
If isOpen is true, it is visible else it's invisible.
So in <DatePicker> manage the attribute isOpen by maintaining state and further like,
<DatePicker isOpen={this.state.isOpen} dateConfig={dateConfig} showCaption={true} />
Related
I have problem using react-hook-form v7 + material-ui textfield. The defaultValue working if I set autoFocus or I manually change the textfield value. However if I just submit without mouse click on the filed that not autoFocus, the defaultValue disappeared during the form submit. Please check codesandbox link
Test 1: don't touch anything, click submit, you will see submit value only has title but missing name and desc
Test 2: mouse click or change value in name, you will see after submit the value of name is there
My question is how to make this default value always submit even though without mouse click or change the value of the textField?
Please help and thanks in advance
To use Material-ui with react-hook-form. It is better to wrap it with Controller to allow react-hook-form to link with the 3rd party library element.
https://react-hook-form.com/api/usecontroller/controller
Wrap Textfield with Controller
const { handleSubmit, control } = useForm();
...
<Controller
render={({ field }) => (
<TextField
autoFocus
margin="dense"
id="title"
label="Title"
type="text"
fullWidth
{...field}
/>
)}
control={control}
name="title"
defaultValue={data.title}
/>
...
After that, the default value will be able to work as expected.
Here is the codesandbox for demo.
I am working on a project that is using Formik for React specifically the following NPM package - https://www.npmjs.com/package/formik-material-ui-pickers
I am using the code from the CodeSandbox link/example within this npm package for both -
https://codesandbox.io/s/915qlr56rp?file=/src/index.tsx:4770-4987
<Field component={TimePicker} name="time" label="Time" />
<Field component={DatePicker} name="date" label="Date" />
My question is, instead of a date and time appearing at start-up, how can I default the date to display DD-MM-YYYY as a placeholder as well as default the time to display HH:MI:SS as a placeholder?
Only when the user selects a date and time, do I want it to display and update Formik's initialValues.
I have checked the doco over at https://material-ui-pickers.dev/api/TimePicker and https://material-ui-pickers.dev/api/DatePicker and cannot see anything that will allow a default or placeholder value.
You need to do a custom DatePicker and put format into it
Solution
const CustomDatePicker = ({...props}) => (
<DatePicker format="dd-MM-yyyy" {...props} />
);
<Field component={CustomDatePicker} name="date" label="Date" />
// Do similar for TimePicker
I currently have a react-hook-form managed form that I've added an antd RangePicker to. I'm having issues with updates to the RangePicker getting passed to the form object. Currently, the default values are passing fine but it's not taking any changes.
OnChange events seem to be being handled by the standard Controller method with the other field types (Input, etc.). My guess is I have to write something custom here but I'm not sure. Thanks in advance for any help.
Here is my current antd DatePicker that is being managed with react-hook-forms Controller method.
EDIT: Updated my code to use the render method in react-hook-form v6+ as opposed to the as method. I also noticed if I don't pass any defaultValue then the RangePicker accepts and passes both the start and end dates fine. But when I set the defaultValue it always returns the default start date twice.
<Controller
name="materialarrivalpickup"
control={control}
defaultValue={[
moment(user.project.projectmaterialarrival),
moment(user.project.projectmaterialpickup),
]}
rules={{ required: true }}
render={(props) => (
<RangePicker
{...props}
format="MM/DD/YYYY"
onChange={(e) => {
props.onChange(e);
console.log("Range Picker " + e);
}}
/>
)}
/>
Figured this out. Apparently, react-hook-form was properly passing the RangePicker changes to my form object I just couldn't tell based on the log.
When I update the picker the Moment object (two dates) wasn't looking updated in the log produced by react-hook-form watch() (both look like they're 3/3/2020).
But when I expand the Moment object I'm getting my updated dates (3/3/2020 and 3/5/2020).
I'll leave my working RangePicker + react-hook-form code here for anyone else that needs it.
<Controller
name="materialarrivalpickup"
style={{ marginBottom: "8px" }}
control={control}
defaultValue={[
moment(user.project.projectmaterialarrival),
moment(user.project.projectmaterialpickup),
]}
rules={{ required: true }}
render={(props) => (
<RangePicker
{...props}
format="MM/DD/YYYY"
onChange={(e) => {
props.onChange(e);
console.log("Range Picker: " + e);
}}
/>
)}
/>
The DatePicker is in a wrapper component and although the error message is displaying correctly but it isn't invalidate the field or form if the date is set as incorrect. I know about the onError callback function but I don't know what to call here. The validation is not occuring on onSubmit hence can't use the SubmissionError or submitfailed.
I can pass an external validator from form field but I just leave it as a last option.
Date Picker
<InlineDatePicker
format={DATE_FORMAT_UI}
keyboard
mask={mask}
maxDate={maxDate}
minDate={minDate}
placeholder={DATE_FORMAT_UI}
value={formattedStoreValue}
variant="outlined"
onBlur={this.handleBlur}
onChange={this.handleChange}
**onError={(_,error)=>{ don't know what to do here })}**
{...other}
/>
Form Field
<Field
name={someDate}
component={InlineDatePickerField}
**validate={[required]} //If not possible then add another validator here as last option**
id={someDate}
label="To"
minDate={this.minDate()}
required
className="w-full"
/>
In default semantic-ui we can do this option: https://github.com/Semantic-Org/Semantic-UI/commit/b4ae26d24f75886c3d5f6fc4f00e176f09705a13
But, how to do it in semantic-ui-react? Google nothing say about it, please, I need help.
What I'm trying to achieve:
I'm using redux-form. In my form present semantic component <Form.Select multiple ....> and after success submit - call to redux-form method reset. All is fine, form is clear... but not dropdown/select field. Any ideas?
I solved the problem as follows:
Semantic-ui-react props value set to the current value of the field.
<Form.Select
name={input.name}
options={options}
label={label}
placeholder={placeholder}
search
multiple
selectOnBlur={selectOnBlur}
onFocus={::this.handleFocus}
onBlur={::this.handleBlur}
onChange={::this.handleChange}
defaultValue={defaultValue || []}
value={input.value}
loading={loading} />