JQuery And KendoUI Date Picker Calendar example

In this tutorial, we will see how to work with Date Picker by taking different calendars. We will take three different calendars and see how to work with them. There are different date pickers used in applications example JQuery date picker, KendoUI date picker etc.

Some date pickers display previous or next month dates also depends on the month. And in these cases, how should we work. When ever we work with calendar, it is very important in identifying the locators. Based on our requirement we can define simple xpath to work with calendar.

Let us see such example first by taking a calendar which looks like above.

@Test
	public void jQueryCalendarMultipleMonths() {
		driver.navigate().to("http://jqueryui.com/resources/demos/datepicker/other-months.html");
		WebElement calElement=driver.findElement(By.id("datepicker"));
		calElement.click();
		selectDatefromMultiDate("30");
	}

Method selectDateFromMultiCalendar() looks like below. It has a single and simple xpath to select desired date from date picker.

public void selectDatefromMultiDate(String date) {
		By calendarXpath=By.xpath("//td[not(contains(@class,'ui-datepicker-other-month'))]/a[text()='"+date+"']");
		//By calendarXpath=By.xpath("table//td/a[text()='"+date+"']");
		driver.findElement(calendarXpath).click();
	}

In the above method, if you observe we have defined xpath to make our script to click on date. As said if there are previous month dates are also displayed, you will have multiple dates. Look at the below example, it has 29 and 30 of previous month dates and '1' and '2' of the next month and the current month dates.

By calendarXpath=By.xpath("table//td/a[text()='"+date+"']");

If we use above xpath path and try to select '29' or '30', it will select the first element i.e previous month not the current month.

So in order to make sure we select the current month date, we should modify the xpath as below.

 xpath = //td[not(contains(@class,'ui-datepicker-other-month'))]/a[text()='"+date+"']

Now let us see the other way of working with date picker with KendoUI Calendar.

@Test
	public void kendoCalendarExample() {
		driver.navigate().to(kendoURL);
		WebElement calIcon=driver.findElement(By.cssSelector(".k-icon.k-i-calendar"));
		calIcon.click();
		WebDriverWait wait = new WebDriverWait(driver, 10);
		wait.until(ExpectedConditions.presenceOfElementLocated(By.id("datetimepicker_dateview")));
		System.out.println("Calendar Found");
		selectKendoDate("10");
	}
	
public void selectKendoDate(String date) {
		
		wait.until(ExpectedConditions.presenceOfElementLocated(By.className("k-content")));
		WebElement table = driver.findElement(By.className("k-content")); 

		System.out.println("Kendo Calendar");
		List<WebElement> tableRows = table.findElements(By.xpath("//tr"));
				for (WebElement row : tableRows) {
			List<WebElement> cells = row.findElements(By.xpath("td"));
			
			for (WebElement cell : cells) {
				if (cell.getText().equals(date)) {
					driver.findElement(By.linkText(date)).click();
				}
			}
		}
	}

Here is an other example working with JQuery Date picker.

@Test
	public void jQueryCalendarExample() {
		driver.navigate().to(jQueryURL);
		WebElement frameElement=driver.findElement(frameLocator);
		driver.switchTo().frame(frameElement);
		wait.until(ExpectedConditions.presenceOfElementLocated(tagText));
		driver.findElement(tagText).click();
		selectJQueryDate("21");
	}
	
public void selectJQueryDate(String date) {
		
		wait.until(ExpectedConditions.presenceOfElementLocated(By.id("ui-datepicker-div")));
		WebElement table = driver.findElement(By.className("ui-datepicker-calendar")); 
		System.out.println("JQuery Calendar Dates");
		
		List<WebElement> tableRows = table.findElements(By.xpath("//tr"));
				for (WebElement row : tableRows) {
			List<WebElement> cells = row.findElements(By.xpath("td"));
			
			for (WebElement cell : cells) {
				if (cell.getText().equals(date)) {
					driver.findElement(By.linkText(date)).click();
				}
			}
		}
	}
	

Hope the examples helps you. Feel free to comment you query or issue if you get any.