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!
Related
I have a react sign-up form. I want to set up an input (checkbox) that holds the value as some text - e.g:
<form onSubmit={this.validateStepTwo} id="registerForm">
<label htmlFor="short_bio">Tell the users a bit about yourself:</label>
<input type="textarea" name="short_bio" className="textarea-small"/>
<label htmlFor="bio_info">Tell the users who you are</label>
<input type="textarea" name="bio_info" className="textarea-large"/>
<label htmlFor="bio_exp">Tell the users what you did</label>
<input type="textarea" name="bio_exp" className="textarea-large"/>
<input type="checkbox" name="instructor" value="I want to be an instructor" />
<input type="submit" value="Register" className="submit"></input>
{this.state.errors !== null ? (
<h1 className="error">{this.state.errors}</h1>
) : ('')}
</form>
Where
<input type="checkbox" name="instructor" value="I want to be an instructor" />
should have a value of "I want to be an instructor" but it doesnt have anything.
I tried doing it like this:
<input ...>I want to be an instructor</input>
but that threw another error.
Is this a react thing or am i missing something in my code? Ive been on the computer for 13 hours so i wouldnt be surprised if i made a dumb mistake.
Checkbox input value is the one sent in the request and not the text that appears afterwards.
If you want it to be the text then do something like this
<input type="checkbox" name="instructor" value="instructor"> I want to be an instructor
I am using Stripe with my angularJs app. Although the code below works fine, I wanted a month, year drop down for the expiry date.
<form stripe-form="stripeCallback" name="checkoutForm">
<input ng-model="number" placeholder="Card Number"
payments-format="card" payments-validate="card" name="card"/><br>
<input ng-model="expiry" placeholder="Expiration"
payments-format="expiry" payments-validate="expiry"
name="expiry"/><br>
<input ng-model="cvc" placeholder="CVC" payments-format="cvc" payments-validate="cvc" name="cvc"/><br>
<button class="checkout" type="submit" ng-disabled="checkoutForm.card.$invalid">Checkout</button>
</form>
How do I integrate two drop downs with this form?
Thanks.
Something along these lines would probably give you what you need.
<select ng-model='expiry_month' ng-change='expiry=expiry_month+"/"+expiry_year'>...</select>
<select ng-model='expiry_year' ng-change='expiry=expiry_month+"/"+expiry_year'>...</select>
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.
Suppose I have the following setup:
<form>
<input type="text" id="text1">
<input type="text" id="text2">
</form>
In AngularJS, is there any way for me to determine when, say, the user deselects #text1, for example by clicking #text2, or clicking somewhere else on the screen? I am aware the ng-change lets me listen to changes in the value of #text1 itself, but I see no way to determine when the user actually leaves the field.
You can use ngBlur for this
https://docs.angularjs.org/api/ng/directive/ngBlur
<form>
<input type="text" id="text1" ng-blur="iHaveLostFocusDoSomethingWithIt()">
<input type="text" id="text2">
</form>
My web application uses forms laid out as in the example below...
First Name [____________]
Last Name [____________]
Gender () Male () Female
The markup I use is something like...
<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<label>Gender</label>
<fieldset>
<legend>Gender</legend>
<input type="radio" name="sex" id="sex-m" value="m">
<label for="sex-m">Male</label>
<input type="radio" name="sex" id="sex-f" value="f">
<label for="sex-f">Female</label>
</fieldset>
I have the following issues that I don't know how to solve...
I want to have the WHOLE GROUP of radio buttons labelled like any other field (as in the diagram above), but there is nothing to link the label to (i.e. nothing for its "for" attribute, since each radio in the group has its own label just for the value of the individual radio button) A label without a "for" attribute will not pass accessibility compliance.
The <legend> element of the fieldset seems to duplicate the function of the label. Is this really necessary?
I had thought about styling the <legend> tag to appear as though it's a label, and dispense with the label altogether for the radio button group, but that seems a bit hacky to me, and will also introduce complexities elsewhere in my code (which relies on <label> elements to do some nifty validation message markup and various other things)
Thanks in advance.
The first part of Ssollinger's answer is correct:
The code should be:
<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<fieldset>
<legend>Gender</legend>
<input type="radio" name="sex" id="sex-m" value="m">
<label for="sex-m">Male</label>
<input type="radio" name="sex" id="sex-f" value="f">
<label for="sex-f">Female</label>
</fieldset>
When assistive technology hits the male radio button, most will read as: "Gender: male radio button 1 of 2 not selected."
Then you could use CSS on the fieldset, legend, the labels and inputs. If memory serves correctly fieldsets can be a bear to style, so i might end up adding a <div> to it:
<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<fieldset>
<legend>Gender</legend>
<div>
<input type="radio" name="sex" id="sex-m" value="m">
<label for="sex-m">Male</label>
<input type="radio" name="sex" id="sex-f" value="f">
<label for="sex-f">Female</label>
</div>
</fieldset>
Adding this <div> has no accessibility implications.
Like in the comment in ssollinger's answer, you could dump the fieldset and legend approach, but you would need to build everything to make it accessible, an example of a build out
I had thought about styling the <legend> tag to appear as though it's a label, and dispense with the label altogether for the radio button group, …
This is the correct way to do it. "Gender" is not a label for anything, the labels for the radio boxes are "male" and "female". "Gender" is the legend of the fieldset which groups the radio buttons together. The correct way to implement this form is to remove the "Gender" label and just leave the fieldset with legend "Gender".
Technically, you could probably add a <div> around the radio buttons and point the for= of the "Gender" label to that, but I'm quite sure that this will cause accessibility problems (haven't tried it with a screen reader though) so I would strongly recommend to get rid of the label for "Gender".