Handle Calendar/DatePicker using JavaScriptExecutor - Session -17

[@muhammadshahnawaz3679]

aray bhai 2 dinn pehlay yeh video mill jati tu maza ajata. I had a technical test in my second round of interview. anywayz superb tutorial. keep it up.

[@jaganmohanreddyp1871]

Hi Naveen ! Each video contains great info which I am not able to find any where else ...Seems u have done good research before presenting each one .apreciate ur efforts.... Thank you a lot....

[@omkarpotdar2763]

Thank you so very much Naveen for providing us a very easy and useful solution for Calender. Keep it up Naveen.

[@wisherz]

thank you very much... i really learn a lot from you. it is very detailed and well explain

[@syedshafiulla3093]

This method is only applicable if an attribute in date element is capturing date value, in some cases or webpages it doesn't happen. So this can only be implemented in some places not all.

[@gnanasundarinans4g976]

Thank you for sharing video.. It's very useful..

[@real_hello_kitty]

Appreciate. 🤠

[@jdhung]

awesome tutorial.

[@amitbhardwaj7824]

nice video keep uploading

[@abinavregmi2404]

Thank you Naveen for beautifully explained and make me clear on calendar. Only one query is that JavaScriptExecutor works for any kind of calendar?

[@madhusudandevaraju1207]

This method of entering dates directly into fields can't be used during UAT or regression as its not an valid user scenario. However this method seems to be not working in the latest spice jet site. But good to know. Thanks.

[@qaziamin]

thanks for providing Excellent videos

[@ramareddybheemanagoud2331]

Thank you Naveen...

[@roopamsingh1794]

Hi Naveen, I was trying to change the value of calendar using javascript setAttribute function but it is not reflecting on UI. I checked on www.spicejet.com/ and when I checked the same on console then it is showing the updated value through JS but it is not reflecting on UI. Could you please tell how to do it?

[@aviguptamra]

@Manikandan Rudra What do you mean removerAttribute?

[@sounaknandi1393]

It is an Input Tag so we can directly do Send keys? Isnot it?

[@deepakpotdar4780]

hi naveen pls provide new video for date pickker bcoz its not working in spicejet .com

[@kanchanpawar1173]

Hi ,using java executor we can handle dynamically change web elements for date and time

[@batz1985]

I tried this one, but when clicking the next field, all the dates in date picker fields are all disappeared.

[@rd2674]

what do I have to do for the second calendar date selection, please let me know and if there is any third calendar is there than what to do actually I am asking for a check-in & check-out date and also to update the stay please reply to me ASAP as I am in the middle of the script

[@zmuraliz]

Hi naveen thanks for the video but some times date picker pop is not closing so failing to enter value for remaining feilds can you please suggest how to handle datepicker .hide

[@Manoj-gr7kn]

Can I use this technique if there is no Value attribute for that date in DOM.

[@sarbashispaul467]

@Naveen how to use the same logic to select the to date, should it be argument [1].setAttribute() ,coz when i tried same logic for the todate field it does not work

[@nirbhaydwivedi]

Hi Naveen, Thanks for videos. I am trying this code in Spicejet.com, but now codes are changed on this website due to this reason dates are not getting selected. Dates values are getting changed in source file but it's not presenting in UI. Can you please have a look on updated website. Thanks for your support.

[@aviguptamra]

@@lakshmip950 What do you mea, Can you tell me once?

[@testaccount8482]

Hi Naveen, i am getting error as "the left-hand side of an assignment must be a variable" in this line js.executeScript("arguments[0].setAttribute("value",'"+dateval+"');", element); can you please help me to sort out.Thanks

[@socialmediahappy8697]

hii naveen this is nice tutorial but I want know to select the date one by one means (1 and than 2 and than 3 bye selenium or javascript)

[@myfocus7447]

thanks for sharing

[@gopalsurse2071]

Naveen i have one question ,, How to select tomorrow date dynamically

[@quadriyusuf8431]

Hi Naveen, Thank you for this piece as the other ones too. I keep running in to an error using this method. Is there something I am doing wrong? org.openqa.selenium.json.JsonException: java.lang.reflect.InvocationTargetException

[@sumayazamasyed8982]

Hi Naveen, why do we pass driver as a parameter in selectCalendarJS() method?

[@sivaranim5680]

But I don't want to give date value as hardcoded... I want to select the date 3 months from the current date.... Each time u run scripts it has to select random date after 3 months from current date... Can you help me on this?

[@prasadparadkar8750]

Hey do you have any code where past date cannot be selected only current and future date is allowed??

[@ralp316]

Hi Naveen, is it possible to select random dates without entering the value in JavaScriptExecutor. If so please tell me how to do it!!!!

[@kiterunner4865]

this method does not work with React apps where there is a virtual dom and the real dom , when you set with javascript the value of the input , it is temporarliy stored in the virtual dom , tried many things such as self.driver.execute_script( """ var input = arguments[0]; var value = arguments[1]; input.focus(); input.value = value; var eventNames = ['input', 'change', 'blur']; eventNames.forEach(function(eventName) { var event = new Event(eventName, { bubbles: true }); input.dispatchEvent(event); }); """, input_element, value . Yes , I am using Python btw )

[@himanshusinghal7359]

Hi Naveen, can you take a example of ixigo.com......i am unable to select date using this method

[@akulabhaskar3797]

Hi Naveen can we use ds for Select class ?\

[@abhijitkumar8615]

Hi Naveen, Can you please upload a video for selecting dates from bootstrap datepicker. Thanks.

[@karthikBethi]

Try this kzbin.info/www/bejne/hmXLgnxjZb1mrZI

[@RajeshKumar-sz1ci]

Hi sir...Can you please help me out. Can you help me how to fix this error. javascript error: Cannot read property 'clientWidth' of null

[@waniya-huzzu]

How to handle date picker is type of date ? And sendkeys is not working

[@isha6327]

Hi Naveen, I have tried this one in redbus website and i am able to see the date is changing ,but the search results on that date is not displaying. It shows the results of the current date.... help me with this issue

[@naveenkumar-mh3sf]

Sometimes it won't work better go with calendar selection

[@balramshrivastav728]

how can we do the same thing in puppeteer framework

[@AbhishekVerma-ns8fu]

How can we automate the calender using c#?

[@Nitsng]

Hi Naveen, I am trying to automate makemytrip website and the calender here accepts value in:( 29 Sep, Sat) format, how to handle this day of the week thing?

[@govardhanreddy5949]

Please suggest a solution for this

[@dhirajmishra5915]

The date is not getting set for spicejet .com 2019 website using JavaScriptExecutor....Please help me to implement this in 2019 website

[@karthikBethi]

Check this kzbin.info/www/bejne/hmXLgnxjZb1mrZI

[@mohamedmudaseer9459]

We can perform with the test ng

[@ravitalaugh9017]

Why we are passing element in to javascript method

[@rakeshneogi6586]

This method does not impact the UI at all. Although if we do a getAttribute after setting the same, we can see it reflected in console. Hence, this is not a good option to use.

[@naveenautomationlabs]

But why do you want to use getattribute method? This is just an enforcement of putting the text using javascript executor. I dint get what do you mean by it will be reflected in the console.

[@rakhim457]

@@naveenautomationlabs I did the same thing, because the dateValue is not being reflected in the UI, it shows the default value in the UI even after setAttribute(). So checked using getAttribute() on the element and print it on console. The change is reflected there.

[@THUNDERBLADERS]

Earlier you used JavascriptExecutor js=(JavaScriptExecutor)driver ; instead of JavascriptExecutor js=(JavascriptExecutor)driver;

[@TheRps3]

Thank you, removeAttribute('readonly',0);") ---------> Might also help if there is no value property

[@jahangirshaheen9733]

how can I handle chrome print dialog box using selenium

[@abhibbharadwaj985]

Can i get all of your JavaScriptExecutor code text file collection link

[@abhiammukkutty]

new date value is not getting updating in textbox(seems its readonly) but dom its getting changed ... how to update the field???kindly help

[@abhiammukkutty]

js.executeScript("document.getElementById('ctl00_mainContent_view_date1').value='"+dateval+"';"); this is working fine

[@shazianadim6588]

can u post the snippet of ur code im unable to do with this method

[@abilashgittappagari9215]

super

[@BhardwajFamily1]

this also seems like we have pushing the value and once we are clicking on another fields, value gets vanished in date field

[@ravirajan44]

Hi Naveen, Now the spicejet.com webpage is changed and im not able to use the JS code and inject the date. Can you help me on the same.

[@ckumar89]

I believe we need to change the textcontent of span class using JS. Try this: public class CalendarSelectTest { public static void main(String[] args) throws InterruptedException { System.setProperty("webdriver.chrome.driver", "C:\\Users\\CK\\Desktop\\chromedriver.exe"); WebDriver driver = new ChromeDriver(); driver.get("www.spicejet.com/"); driver.manage().window().maximize(); String date="Fri, Dec 29 2017"; //WebElement date1=driver.findElement(By.xpath("//input[@id='hp-widget__depart']")); //input[@id='ctl00_mainContent_txt_Fromdate']//following-sibling::button[@class='ui-datepicker-trigger'] //ctl00_mainContent_view_date1 //WebElement date1=driver.findElement(By.xpath("//span[@id='view_fulldate_id_1']")); String id="view_fulldate_id_1"; selectCalenderDateJS(driver, id, date); } public static void selectCalenderDateJS(WebDriver driver, String id, String date) { JavascriptExecutor js=(JavascriptExecutor)driver; js.executeScript("document.getElementById('"+id+"').textContent='"+date+"';"); } }

[@sumirozario904]

it worked. thank you@@@ckumar89

[@danapanaharibabu2355]

Hi Naveen, Thanks for selenium Webdriver sessions. while running the script using javascript .the date field is not changing but the calendar icon is pointing to the date which i mentioned in the script. Below is the code: package Selenium; import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; public class CalendarHandleByJs { public static void main(String[] args) { System.setProperty("webdriver.chrome.driver", "E:/Selenium Softwares/chromedriver.exe"); //firefox driver WebDriver driver=new ChromeDriver(); driver.get("spicejet.com"); driver.manage().window().maximize(); WebElement date=driver.findElement(By.id("ctl00_mainContent_txt_Fromdate")); String dateVal= "02-02-2018"; selectDateByJs(driver, date, dateVal); } public static void selectDateByJs(WebDriver driver, WebElement element, String dateVal){ JavascriptExecutor js=((JavascriptExecutor)driver); js.executeScript("arguments[0].setAttribute('value','"+dateVal+"');",element); // System.out.println("Date entered"); } } please provide your comments.firebug and firepath. so how we can inspect an element by xpath. Note: in Firefox 57.0 there is no Thanks

[@ckumar89]

Those two input tags are read-only so we cannot change their attribute. I tried changing the text content of the sibling span tag public class CalendarSelectTest { public static void main(String[] args) throws InterruptedException { System.setProperty("webdriver.chrome.driver", "C:\\Users\\CK\\Desktop\\chromedriver.exe"); WebDriver driver = new ChromeDriver(); driver.get("www.spicejet.com/"); driver.manage().window().maximize(); String date="Fri, Dec 29 2017"; //WebElement date1=driver.findElement(By.xpath("//input[@id='hp-widget__depart']")); //input[@id='ctl00_mainContent_txt_Fromdate']//following-sibling::button[@class='ui-datepicker-trigger'] //ctl00_mainContent_view_date1 //WebElement date1=driver.findElement(By.xpath("//span[@id='view_fulldate_id_1']")); String id="view_fulldate_id_1"; selectCalenderDateJS(driver, id, date); } public static void selectCalenderDateJS(WebDriver driver, String id, String date) { JavascriptExecutor js=(JavascriptExecutor)driver; js.executeScript("document.getElementById('"+id+"').textContent='"+date+"';"); } }

[@sumayazamasyed8982]

Chandan Kumar why do we pass driver as a parameter in selectCalendarDateJS() method?

[@mariabajwa8632]

@@ckumar89 ok thank you for this , its working.

[@akashsinha4583]

if id is not there ??

[@vikramsingla2311]

What if "value" attribute is not present in DOM. Like for this calendar, demos.telerik.com/kendo-ui/datetimepicker/index, it is not present.

[@Czarkazmx]

This is no longer working... i cannot pull up js.executeScript it doesn't exist

[@karthikBethi]

Check this kzbin.info/www/bejne/hmXLgnxjZb1mrZI

[@chinmoyjana408]

how to do in .NET Core?

[@gauravsinha9468]

its not working sir

[@gopalsurse2071]

Question pucha to reply bhi nahi dete sir ji aap.......

[@diwali6482]

Can you please share the code?

[@BhardwajFamily1]

WebDriver driver= new ChromeDriver(); driver.manage().deleteAllCookies(); driver.manage().window().maximize(); driver.manage().timeouts().pageLoadTimeout(49, TimeUnit.SECONDS); driver.manage().timeouts().implicitlyWait(43, TimeUnit.SECONDS); driver.get("www.spicejet.com/"); Thread.sleep(4000); JavascriptExecutor js=(JavascriptExecutor) driver; js.executeScript("document.getElementById('ctl00_mainContent_view_date1').value='04/30/2019'");

[@sutharsansadhasivam2401]

How to do it in TestNG