Join us on :

What is calendar Popup / Date Picker

When you need to automate an hotel, travel, or similar websites you need to deal with Date pickers (calendars) and some times it is a little bit difficult with automation to select a specific date on the Datepicker or calendar.

Let's deal Datepickers with WebdriverIO, Please do get familiar with different kinds of popup by visiting this site : http://www.mattkruse.com/javascript/calendarpopup/

Sample date Picker

Every application uses different kinds of calendars/datepickers, so it becomes different and hard to automate with single stategy or using single way with automation tools.

You can not write a reusable method easily which can be used to handle all types of calendar with WebdriverIO. So we have to use the javascript instead of depending on the WebdriverIO or WebdriberIO.

Handle Calendar with WebdriverIO

Now let's try to handle the calendar popup using WebdriverIO, when we use WebdriverIO we can select the date in different ways.

The way that sometimes work

  • Find the textbar or the date pickers text field using $ method in WebdriverIO
  • Use sendkeys to fill the date
  • This method may or may not work beacuse all the datepicker text box might not accept the text

The wrong way :

  • Click the datepicker textbar/button
  • Calculate the number of months from today to target(manually) and click the > icon that many times
  • Once clicks are done choose the data based on text
  • Above one fails when the day changes or whenthe target date is dynamic

Working way but not so good :

  • Click the datepicker textbar/button
  • Calculate the number of month between today and the target date using program
  • Perfom clicks on the > button based on number of months
  • Choose the date based on text or other attributes
  • This way works but we cannot rely on this

Working way but not so better :

  • Click the datepicker textbar/button
  • Know the target month name, now using text verify whether it is expected month or not
  • If it is not expected month then click > icon
  • If it is correct month then choose the date
  • It becomes hard when target month is not the first time month (not within 12 months)

Recommended way :

  • Understand the format of the date of the date picker
  • Get the month, date and years as number that the date picker accepts
  • Now form the date using date, month, year
  • Force the value to application using javascript with WebdriverIO

									browser.executeScript("document.getElementById('datepicker').value='02/11/2019'");
									

About Author

Article is written by Pavan (a) KarthiQ. Well, I am serving notice period in an MNC, Bangalore. I thought to enrich every person knowledge a little, I always have a feeling, when we teach something, we will learn more than what you know. Knowledge is the only thing that doubles when you spend it.

I have also created the reporter for Protractor Jasmine. Use for your projects without any hesitation

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions