We Keep Coding

How to set datepicker using webdriverIO?

I have a task where I need to automate the booking.com page, and one of the tasks is to select check-in and check-out dates. How I can do this? I automated , that I can open calendar, but I don't know how to select dates.
Here is my code
Cucumber step
And user selects dates from "2020-06-16" to "2020-06-26"
BookingStep
When('user selects dates from {string} to {string}',()=>{
BookingPage.checkInOut.click();
browser.debug(); });
Booking page
class BookingPage{
get whereAreYouGoingTextBox(){return $('#ss')};
get checkInOut(){return $('div.xp__dates-inner')}; }export default new BookingPage();

Note: My answer is a solution for the ability to set a value in the date field, and only interact with the cancel link on the date picker object.
I battled this for a while and came up with a solution that works for me, I hope it works for you also.
First when I inspect the datepicker object, it generates a random XPATH/CSS Selector. As a result if you inspect & copy the selector and try to use it in your next test, it will fail since the xpath/selector is randomly generated. I got around this issue by identifying a unique css ID that lived above the datepicker element, and used that as my starting point. Then I looked at the html path from that point to the datepicker input tag, and I appended that path. This solved the first problem of not being able to set a value in the date picker text field. Here is an example using xpath:
//*[#id="filtersSideBar"] - This is the unique ID found above the datepicker
/div[2]/div/input - This is the path to the date picker from the unique ID
$('//*[#id="filtersSideBar"]/div[2]/div/input').waitForClickable(3000);
$('//*[#id="filtersSideBar"]/div[2]/div/input').setValue('2020-01-01');
Now that you have a date inside the date picker field, you have to close the datepicker object. I had to use Javascript to accomplish this. First open the datepicker object, then inspect the 'Cancel' link element. Copy the CSS Selector ID. Lets say it ends up being #cancelLink
Now you run this code:
browser.execute(() => document.querySelector('#cancelLink').click());
Which will then close the datepicker object so that you can proceed with your testing.
Here is my actual code:
class DataSearchSortAndDateRangePage {
get startDate() { return $('//
[#id="filtersSideBar"]/div[2]/div/div[2]/div[1]/div/input'); }
setStartDate(date) {
this.startDate.waitForClickable( { timeout: browser.config.timeOutValue } );
this.startDate.setValue(date);
browser.execute(() => document.querySelector('body > div.md-datepicker-dialog.md-theme-default > div.md-datepicker-body > div.md-dialog-actions.md-datepicker-body-footer > button > div > div').click());
}
}
export default new DataSearchSortAndDateRangePage();
I hope this helps out =)

How to append html from typescript file and perform functionality on it in angular2

I am working on angular2 application.
I am getting one issue when I am appending date field from typescript the field was generated and looking perfect but the functionality I have performed on field click was not working(date picker will open on click on field and event icon).
HTML
<div id="specific_dates_container" class="field_area">
</div>
TYPESCRIPT
let count = document.querySelectorAll('.specific-date').length;
count += 1;
this.addCouponForm.addControl('specific_date'+count, new FormControl());
let html = "<div class='specific-date' id='specific_date"+count+"'><input placeholder='MM/DD/YYYY' ngx-mydatepicker [options]='calendarOptions' #sd"+count+"='ngx-mydatepicker' formControlName = 'specific_date"+count+"' (click)='sd"+count+".toggleCalendar()' readonly><i class='material-icons' (click)='sd"+count+".toggleCalendar()'>event</i></div><br>";
$("#specific_dates_container").append(html);

You need to change your approach towards this
It seems you are tying to create controls dynamically
To do that you need to follow this link
How to dynamically add and remove form fields in Angular 2

bootstrap-datepicker does not update AngularJS model when picking date

I am using AngularJS with this bootstrap-datepicker plugin:
Datepicker for Bootstrap v1.6.4 (https://github.com/eternicode/bootstrap-datepicker)
Copyright 2012 Stefan Petre
Improvements by Andrew Rowls
I have it bound like this:
<input type="text" data-provide="datepicker" ng-model="obj.FirstDate" />
I get the values to inputs using ng-model.
When I type the date into this field using keyboard it all works OK, but when I click on a field and select a date from the Datepicker:
the model doesn't get updated,
the field is not treated as dirty (no ng-dirty class).
Is there a way to tell Angular to update value of obj.FirstDate when using the Datepicker? For example to attach it to an event? Or any other way that this would work?
I have a few of these fields so I don't want to write the script which attaches to a field using its id. Any help appreciated.

After much time of struggling with this I was forced to use below code to fix every of my datepicker instances at once:
function fixDatepickerTriggerChange() {
$(document).ready(function () {
$('[data-provide="datepicker"]').datepicker().on('changeDate', function (e) {
angular.element($(this)).triggerHandler('input');
});
});
}
And run it from within the angular.controller.
Based on this answer: https://stackoverflow.com/a/23850753/1813219.

Jquery. Binding the instantiation of a plugin on dynamically loaded content

Having a problem selecting an id within a dynamically placed div tag on a page.
It's a date field and I'd like to have a datepicker show up when the user focuses on the field. That I'm trying to set up a plugin instead of doing any other kind of jQuery event is, I think, my problem.
So here's the dynamically loaded content that is placed on the page when a user clicks one of several radio buttons in a "calendar".
$("#s10").click(function(){
$("#S_Date").html('<input type="text" name="Start_Date" id="Start_Date" value="2016-05-24" />2016-05-24');
#S_Date is the parent div id that is loaded when the document loads.
I'm using the "PickMeUp" datepicker plugin.
From what I can tell, I need to use the on() event handler but I just can't seem to get it to bind to #Start_Date.
Here's my latest attempt at trying to call it:
var pickitup = $("#Start_Date").pickmeup({format : 'Y-m-d'});
$("#S_Date").on('focus', "#Start_Date", function(){pickitup});
With pickitup defined, I have also tried:
$("#S_Date").on('focus', "#Start_Date", pickitup);
$("#S_Date").on('focus', "#Start_Date", function(){pickmeup({format : 'Y-m-d'})}); fails out of the gate with a pickmeup is not defined error.
Ideas anyone?

So, if I'm understanding what you're doing, you want to insert some html into a given element on that click event, then apply the date picker functionality to it?
$("#s10").on("click", function() { //when the element is clicked...
//create an input with the appropriate attributes
var picker = $("<input />", { type: "text", name: "Start_Date", value: "2016-05-24" });
//append it to the desired element(s)
$("#S_Date").append(picker);
//run the plugin on it
picker.pickmeup({format: 'Y-m-d'});
});
Here's a working (simple) fiddle https://jsfiddle.net/s6vu0rnq/
The undefined error you got was because "pickmeup" is a property of jquery's prototype, but you were trying to call it from the global scope.
Also, ".click" is just an alias for ".on", so you can use either.

Set focus to a form element using JavaScript / RichFaces

I am using JSF 1.2 and RichFaces. I have a requirement where on click of command button (<h:commandButton>) RichFaces data table will be displayed with 3 set of rows, This is working fine but the problem is I need to set the focus in the text box of data table which is not working. Please find the sample code I am working with.
Command button :
<a4j:commandButton immediate="true"
action="#{bean.addTomethod}"
reRender="myform"
oncomplete= "setFocusOnRichComponenet();"
rendered="true">
</a4j:commandButton>
JavaScript code :
function setFocusOnRichComponenet(){
document.getElementById("myform:richDataTableList:0:richTextBoxID").focus();
}
Here, myform:richDataTableList:0:richTextBoxID is the id of the component where I want to put focus.

When the id is generated dynamically, it can be erroneous at times to try to refer using document.getElementById as you must know the full id.
Simpler way to do this is use the RichFaces method clientId('elementName')
This will basically resolve the exact id so you don't have to refer by tableName[].Element[] format.
So for your scenario, you could replace the javascript function as below:
function setFocusOnRichComponenet(){
document.getElementById("#{rich:clientId('myTextBox')}").focus();
}
where 'myTextBox' is the name of the textbox you are trying to refer

Add a class in input:
<h:inputText id="test" class="testClass"/>
In function set focus by class with jQuery:
function setFocusOnRichComponenet(){
jQuery(".testClass").focus();
}