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.
Related
Following is such an element(textbox):
<input aria-invalid="false" autocomplete="off" id="multiple-limit-tags" required="" type="text" class="MuiInputBase-input MuiOutlinedInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd" aria-autocomplete="list" autocapitalize="none" spellcheck="false" value="">
When I click in this textbox, a dropdown opens and following attribute appears
aria-activedescendant='multiple-limit-tags-option-0' (this 0 to 20)
But when I try to right-click and click anywhere, the dropdown closes.
Unable to capture them with xPath
Click on the textbox and then try using key press events and select the value.
I am using Angular bootstrap datepicker, only problem i have with translate, because I am using multilanguage application.
The problem I have is with button translate, i know i can easy translate CLOSE, and Reset button, but Today always stay the same, if I try somthing like this
<input type="text" class="form-control" value="22-22-2222"
uib-datepicker-popup="{{model.dateFormat}}"
ng-model="model.project.startDate"
is-open="model.startDateProjectPickerOpened"
close-text="Zatvori"
today-text="Danas"
clear-text="Obrisi"
alt-input-formats="altInputFormats"
name="projectStartDate"
required
ng-class="{'error':submitted && addNewProjectForm.projectStartDate.$invalid}" />
I got this
Only blue button didnt change value, even if i have tried today-text="Danas"
Use current-text insted of today-text
<input type="text" class="form-control" value="22-22-2222"
uib-datepicker-popup="{{model.dateFormat}}"
ng-model="model.project.startDate"
is-open="model.startDateProjectPickerOpened"
close-text="Zatvori"
current-text="Danas"
clear-text="Obrisi"
alt-input-formats="altInputFormats"
name="projectStartDate"
required
ng-class="{'error':submitted && addNewProjectForm.projectStartDate.$invalid}" />
I am using angularjs and bootstrap. some of my pages integrated with "typeahead" code.
when I write a character in text field, the dropdown displays but with empty labels.
when I click on any empty label, it fills the textfield with correct value.
The problem is, dropdown not displays labels
any solution.
<input type="text" class="order_input" ng-model="selected_address"
typeahead="rest as rest.name for rest in searchTerms($viewValue,'restaurants/typeahead_address/',{type:restaurant_type})"
placeholder="Enter Postal Code or Address.." />
I am not sure about typeahead
But I actually apply what you are talking about as follows
<input type="text" class="order_input" list="dataSource" placeholder="Enter Postal Code or Address.." />
<datalist id="dataSource" >
<option ng-repeat="rest in allData">{{rest.name}}</option>
</datalist>
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>