I have a formsy form with a bunch of Inputs. I can see the value of those inputs in the onValidSubmit function. One example of such an input is the following:
<Input
name="myStartDate"
id="myStartDate"
value=""
label="Start Date (YYYYMM)"
type="tel"
validations={{
matchRegexp: /^(19|20)\d\d(0[1-9]|1[012])$/
}}
validationErrors={{
matchRegexp: 'Enter the year and month (YYYYMM).'
}}
placeholder="YYYYMM"
required
/>
In the formsy form I have:
onValidSubmit={this.onValidSubmit}
The function only logs the form data:
onValidSubmit(formData){
console.log(formData);
}
I want to change this input to be a react-datepicker component (DatePicker), however, after I make the necessary changes to make the DatePicker work, the "formData" object in the onValidSubmit no longer contains the value for "myStartDate". What should I do to make this work?
My DatePicker component looks like this: (it's basically the same as the Input but with some additional stuff)
<DatePicker
name="myStartDate"
id="myStartDate"
value=""
label="Start Date (YYYYMM)"
type="tel"
validations={{
matchRegexp: /^(19|20)\d\d(0[1-9]|1[012])$/
}}
validationErrors={{
matchRegexp: 'Enter the year and month (YYYYMM).'
}}
placeholder="YYYYMM"
required
placeholderText="ÅÅÅÅMM"
dateFormat="YYYYMM"
className="form-control"
selected={this.state.myStartDate}
onChange={this.myStartDate}
isClearable={true}
/>
I know that DatePicker handles dates using the moment.js and I will handle this change accordingly, however, as I said before, "myStartDate" no longer shows up in the "formData" object passed to "onValidSubmit". What gives?
Thank you very much for your help!
Related
Here's the code for the ionic component in question:
<IonInput
name="startTreatmentDate"
type="date"
className={!startTreatmentDate ? 'hide-picker' : ''}
id="date-picker"
value={startTreatmentDate}
spellCheck={false}
autocapitalize="off"
onIonChange={(e) => checkDateOfBirth(e.detail.value!)}
required={true}
placeholder="MM/DD/YYYY"
/>
This item renders in the DOM as:
<ion-input name="startTreatmentDate" type="date" id="date-picker" value="" autocapitalize="off" placeholder="MM/DD/YYYY" class="hide-picker sc-ion-input-md-h sc-ion-input-md-s md hydrated"><input class="native-input sc-ion-input-md" aria-labelledby="ion-input-0-lbl" autocapitalize="off" autocomplete="off" autocorrect="off" name="startTreatmentDate" placeholder="MM/DD/YYYY" required="" spellcheck="false" type="date">
::before
<input class="native-input sc-ion-input-md" aria-labelledby="ion-input-0-lbl" autocapitalize="off" autocomplete="off" autocorrect="off" name="startTreatmentDate" placeholder="MM/DD/YYYY" required="" spellcheck="false" type="date">
</ion-input>
Below are the list of commands I'm currently using.
Expected:
Selenium IDE should accept click commands to select date from calendar.
Tried:
I've tried using the Selenium IDE Commands to click the input, and select a date; but the "Select" for the date gets registered as a keystroke rather than a click while recording. The click command also doesn't bring up the calendar for the date picker, so I can't even force the clicks by tracking their x/y and using that.
I've also tried using execute script to fire off JS to inject values, which only partially works, as it sets the inputs value without updating the value in the input itself (as pictured).
I feel like I've tried just about everything short of trying to rewrite the input itself.
I've been messing with semantic-ui for a while and came across this Field Error section in the documentation. The code looks like this:
<Form.Input
error={{ content: 'Please enter your first name', pointing: 'below' }}
fluid
label='First name'
placeholder='First name'
id='form-input-first-name'
/>
The result is a error state, where the input field turns red and a message appears. But the documentation doesn't quite show how to implement this behaviour, if you just put this error prop inside the component it'll just stay permanently red.
I am currently using react-hook-form for validation and to display error. My input fields look like this:
<Form.Field>
<Form.Input
label="Name"
placeholder="Enter the cat's name" type="text"
{...register("name", { required: true, minLength: 2, maxLength: 30 })}
/>
<p>
{errors.name?.type === "required" && "You need to write the cat's name"}
</p>
</Form.Field>
It would look really nice to display that kind of behaviour (all red with error messages when the user attempt to submit with an empty field) but I just can't figure out how to do it. Any suggestions?
I have to format the date to DD-MMM-YYYY format. I Am using reactjs. The date is formatted in IE but not in Google Chrome. Please suggest.
<input name="requested_order_ship_date" type="date"
disabled={ this.state.mode }
value={ moment(this.state.item.requested_order_ship_date).format("DD-MMM-YYYY") }
className="form-control" onChange={ this.handleInputChange } />
This actually has nothing to do with React. for <input type="date"> values, Chrome expects the value of the date to be in YYYY-MM-DD format.
See Is there any way to change input type="date" format? for more info.
I am using react time picker(rc-time-picker) in my code, I want to set the time picker value dynamically.
Here is my Time Picker Code
<span id="editstartTime">
<span class="rc-time-picker timeStylstartTimeAdd">
<input type="text" class="rc-time-picker-input" readonly="" value="">
<span class="rc-time-picker-icon"></span>
</span>
</span>
And I tried like this.
$('#editstartTime span input').val(this.state.shifts[index].startTime);
But it did not worked for me.
Please help me to overcome this issue.
Thanks in advance.
TimePicker has a value state of type moment, which holds the current value.
so e.g. if you instantiate with a state called timePickerValue:
<TimePicker value={this.state.timePickerValue} ... />
then you can modify timePickerValue using
this.setState({timePickerValue: newValue})
(In your example newValue would be this.state.shifts[index].startTime)
I suggest you try out this example as it shows how to mutate the TimePicker.value state.
const now = moment().hour(0).minute(0);
<TimePicker
showSecond={false}
value={moment().hours(13).minute(1)}
className="time-picker"
placeholder="HH:MM"
onChange={(e) => {
console.log(e);
console.log(moment(taskCreateFormData.startTime));
onTimeChange(e, 'start');
}}
format={format}
use12Hours
/>
if you take format for use12Hours then if you write moment().hours(13).minute(1) time like this then it will convert to PM time format
I have a date input like this:
<input type="date" name="input" ng-model="date" placeholder="yyyy-MM-dd" class="form-control"/>
Now I want show calendar when click the input. How to controller the date calendar?
<input type="date"> is implemented on the level of the browser. I use Chrome and I do see datetime field.