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.
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 am using simple angularjs input type = date for displaying date picker.
How to disable the previous dates means dates before the current dates.
html is like
<input class="form-control" type="date" name="sevadate" ng-model="sevadate" min-date="" placeholder="yyyy-MM-dd" ng-required="true" /> //What do i write in min-date..
change min-date="" to min="2017-12-30"
or you can do something like this min="{{minDate | date:'yyyy-MM-dd'}} " and on the controller
$scope.minDate = new Date();
<input class="form-control" type="date" name="sevadate" ng-model="sevadate" min="2017-04-12" placeholder="yyyy-MM-dd" ng-required="true" /> //What do i write in min-date..
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>
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>
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!