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.

date picker with webdriver

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.

Selenium Tutorials: 

Comments

REALLY APPRECIATE FOR THE CONTENTS ..& QUITE USEFUL.

Do we need to import any package to make use of this method?

this is the xpath
<div class="sg_update__fieldsupdate" style="display: block;">
<span class="sg_update__fieldsreadlbl">Security Group:</span>
<span class="projectSecurityGroupId">
<select class="sg_update__fieldinput layt_customselect" style="display: none;">
<option value=""/>
<option value="1">Default</option>
<option value="2">test</option>
</select>
<div class="chosen-container chosen-container-single sg_update__fieldinput layt_customselect chosen-with-drop chosen-container-active" style="width: 240px;" title="">
<a class="chosen-single" tabindex="-1">
<span>Default</span> /// value is changing here
when i select dropdwon value is changing in span. slelenium click or Select class or sendkeys or Action class click is not working. script just stucked here. how can i solve? I will be grateful to you if you can solve this. how can i use jquery or javascript excutor for this?

Add new comment