How to automate date pickers without code

In this guide, we show you how to automate date pickers using Axiom.ai, without the need to write any code. Date pickers can be tricky HTML elements to automate, but they are often essential for automating reporting or posting content.

# Why are date pickers tricky to automate?

Date pickers are not standardized, which means there are many different solutions available. Some popular options include jQuery's date picker, an old but reliable option, or bespoke pickers created with JavaScript tools like React or AngularJS. Standardizing date pickers would make browser automation much easier. Thankfully we have found ways to work around this.

# Which date pickers are easiest to automate?

If the data picker you need to automate includes an input field where dates and times can be manually entered, then it’s possible to automate this process.

# Which date pickers are difficult to automate?

Date pickers that don’t have an input field or where the input field is disabled, blocking the user from inserting a date, are more challenging to automate. However this doesn’t mean it’s impossible.

# Let’s learn how to automate a date picker with Axiom.ai

Start by checking if there is an input field for the start date. If you are able to type in the date by clicking inside the field, then you're in luck because this will be an easy task. However, if there is no such input field, don't worry. We'll show you how you can still automate a date picker without the need for code. Follow the steps below using Axiom.ai’s simple point-and-click interface.

# For date pickers with input fields

# 1. Add an 'Enter text' step

This step inputs the date into the date picker. Use the Step Finder to search for the ‘Enter text’ step and click to add it.

axiom.ai find enter text step

Click the ‘Select text’ field and select the input field you want to enter the date into.

axiom.ai picking a date

# 2. Adding the date value

To complete configuring the 'Enter text' step, you must include a date value in the 'Text' field. I will need to match the format used by the date picker. There are a few ways to do this:

  1. Manually enter a value into the 'Text' field.
  2. Click on 'Insert data' and pull a value from a Google Sheet.
  3. Use the 'Date and time' step.
  4. Generate a date value with the 'Custom JavaScript' step.
axiom.ai find enter text step

Note: You will need to match the exact date format used by the date picker.

# For date pickers without input fields

If we are unable to automate the date picker via an input field, we can try an alternative approach. Although it may require additional steps, it’s not a complex process, it simply requires a few extra steps.

You will need to add steps to scrape the month displayed in the picker and check against the month you want it to be. When they match, add a step to select the day you want.

# 1. Add a ‘Click Element’ step to your bot

This step will open up the date picker we want to automate, so that Axiom can interact with it.

  1. Use the Step Finder to search for the ‘Click Element’ step and click on it
  2. Next, click ‘Select’ and choose the button or input that launches the date picker window

Unsure? watch here (opens new window)

axiom.ai amazon date picker

# 2. Add a ‘Get data from current page’ step

This step will scrape the current month's value for us.

axiom.ai amazon date picker
  1. Use the Step Finder to search for the ‘Get data from current page’ step and click to add it
  2. Click 'Select' and choose the month displayed in the selector
  3. Set the ‘Max results’ setting to ‘1’.
  4. In the 'Configure scraper', Set 'No. of retry attempts when results not found' to '0'.

Unsure? watch here (opens new window)

Note: when using the Amazon scraper, you will need to use a custom CSS selector. Do this by clicking 'Select', then in Column A clicking on the arrow icon and selecting 'Custom Selector’.

The selector we used for Amazon was:

.CalendarMonthGrid .CalendarMonthGrid_month__horizontal:nth-child(2) .CalendarMonth_caption

# 3. Add a ‘If condition’ step

This step verifies the current scraped month against the desired month. If the months do not match, the Axiom executes the sub steps within the 'if' condition, which includes clicking the 'next month' button. It then returns to the scraping step to recheck the months. When the months match, the 'if' condition is bypassed, and the process advances to the next step of selecting the day.

  1. Set 'Data to check' to 'Scrape-data'
  2. In 'Condition to check', hard code your month value or click 'Insert data' to pass in a value. Make sure the format matches the date picker format
  3. In 'Reverse condition', tick the box to set to false
axiom.ai amazon date picker if condition

Unsure? watch here (opens new window)

Note: the next steps you add will be substeps. Add these nested within the ‘If Condition’ step.

# 4. Add a ‘Click Element’ sub step

Staying within the ‘If condition’ step, it’s time to add a sub step (click the white ‘Add step’ button).

  1. Search for and click to add a ‘Click Element’ sub step
  2. Select the next month button

Unsure? watch here (opens new window)

Note: in this Amazon example, you will need to use a custom CSS. Click 'Select' then 'Custom' and use:

[aria-label="Move forward to switch to the next month."] an attribute selector more about those below.

# 5. Add a ‘Jump to step’ sub step

Add a further sub step - 'Jump to step'. This step returns to the scraping step to recheck the month value.

  1. You will need to scroll up to your ‘Get Data’ step, and note the step number.
  2. Input this step number into the ‘Jump to step’ field.

Unsure? watch here (opens new window)

Note: That's the final sub step

# 6. Add a 'Click element' step after the 'If conditon'

This step involves selecting the day you wish to set in the date picker. You will need to create a custom CSS selector, and I will show you how to do this in the accompanying video. (opens new window)

  1. Use the Step Finder to add a new ‘Click Element’ step
  2. You will need create and a custom CSS selector. Click 'Select' then 'Custom'
  3. Use the Chrome Inspector tool (opens new window), inspect the date. Most dates have a date attibute, replicate the format
  4. You can also pass in a selector from a Google sheet by clicking 'Insert data'

In the image below you can see the date has this attribute we can use as a css class in square brackets '[aria-label="Tuesday, 19 December 2023"]'.

axiom.ai amazon date picker css atribute

Unsure? watch here (opens new window)

Note: in this Amazon example, the 'Custom' is: [aria-label="Thursday, November 16, 2023"]

And you’re done! This is what it should look like.

axiom.ai amazon date picker design pattern

# The double-date picker

To automate a double date picker like this one found on Amazon, you need to repeat the steps above for start and end date.

# CSS selectors

For this process, custom CSS selectors are needed. If you haven’t used these before, you can find out more here.

Thankfully, most date pickers have solid CSS selectors we can take advantage of when automating.

The Amazon date picker has a great selector to use for selecting days, for example this aria selector, which can be added to your Axiom:

[aria-label="Wednesday, November 8, 2023]

Selecting the month is a little more tricky. There are in fact 3 months listed in the code. The month before, current month and month after. They all have the same selector, so we need to work out a unique hierarchy, as seen in the example below:

.CalendarMonthGrid .CalendarMonthGrid_month__horizontal:nth-child(2) .CalendarMonth_caption

In this case, we use an nth-child(2) selector, as it is the second child value we want.

# Issues you may encounter with date pickers

  1. Bot isn’t looping the scrape when the months don’t match? Make sure the ‘Jump step’ is going to the correct step and the ‘If step’ is set to reverse condition: false
  2. Not clicking the day? Make sure your selector is covering the correct month
  3. Buttons not clicking and getting errors? You’lll need to work on your CSS selectors

# Conclusion

Congratulations, you just built a bot to automate a date picker! If you find a troublesome data picker, share it with us to crack. We love a good bot-building challenge. Email us on support@axiom.ai

Contents

    Install the Chrome Extension

    Two hours of free runtime, no credit card required