Top

How to Select Dates from Date Pickers

How to Select Dates from Date Pickers

Here is the recipe for automating the task of selecting a date from a Date Picker component. I illustrate this recipe with Selenium WebDriver and Java, however, the recipe itself can be used with any automation tool and programming language.

 

Recipe to Automate Date Picker Selection

Ingredients

  • Model of Date Picker component
  • Month, Day, and Year to Select (aka Destination)
  • Current Date

Instructions

If editable, type destination date into text field in the correct format. DONE! If not, follow the following:

  1. open date component (if not already open)
  2. compare *current* month and year to *destination* month and year
  3. determine if you need to go to a past, future, or current month
  4. click arrow to navigate to destination month+year
  5. select the day. be careful, there may be duplicates!
— Angie Jones 👩🏾‍🍳

 

Live Stream Video

 

 

Ingredients

 

1 Create Model of Date Component

Date Pickers are components which can appear throughout an application to make date selection easier. Sometimes they’ll have an editable text field to allow free-form input and sometimes the field is disabled because dates are pretty difficult from a programming standpoint.

If you have a Date Picker with an editable text input field, use that to automate the date entry and you’re done! Just be sure to enter the date in the expected format.

If the text input field is disabled, then you can create a model class which enables interaction with the Date Picker.

 

 

Inside of this class, I create a constructor to accept the WebDriver element that we’ll need to interact with the browser and all of the elements that we need to interact with.

 

2 Decide on Destination

We’ll write three tests: one that includes a past date, one that includes a future one, and one that includes the current month. The key is to design our DatePicker model class to be able to handle any valid date.

  • Test 1: December 20, 1989
  • Test 2: 7 months from now
  • Test 3: The 15th of the current month

 

3 Current Date

This is given in the Date Picker. By default, it is set to the current month and year. We’ll be able to use this when we need it.

 

Instructions

 

1 Open Date Component

The very first thing we must do to select a date is open the Date Picker. However, this is a toggle. As I’ve mentioned in my Page Object Model article, as opposed to blindly clicking on toggles, your code should ensure it needs to be clicked.

 

2 Compare Current Date with Destination Date

Now that the Date Picker is open, we need to determine if we need to navigate away from the current month and if so, do we need to go to the past or to the future.

To do this, we need to compare the two dates.

To read the current date from the Date Picker, we capture the month and year shown and split this into an array, which we then can use to build a LocalDate object.

The day of the month is not yet set in the Date Picker, so when building the LocalDate object, I just set that to the first day of the month: 1.

Once we have the current date, we can then do the comparison between it and the destination. I use the ChronoUnit class to compare the months.

Important Note: During the live stream, Samuel Nitsche made a wonderful observation! He pointed out that with what we had, a date like March 31, 2020 would not work for our Date Picker. That’s because if I compare April 22, 2020 with March 31, 2020 then monthsAway would be 0 since technically, it’s not a full month difference. This is problematic for our needs, because we definitely need to go back a month in this case.

To solve for this, I compare both the destination and current date using 1 for the day of the month. That way, we get a fair comparison and it doesn’t affect the actual day of the month that we’ll end up selecting. This is only done to accurately calculate the difference between the months.

 

3 Determine if we need to go to a past, future, or current month

Now that we have the monthsAway variable, we know if we are dealing with a past month (the value is negative), future month (the value is positive), or current month (the value is 0). Given this, we know whether to use the left arrow, right arrow, or none at all.

 

4 Navigate to Destination Month+Year

Next, we click that arrow the appropriate number of times to get to the destination month and year. We can use a count-controlled for loop for this.

 

5 Select the Day

Selecting the day seems pretty straight forward, we just click on the element with the destination day as its text. But be careful, Date Pickers can have a day appear more than once in its view.

For example, if we wanted to select April 30 and we told our automation tool to select the cell with 30 in it, it will select the first one it finds and that will actually be the one from March.

To ensure that we’re selecting the correct day, we need to make sure our locator will select the one from this current month. This will vary depending on the Date Picker implementation but typically dates not associated with the current month are styled a bit differently. Notice here they are a light gray. In looking in the DOM, I can see the days have a class of current-month or other-month, so I can include that in my selector.

Then in the method, I simply need to click that element.

 

That selects the date! Now we need to be able to return the selected date back to the test. Unfortunately, this DatePicker does not include the date as innerText, so getting the text of this element returns an empty String (getting the value may work but I didn’t try it). However, I do notice that the calendar element has an attribute called selectedday. We can use this!

 

Although, it seems this uses a 0-index count for the months meaning January is 0 as opposed to 1. Not a problem, we’ll just add one within our code when we parse this and use the fields to build a LocalDate object.

 

 

Now let’s provide a method that will put all of this together.

 

Entire DatePicker class:

 

Tests

Now as planned, we’ll add 3 tests (past, present, future) and let’s throw in one more with the tricky date that Sam mentioned for good measure.

 

All tests pass! Now we have a DatePicker component that works for any date. Utilizing within broader tests should now be a breeze!

Be sure to check out the next live stream for more recipes!

 

 

See Code on Github

Angie Jones
5 Comments
  • Varsha T

    Great post Angie! Thank you so much 🙂

    April 24, 2020 at 10:18 pm Reply
  • Kwame Gyimah

    Thanks Angie for your selfless desire to share your knowledge. I downloaded your code on run it but had this error

    Error:java: invalid source release: 14
    I am using Intellij as my IDE. Any idea what this could be
    April 26, 2020 at 3:50 am Reply
    • Angie Jones

      In the pom.xml file, I specify 1.14 as my Java version. Change 14 to whichever Java version you’re using.

      April 27, 2020 at 8:43 am Reply
  • Hakeem OLASUPO

    Awesome post! Thanks for sharing

    April 26, 2020 at 7:41 pm Reply
  • Tamara T

    Thanks Angie, awesome stuff!

    I actually got to automate a date picker on the spot for one of my job interviews. The algorithm I used was (in pseudocode):

    while (initialDate != targetDate) {
    if: (targetDate > initialDate) arrowRight
    else if: (targetDate < initialDate ) arrowLeft
    else: initialDate = targetDate }
    It’s great to see how the same goal can be achieved in so many different ways with code. Looking forward to the upcoming sessions!
    April 29, 2020 at 7:39 am Reply

Post a Reply to Kwame Gyimah Cancel Reply