Calender is clicking on the next button getting element click intercept exception it just clicks once on the next button in the calender

Question

Steps: I am trying to click on the Calendar and select the Date from the Calendar and also select year and month but it just clicks once in the next button after opening the calendar and leads to element click intercept Exception

Added : wait for element clickable, tried with jscript, action class but not working

   public void selectStartDateandEndDatefromCalender(String buttonXpath,  String
        selectmonth, String selectYear,String selectDay) {
    elementInteraction.onClick(By.xpath(buttonXpath));

    String monthyear = driver.findElement(By.xpath("//div[contains(@class,'p-datepicker-header')]")).getText();
    String[] monthYearParts = monthyear.split(" ");
    String month = "";
    String year = "";
    String day = "";
    if (monthYearParts.length >= 2) {
        month = monthYearParts[0];
        year = monthYearParts[1];
    } else {
        // Log an error or handle the situation when the split does not return an array with at least two elements.
    }
    int attempt=0;
    int maxattemp =2;
    while (!(month.equals(selectmonth) && year.equals(selectYear))) {
        WebDriverWait wait = new WebDriverWait(driver, 50);
        wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//span[contains(@class,'p-datepicker-next-icon')]")));
        driver.findElement(By.xpath("//span[contains(@class,'p-datepicker-next-icon')]")).click();
        wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[contains(@class,'p-datepicker-header')]")));
        monthyear = driver.findElement(By.xpath("//div[contains(@class,'p-datepicker-header')]")).getText();

        month = monthyear.split(" ")[0];
        year = monthyear.split(" ")[1];
        attempt++;
        break;
    }
    //click day
    //String xpathText = "//span[normalize-space()=\'"+ selectDay  +"\']";
    String xpathText = "//span[normalize-space()=\'" + selectDay + "\']";
    driver.findElement(By.xpath(xpathText)).click();
}

And then I call the above method in another method as I read the dates from the feature file:

     Public void selectDate()
{
    

    selectStartDateandEndDatefromCalender(ToDateCalenderbutton,formEntryMap.get("From 

    Date").split("/")[0],formEntryMap.get("From Date").split("/")[1],formEntryMap.get("From 
   
   Date").split("/")[2]);
}

Can some provide a solution for this.

Adding after i remove the break in the while loop it keeps clicking on the next button .

So there are 2 issues i see here: 1)If the Break is removed it keeps clicking on the next button and does not select the Date 2)Second when the From and To Date is selected ... then it leads to element intercept exception again this exception occurs if the Break is there in the while loop

HTML:

<button type="button" pbutton="" pripple="" tabindex="0" class="p-element p-ripple p-datepicker-trigger ng-tns-c75-30 p-button p-component p-button-
icon-only ng-star-inserted">
    <span class="p-button-icon pi pi-calendar" aria-hidden="true"</span>
<span aria-hidden="true" class="p-button-label">&nbsp;</span>
</button>
<button type="button" pripple="" class="p-ripple p-element p-datepicker-next p-link ng-tns-c75-30" style="display: inline-flex;">
    <span class="p-datepicker-next-icon pi pi-chevron-right ng-tns-c75-30"/>
</button>
<div class="p-datepicker-header ng-tns-c75-8">
    <button type="button" pripple="" class="p-ripple p-element p-datepicker-prev p-link ng-tns-c75-8 ng-star-inserted">
        <span class="p-datepicker-prev-icon pi pi-chevron-left ng-tns-c75-8"/>
    </button>
    <!---->
    <div class="p-datepicker-title ng-tns-c75-8">
        <button type="button" class="p-datepicker-month p-link ng-tns-c75-8 ng-star-inserted"> May </button>
        <!---->
        <button type="button" class="p-datepicker-year p-link ng-tns-c75-8 ng-star-inserted"> 2023 </button>

        <table class="p-datepicker-calendar ng-tns-c75-8">
            <thead class="ng-tns-c75-8">
                <tr class="ng-tns-c75-8">
                    <!---->
                    <th scope="col" class="ng-tns-c75-8 ng-star-inserted">
                        <span class="ng-tns-c75-8">Su</span>
                    </th>
                    <th scope="col" class="ng-tns-c75-8 ng-star-inserted">
                        <span class="ng-tns-c75-8">Mo</span>
                    </th>
                    <th scope="col" class="ng-tns-c75-8 ng-star-inserted">
                        <span class="ng-tns-c75-8">Tu</span>
                    </th>
                    <th scope="col" class="ng-tns-c75-8 ng-star-inserted">
                        <span class="ng-tns-c75-8">We</span>
                    </th>
                    <th scope="col" class="ng-tns-c75-8 ng-star-inserted">
                        <span class="ng-tns-c75-8">Th</span>
                    </th>
                    <th scope="col" class="ng-tns-c75-8 ng-star-inserted">
                        <span class="ng-tns-c75-8">Fr</span>
                    </th>
                    <th scope="col" class="ng-tns-c75-8 ng-star-inserted">
                        <span class="ng-tns-c75-8">Sa</span>
                    </th>
                    <!---->
                </tr>
            </thead>
            <tbody class="ng-tns-c75-8">
                <tr class="ng-tns-c75-8-star-inserted">
                    <!---->
                    <td class="ng-tns-c75-8 p-datepicker-other-month ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 p-disabled ng-star-inserted">30<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">1<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">2<!---->
                            <!---->
                            <!---->
                        </span>
                        <!----><!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">3<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripplep-element ng-tns-c75-8 ng-star-inserted">4<!---->
                            <!---->
                            <!---->
                        </span>
                        <!----><!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">5<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">6<!---->
                            <!---->
                            <!---->
                        </span>
                        <!----><!---->
                    </td>
                    <!---->
                </tr>
                <tr class="ng-tns-c75-8 ng-star-inserted">
                    <!---->
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">7<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">8<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">9<!---->
                            <!---->
                            <!---->
                        </span>
                        <!----><!---->
                    </td>
                    <td class="ng-tns-c75-8 p-datepicker-today ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted" tabindex="0">10<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">11<!----><!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">12<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">13<!----><!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <!---->
                </tr>
                <tr class="ng-tns-c75-8 ng-star-inserted">
                    <!---->
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">14<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">15<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">16<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">17<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">18<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">19<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">20<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <!---->
                </tr>
                <tr class="ng-tns-c75-8 ng-star-inserted">
                    <!---->
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">21<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">22<!----><!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">23<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">24<!----><!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">25<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">26<!----><!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">27<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <!---->
                </tr>
                <tr class="ng-tns-c75-8 ng-star-inserted">
                    <!---->
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">28<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">29<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">30<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">31<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 p-datepicker-other-month ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 p-disabled ng-star-inserted">1<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 p-datepicker-other-month ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 p-disabled ng-star-inserted">2<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 p-datepicker-other-month ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 p-disabled ng-star-inserted">3<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <!---->
                </tr>
                <!---->
            </tbody>
        </table>

Answer 1

As per the information you provided this is what I understand,

• The user needs to select a date from a calendar popup in a web application.
• The user clicks on the date field, which triggers the calendar to appear as a datepicker.
• The user needs to select a specific date, which might not be in the current month displayed on the calendar.
• To select the desired date, the user clicks the next button until they reach the desired month, and then clicks the corresponding day on the calendar.

However, there seems to be an issue with the loop that is responsible for clicking the next button. The loop is not working as expected, which is causing problems in the date selection process.

Here is a piece of code that can help you:

public class datePicker {

    public static void main(String[] args) {
        try {
            ChromeOptions ops = new ChromeOptions();
            ops.addArguments("--remote-allow-origins=*");
            WebDriver driver = new ChromeDriver(ops);
            driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
            WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
            driver.get("https://uxsolutions.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&maxViewMode=4&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox");
            driver.manage().window().maximize();
            Thread.sleep(2000);
            driver.findElement(By.xpath("//div[@id='sandbox-container']/input")).click();
            Thread.sleep(2000);
            while (!driver.findElement(By.xpath("//th[@class='datepicker-switch']")).getText().contentEquals("July 2023")) {
                driver.findElement(By.xpath("//th[@class='next']")).click();
                Thread.sleep(500);
            }
            driver.findElement(By.xpath("//td[@class='day' and contains(text(),'12')]")).click();

            Thread.sleep(5000);
            
            
            driver.get("https://jqueryui.com/datepicker/");
            driver.manage().window().maximize();
            Thread.sleep(2000);
            driver.switchTo().frame(0);
            driver.findElement(By.xpath("//input[@id='datepicker']")).click();
            Thread.sleep(200);
            while (!driver.findElement(By.className("ui-datepicker-month")).getText().contentEquals("July")) {
                driver.findElement(By.cssSelector("a[data-handler='next']")).click();
                Thread.sleep(500);
            }
            driver.findElement(By.xpath("//a[@data-date='12']")).click();

                Thread.sleep(5000);
                driver.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}