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:

open date component (if not already open)

compare *current* month and year to *destination* month and year

determine if you need to go to a past, future, or current month

click arrow to navigate to destination month+year

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.

public class DatePicker {

    private WebDriver driver;

    private By openCalendarButton = By.cssSelector("#datepicker ~ span button");
    private By calendar = By.cssSelector("div[role='calendar']");
    private By period = By.cssSelector("div[role='period']");
    private By leftArrow = By.cssSelector("div[role='navigator'] i.chevron-left");
    private By rightArrow = By.cssSelector("div[role='navigator'] i.chevron-right");
    private String day_FORMAT = "//td[@day='%d' and contains(@class, 'current-month')]";


    public DatePicker(WebDriver driver){
        this.driver = driver;
    }
}

public class DatePicker {

private WebDriver driver;

private By openCalendarButton = By.cssSelector("#datepicker ~ span button");

private By calendar = By.cssSelector("div[role='calendar']");

private By period = By.cssSelector("div[role='period']");

private By leftArrow = By.cssSelector("div[role='navigator'] i.chevron-left");

private By rightArrow = By.cssSelector("div[role='navigator'] i.chevron-right");

private String day_FORMAT = "//td[@day='%d' and contains(@class, 'current-month')]";

public DatePicker(WebDriver driver){

this.driver = driver;

}

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.

    public void open(){
        if(!isCalendarOpen()){
            driver.findElement(openCalendarButton).click();
        }
    }

    public boolean isCalendarOpen(){
        return driver.findElement(calendar).isDisplayed();
    }

public void open(){

if(!isCalendarOpen()){

driver.findElement(openCalendarButton).click();

}

public boolean isCalendarOpen(){

return driver.findElement(calendar).isDisplayed();

}

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.

    public LocalDate getCurrentPeriod(){
        var currentPeriod = driver.findElement(period).getText().split(" ");
        return LocalDate.of(
                Integer.parseInt(currentPeriod[1]),
                Month.valueOf(currentPeriod[0].toUpperCase()),
                1);
    }

public LocalDate getCurrentPeriod(){

var currentPeriod = driver.findElement(period).getText().split(" ");

return LocalDate.of(

Integer.parseInt(currentPeriod[1]),

Month.valueOf(currentPeriod[0].toUpperCase()),

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.

    public void chooseMonth(LocalDate date) {
        var currentPeriod = getCurrentPeriod();
        long monthsAway = ChronoUnit.MONTHS.between(currentPeriod, date.withDayOfMonth(1));
    }

public void chooseMonth(LocalDate date) {

var currentPeriod = getCurrentPeriod();

long monthsAway = ChronoUnit.MONTHS.between(currentPeriod, date.withDayOfMonth(1));

}

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.

    public void chooseMonth(LocalDate date) {
        var currentPeriod = getCurrentPeriod();
        long monthsAway = ChronoUnit.MONTHS.between(currentPeriod, date.withDayOfMonth(1));

        By arrow = monthsAway < 0 ? leftArrow : rightArrow;
    }

public void chooseMonth(LocalDate date) {

var currentPeriod = getCurrentPeriod();

long monthsAway = ChronoUnit.MONTHS.between(currentPeriod, date.withDayOfMonth(1));

By arrow = monthsAway < 0 ? leftArrow : rightArrow;

}

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.

    public void chooseMonth(LocalDate date) {
        var currentPeriod = getCurrentPeriod();
        long monthsAway = ChronoUnit.MONTHS.between(currentPeriod, date.withDayOfMonth(1));

        By arrow = monthsAway < 0 ? leftArrow : rightArrow;

        for(int i = 0; i < Math.abs(monthsAway); i++){
            driver.findElement(arrow).click();
        }
    }

public void chooseMonth(LocalDate date) {

var currentPeriod = getCurrentPeriod();

long monthsAway = ChronoUnit.MONTHS.between(currentPeriod, date.withDayOfMonth(1));

By arrow = monthsAway < 0 ? leftArrow : rightArrow;

for(int i = 0; i < Math.abs(monthsAway); i++){

driver.findElement(arrow).click();

}

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.

private String day_FORMAT = "//td[@day='%d' and contains(@class, 'current-month')]";

1	private String day_FORMAT = "//td[@day='%d' and contains(@class, 'current-month')]";

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

    public void chooseDay(int dayOfMonth) {
        By locator = By.xpath(format(day_FORMAT, dayOfMonth));
        driver.findElement(locator).click();
    }

public void chooseDay(int dayOfMonth) {

By locator = By.xpath(format(day_FORMAT, dayOfMonth));

driver.findElement(locator).click();

}

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!

<div role="calendar" 
    type="month" 
    class="gj-picker gj-picker-bootstrap datepicker gj-unselectable" 
    guid="12da1928-ee1c-7e57-cb18-57358f3e1782" 
    month="3" year="2020" 
    selectedday="2020-3-9" 
    style="top: 101px; left: 95px; display: none;">

<div role="calendar"

type="month"

class="gj-picker gj-picker-bootstrap datepicker gj-unselectable"

guid="12da1928-ee1c-7e57-cb18-57358f3e1782"

month="3" year="2020"

selectedday="2020-3-9"

style="top: 101px; left: 95px; display: none;">

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.

    public LocalDate getSelectedDate(){
       var fields = driver.findElement(calendar).getAttribute("selectedday").split("-");
       return LocalDate.of(
               Integer.parseInt(fields[0]),
               Integer.parseInt(fields[1]) + 1,
               Integer.parseInt(fields[2]));
    }

public LocalDate getSelectedDate(){

var fields = driver.findElement(calendar).getAttribute("selectedday").split("-");

return LocalDate.of(

Integer.parseInt(fields[0]),

Integer.parseInt(fields[1]) + 1,

Integer.parseInt(fields[2]));

}

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

    public LocalDate chooseDate(LocalDate date){
        open();
        chooseMonth(date);
        chooseDay(date.getDayOfMonth());
        return getSelectedDate();
    }

public LocalDate chooseDate(LocalDate date){

open();

chooseMonth(date);

chooseDay(date.getDayOfMonth());

return getSelectedDate();

}

Entire DatePicker class:

package components;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;

import java.time.LocalDate;
import java.time.Month;
import java.time.temporal.ChronoUnit;

import static java.lang.String.format;

public class DatePicker {

    private WebDriver driver;

    private By openCalendarButton = By.cssSelector("#datepicker ~ span button");
    private By calendar = By.cssSelector("div[role='calendar']");
    private By period = By.cssSelector("div[role='period']");
    private By leftArrow = By.cssSelector("div[role='navigator'] i.chevron-left");
    private By rightArrow = By.cssSelector("div[role='navigator'] i.chevron-right");
    private String day_FORMAT = "//td[@day='%d' and contains(@class, 'current-month')]";

    public DatePicker(WebDriver driver){
        this.driver = driver;
    }

    public LocalDate chooseDate(LocalDate date){
        open();
        chooseMonth(date);
        chooseDay(date.getDayOfMonth());
        return getSelectedDate();
    }

    public LocalDate getSelectedDate(){
       var fields = driver.findElement(calendar).getAttribute("selectedday").split("-");
       return LocalDate.of(
               Integer.parseInt(fields[0]),
               Integer.parseInt(fields[1]) + 1,
               Integer.parseInt(fields[2]));
    }

    public void chooseDay(int dayOfMonth) {
        By locator = By.xpath(format(day_FORMAT, dayOfMonth));
        driver.findElement(locator).click();
    }

    public void chooseMonth(LocalDate date) {
        var currentPeriod = getCurrentPeriod();
        long monthsAway = ChronoUnit.MONTHS.between(currentPeriod, date.withDayOfMonth(1));

        By arrow = monthsAway < 0 ? leftArrow : rightArrow;

        for(int i = 0; i < Math.abs(monthsAway); i++){
            driver.findElement(arrow).click();
        }
    }

    public LocalDate getCurrentPeriod(){
        var currentPeriod = driver.findElement(period).getText().split(" ");
        return LocalDate.of(
                Integer.parseInt(currentPeriod[1]),
                Month.valueOf(currentPeriod[0].toUpperCase()),
                1);
    }

    public void open(){
        if(!isCalendarOpen()){
            driver.findElement(openCalendarButton).click();
        }
    }

    public boolean isCalendarOpen(){
        return driver.findElement(calendar).isDisplayed();
    }
}

package components;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import java.time.LocalDate;

import java.time.Month;

import java.time.temporal.ChronoUnit;

import static java.lang.String.format;

public class DatePicker {

private WebDriver driver;

private By openCalendarButton = By.cssSelector("#datepicker ~ span button");

private By calendar = By.cssSelector("div[role='calendar']");

private By period = By.cssSelector("div[role='period']");

private By leftArrow = By.cssSelector("div[role='navigator'] i.chevron-left");

private By rightArrow = By.cssSelector("div[role='navigator'] i.chevron-right");

private String day_FORMAT = "//td[@day='%d' and contains(@class, 'current-month')]";

public DatePicker(WebDriver driver){

this.driver = driver;

}

public LocalDate chooseDate(LocalDate date){

open();

chooseMonth(date);

chooseDay(date.getDayOfMonth());

return getSelectedDate();

}

public LocalDate getSelectedDate(){

var fields = driver.findElement(calendar).getAttribute("selectedday").split("-");

return LocalDate.of(

Integer.parseInt(fields[0]),

Integer.parseInt(fields[1]) + 1,

Integer.parseInt(fields[2]));

}

public void chooseDay(int dayOfMonth) {

By locator = By.xpath(format(day_FORMAT, dayOfMonth));

driver.findElement(locator).click();

}

public void chooseMonth(LocalDate date) {

var currentPeriod = getCurrentPeriod();

long monthsAway = ChronoUnit.MONTHS.between(currentPeriod, date.withDayOfMonth(1));

By arrow = monthsAway < 0 ? leftArrow : rightArrow;

for(int i = 0; i < Math.abs(monthsAway); i++){

driver.findElement(arrow).click();

}

public LocalDate getCurrentPeriod(){

var currentPeriod = driver.findElement(period).getText().split(" ");

return LocalDate.of(

Integer.parseInt(currentPeriod[1]),

Month.valueOf(currentPeriod[0].toUpperCase()),

1);

}

public void open(){

if(!isCalendarOpen()){

driver.findElement(openCalendarButton).click();

}

public boolean isCalendarOpen(){

return driver.findElement(calendar).isDisplayed();

}

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.

package datepicker;

import base.BaseTests;
import components.DatePicker;
import org.junit.jupiter.api.BeforeAll;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;

import java.time.LocalDate;
import java.time.Month;

import static org.junit.jupiter.api.Assertions.assertEquals;

public class DatePickerTests extends BaseTests {

    private DatePicker datePicker;

    @BeforeAll
    public static void launchApp(){
        driver.get("file:///datepicker.html");
    }

    @BeforeEach
    public void refreshCalendar(){
        driver.navigate().refresh();
        datePicker = new DatePicker(driver);
    }

    @Test
    public void pastDate(){
        var dateToSelect = LocalDate.of(1989, Month.DECEMBER, 20);
        var selectedDate = datePicker.chooseDate(dateToSelect);
        assertEquals(dateToSelect, selectedDate);
    }

    @Test
    public void futureDate(){
        var dateToSelect = LocalDate.now().plusMonths(7);
        var selectedDate = datePicker.chooseDate(dateToSelect);
        assertEquals(dateToSelect, selectedDate);
    }

    @Test
    public void currentMonth(){
        var dateToSelect = LocalDate.now().withDayOfMonth(15);
        var selectedDate = datePicker.chooseDate(dateToSelect);
        assertEquals(dateToSelect, selectedDate);
    }

    @Test
    public void trickyDate(){
        var dateToSelect = LocalDate.of(2020, Month.MARCH, 31);
        var selectedDate = datePicker.chooseDate(dateToSelect);
        assertEquals(dateToSelect, selectedDate);
    }
}

package datepicker;

import base.BaseTests;

import components.DatePicker;

import org.junit.jupiter.api.BeforeAll;

import org.junit.jupiter.api.BeforeEach;

import org.junit.jupiter.api.Test;

import java.time.LocalDate;

import java.time.Month;

import static org.junit.jupiter.api.Assertions.assertEquals;

public class DatePickerTests extends BaseTests {

private DatePicker datePicker;

@BeforeAll

public static void launchApp(){

driver.get("file:///datepicker.html");

}

@BeforeEach

public void refreshCalendar(){

driver.navigate().refresh();

datePicker = new DatePicker(driver);

}

@Test

public void pastDate(){

var dateToSelect = LocalDate.of(1989, Month.DECEMBER, 20);

var selectedDate = datePicker.chooseDate(dateToSelect);

assertEquals(dateToSelect, selectedDate);

}

@Test

public void futureDate(){

var dateToSelect = LocalDate.now().plusMonths(7);

var selectedDate = datePicker.chooseDate(dateToSelect);

assertEquals(dateToSelect, selectedDate);

}

@Test

public void currentMonth(){

var dateToSelect = LocalDate.now().withDayOfMonth(15);

var selectedDate = datePicker.chooseDate(dateToSelect);

assertEquals(dateToSelect, selectedDate);

}

@Test

public void trickyDate(){

var dateToSelect = LocalDate.of(2020, Month.MARCH, 31);

var selectedDate = datePicker.chooseDate(dateToSelect);

assertEquals(dateToSelect, selectedDate);

}

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

April 22, 2020

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

How to Select Dates from Date Pickers