I added a flag, but for some reason the window doesn’t close when choosing a date
https://www.npmjs.com/package/react-datepicker
<label className="label-block">
<DatePicker
selected={date}
onChange={handleChange}
placeholderText="Выберите день"
minDate={moment().toDate()}
shouldCloseOnSelect={true}
/>
</label>
keep it out of label tag easy.
Related
Hi so I'm learning about razor, and razor pages; and I'm working on adding items to a simple db.
I noticed something odd with the input in my form when I try to enter a Quantity (should be a int) it throws an error when I press 1 or any number; and says it should be string/Array/collection? Whats that about??
code excerpt from Products.razor:
#if (products != null) // Insert form
{
<EditForm Model="#product" OnValidSubmit="#HandleAdd">
<DataAnnotationsValidator />
<ValidationSummary />
<InputText placeholder="Product Name" id="ProductName" #bind-Value="#product.ProductName" />
<br />
<InputText placeholder="Unit of Measurement" id="Unit" #bind-Value="#product.Unit" />
<br />
<InputNumber min="1" step="1" placeholder="Quantity" id="Quantity" #bind-Value="#product.Quantity" />
<br />
<InputNumber min="0.01" step="0.01" placeholder="Unit Price" id="UnitPrice" #bind-Value="#product.UnitPrice" />
<br />
<InputText placeholder="Category" id="Category" #bind-Value="#product.Category" />
<br />
<button type="submit">Submit</button>
</EditForm>
Wierd error in colsole:
I did notice someone had an idea on a un-related question:
Blazor EditForm adding InputNumber fields
But I treid that and its still not working; and additionally with this form code; now the little green border box indicating valid input doesnt light up.
Any help would be appreciated :D
Made a mistake in the constrution of my Product class applying a [MaxLength] attribute to my Quantity.
Removed it, add new migrations, and now it works :)
I've got a React web app using bootstrap 4 and Reactstrap. I want to have several checkboxes in a toolbar and I can't figure out how to get anything out of the onChange event besides "on".
Here is my code that continues to write "on" to the console every time I click the checkbox. The checkbox does toggle on and off.
<li className="show-sessions">
<FormGroup check>
<Label check>
<Input
type="checkbox"
onChange={(e) => console.log(e.target.value)}
/>{" "}
<strong>Show Favorites</strong>
</Label>
</FormGroup>
</li>
Is there another way to make a checkbox in Reactstrap? The doc's are very limited.
you can check checked state rather than value; it is a boolean
<Input
type="checkbox"
onChange={(e) => console.log(e.target.checked)}
/>
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!
Using SimpleTest, how would I check the third checkbox if they all share the same name?
<input type='checkbox' class='style' name='same' value="First" />
<input type='checkbox' class='style' name='same' value="Second" />
<input type='checkbox' class='style' name='same' value="Third" />
<input type='checkbox' class='style' name='same' value="Forth" />
Alternatively, when I get() the URL using SimpleTest, can I somehow add ID's to the inputs?
I have figured it out. This toggled the correct box..
$browser->setField("same", array("Third"));
I am using the new Woocommerce bookings and would like the calendar to be displayed permanently, instead of having users click the "choose" option that then displays the text.
I am too much of a novice to display pictures in this foru, so here is the link instead.
I would like the bottom one to be displayed permanently.
The source code looks like this:
<fieldset class="wc-bookings-date-picker wc_bookings_field_start_date">
<legend>Start Date: <small>Choose...</small></legend>
<div class="picker" data-availability="[["days",{"6":true}],["days",{"4":true}],["time",{"from":"11:30","to":"13:30","rule":true,"day":0}]]" data-default-availability="false" data-fully-booked-days="{"2014-6-8":[true]}" data-min_date="+0d" data-max_date="+12m"></div>
<label>
<input type="text" value="2014" name="wc_bookings_field_start_date_year" placeholder="YYYY" size="4" class="required_for_calculation booking_date_year" />
<span>Year</span>
</label> / <label>
<input type="text" name="wc_bookings_field_start_date_month" placeholder="mm" size="2" class="required_for_calculation booking_date_month" />
<span>Month</span>
</label> / <label>
<input type="text" name="wc_bookings_field_start_date_day" placeholder="dd" size="2" class="required_for_calculation booking_date_day" />
<span>Day</span>
</label>
not sure if you figured this out yet or not, but Bookings now has a selection button to always show the Datepicker. Edit your Bookings product, and on the General tab, next to Calendar display mode select Calendar always visible from the drop-down menu. That should do it, no coding needed!