CODEWITHSUNDEEP
jqueryseleniumwebdriver
Ayyappadas
Ayyappadas

Reputation: 103

Selenium web driver selection of date from jquery datepicker-Ui

How do selenium web driver can select a jquery datepicker-UI date to a particular date field. 1) I have tried using Jscript for setting the date..But however the date msut be selected from the jquery pop up window in order to get the form submitted.

Please suggest some way to select the date automatically and post the selected value into the date field.

Thanks

Upvotes: 4

Views: 14056

Answers (4)

Nadear
Nadear

Reputation: 11

I have a webpage and It have 2 ui-date pickers for choose each date. I use javascript and it's work
My page

Number 1 : id : POcheck_D......Number 2 : id : fromDate........Number 3 : id : toDate

public void TestCase1()
    {
        //open brower
        driver = new InternetExplorerDriver();
        driver.Url = "xxxYourPagexxxx.com";
        driver.Navigate();

        //click check box
        driver.FindElement(By.Id("POcheck_D")).Click();

        //insert value to ui-datepicker
        ((IJavaScriptExecutor)driver).ExecuteScript("$('#fromDate').val('01/01/2016').change();");
        ((IJavaScriptExecutor)driver).ExecuteScript("$('#toDate').val('31/12/2017').change();");

        //click button search
        driver.FindElement(By.Id("btn_search")).Click();
    }

Upvotes: 1

cpomp
cpomp

Reputation: 103

I found some links with less than optimal implementations. Using Selenium's Select class it not too hard. Here is the utility I can up with

public static void selectDateFromJqueryDatepicker(WebElement datePickerDiv, int expYear, int expMonth, int expDay) {
    //handle 2 digit years
    if(expYear < 100)
        expYear += 2000;

    //select the given year
    Select yearSel= new Select(datePickerDiv.findElement(By.className("ui-datepicker-year")));
    yearSel.selectByValue(String.valueOf(expYear));

    //select the given month
    Select monthSel= new Select(datePickerDiv.findElement(By.className("ui-datepicker-month")));
    monthSel.selectByValue(String.valueOf(expMonth - 1)); //value start @ 0 so we need the -1

    //get the table
    WebElement calTable= datePickerDiv.findElement(By.className("ui-datepicker-calendar"));
    //click on the correct/given cell/date
    calTable.findElement(By.linkText(String.valueOf(expDay))).click();
}

You just need to pass the year/month/day in integer format and the outer datepicker div. In my case I found it like this

WebElement datePickerDiv= findElement(By.id("ui-datepicker-div"));

Upvotes: 1

lAH2iV
lAH2iV

Reputation: 1159

    driver.findElement(By.id("datepicker")).clear();
    driver.findElement(By.id("datepicker")).sendKeys("");    // This will add focus and open the Date picker
    String Year = driver.findElement(By.cssSelector("span.ui-datepicker-year")).getText();       //This will give you Year 
    String month = driver.findElement(By.cssSelector("span.ui-datepicker-month")).getText();      //This will give you Month

    driver.findElement(By.cssSelector("span.ui-icon.ui-icon-circle-triangle-e")).click();   // Click for Next Month
    String SelectedDate = driver.findElement(By.cssSelector(".ui-state-highlight")).getText();       // This will get you the selected Date 

    driver.findElement(By.cssSelector("span.ui-icon.ui-icon-circle-triangle-w")).click();      // Click for Previos Month
    driver.findElement(By.linkText("6")).click();   // Instead of 6 use value date which you want to select.

Hope this helps You

Thanks
Vishal

Upvotes: 3

Xander
Xander

Reputation: 139

The datefield is a normal text input field. So you can do a sendKeys to the date input field in the correct format like this:

// Find the text input element by its name
WebElement element = driver.findElement(new ByIdOrName("datefield")));

// Enter a date in your format
element.sendKeys("01/01/2009");

Upvotes: 2

Related Questions