# Selecting date from date picker field

**URL:** <https://forum.katalon.com/t/selecting-date-from-date-picker-field/8918>\
**Category:** Web Testing\
**Tags:** katalon-studio\
**Created:** [January 18, 2018, 4:05am UTC](https://forum.katalon.com/t/selecting-date-from-date-picker-field/8918 "2018-01-18T04:05:54Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Saranya](https://avatars.discourse-cdn.com/v4/letter/s/8e8cbc/32.png) [@Saranya](https://forum.katalon.com/u/Saranya)\
**Post date:** [January 18, 2018, 4:05am UTC](https://forum.katalon.com/t/selecting-date-from-date-picker-field/8918/1 "2018-01-18T04:05:54Z")

</div>

Not able to automate datepicker field to select the date.

I have my testdata in excelsheet and is linked with Katalon project. I’m not able set the needed date in datepicker field.

‘Set Text’ doesn’t work, because the field is not editable manually. You can only select a date through datepicker.

Please help me to resolve this issue. I have attached the screenshot. ![](https://s3.amazonaws.com/katalon-forum/editor/ea/p65wlyy6url0.png "Image: https://s3.amazonaws.com/katalon-forum/editor/ea/p65wlyy6url0.png")

[Picture1.png](https://s3.amazonaws.com/katalon-forum/editor/ea/p65wlyy6url0.png)

---

<div class="post-metadata">

**Author:** ![Zarashima](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/zarashima/32/928_2.png) [@Zarashima](https://forum.katalon.com/u/Zarashima)\
**Post date:** [January 18, 2018, 5:45am UTC](https://forum.katalon.com/t/selecting-date-from-date-picker-field/8918/2 "2018-01-18T05:45:15Z")

</div>

Hi Saranya,

You can try this project: [https://github.com/katalon-studio/katalon-web-automation](https://github.com/katalon-studio/katalon-web-automation). This project has a custom keyword to handle date picker: [https://github.com/katalon-studio/katalon-web-automation/blob/master/Keywords/reusableComponents/DatepickerHandler.groovy](https://github.com/katalon-studio/katalon-web-automation/blob/master/Keywords/reusableComponents/DatepickerHandler.groovy) and you can use it as a solution to work with your calendar 🙂

---

<div class="post-metadata">

**Author:** ![Jean-Francois\_Picard](https://avatars.discourse-cdn.com/v4/letter/j/8dc957/32.png) [@Jean-Francois\_Picard](https://forum.katalon.com/u/Jean-Francois_Picard)\
**Post date:** [March 9, 2018, 2:20pm UTC](https://forum.katalon.com/t/selecting-date-from-date-picker-field/8918/3 "2018-03-09T14:20:36Z")

</div>

Can anyone provide with instructions on how to build / use that project? Thanks!

---

<div class="post-metadata">

**Author:** ![dan1](https://avatars.discourse-cdn.com/v4/letter/d/82dd89/32.png) [@dan1](https://forum.katalon.com/u/dan1)\
**Post date:** [April 2, 2018, 12:11pm UTC](https://forum.katalon.com/t/selecting-date-from-date-picker-field/8918/4 "2018-04-02T12:11:41Z")

</div>

hi i am not able to automate date picker field to select the date can some one help on this issues

---

<div class="post-metadata">

**Author:** ![Rosary\_Philip](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/rosary_philip/32/16103_2.png) [@Rosary\_Philip](https://forum.katalon.com/u/Rosary_Philip)\
**Post date:** [April 5, 2018, 6:46am UTC](https://forum.katalon.com/t/selecting-date-from-date-picker-field/8918/5 "2018-04-05T06:46:44Z")

</div>

Hi Vinh Nguyen /Team,

I am unable to access both links

([https://github.com/katalon-studio/katalon-web-automation](https://github.com/katalon-studio/katalon-web-automation)  
[https://github.com/katalon-studio/katalon-web-automation/blob/master/Keywords/reusableComponents/DatepickerHandler.groovy](https://github.com/katalon-studio/katalon-web-automation/blob/master/Keywords/reusableComponents/DatepickerHandler.groovy)).

Is there any way, where i can access the instructions on how to build / use that project?  
Also the “custom keyword” to handle date picker.

Please guide me. Awaiting your reply…  
Thanks in advance…

---

<div class="post-metadata">

**Author:** ![crokatalontest](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@crokatalontest](https://forum.katalon.com/u/crokatalontest)\
**Post date:** [April 5, 2018, 12:53pm UTC](https://forum.katalon.com/t/selecting-date-from-date-picker-field/8918/6 "2018-04-05T12:53:18Z")

</div>

Why don’t you use Jquery to set or get value from date-picker??  
I gave up on Katalon methods for setting and getting values.  
To set value you can do this  
$(’#yourElementID’).val(‘09.04.2018’)

In your script you can put this:

WebUI.executeJavaScript((’$("#IdOfDatePicker").val("’ + YourGlobalVariable) + ‘")’, [])

---

<div class="post-metadata">

**Author:** ![Luis\_alberto\_guzman2](https://avatars.discourse-cdn.com/v4/letter/l/0ea827/32.png) [@Luis\_alberto\_guzman2](https://forum.katalon.com/u/Luis_alberto_guzman2)\
**Post date:** [April 5, 2018, 1:31pm UTC](https://forum.katalon.com/t/selecting-date-from-date-picker-field/8918/7 "2018-04-05T13:31:05Z")

</div>

Hello, I have the same problem and it is my solution.

WebUI.focus(findTestObject(‘Page\_Business Insurance/input\_Fecha’))

WebUI.executeJavaScript(’$(\’:input\’).removeAttr(\‘readonly\’)’, [])

WebUI.delay(1)

WebUI.setText(findTestObject(‘Page\_Business Insurance/input\_Fecha’), ‘01/11/2018’)

WebUI.sendKeys(findTestObject(‘Page\_Business Insurance/input\_Fecha’), Keys.chord(Keys.ENTER))

---

<div class="post-metadata">

**Author:** ![Saranya1](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@Saranya1](https://forum.katalon.com/u/Saranya1)\
**Post date:** [April 24, 2018, 9:33am UTC](https://forum.katalon.com/t/selecting-date-from-date-picker-field/8918/8 "2018-04-24T09:33:45Z")

</div>

> [Luis alberto guzman](https://forum.katalon.com/profile/2735/Luis%20alberto%20guzman) said:
> 
> Hello, I have the same problem and it is my solution.
> 
> WebUI.focus(findTestObject(‘Page\_Business Insurance/input\_Fecha’))
> 
> WebUI.executeJavaScript(‘$(\’:input\‘).removeAttr(\‘readonly\’)’, )
> 
> WebUI.delay(1)
> 
> WebUI.setText(findTestObject(‘Page\_Business Insurance/input\_Fecha’), ‘01/11/2018’)
> 
> WebUI.sendKeys(findTestObject(‘Page\_Business Insurance/input\_Fecha’), Keys.chord(Keys.ENTER))

Thank you. It works for me !!!

---

<div class="post-metadata">

**Author:** ![Shweta\_sao](https://avatars.discourse-cdn.com/v4/letter/s/54ee81/32.png) [@Shweta\_sao](https://forum.katalon.com/u/Shweta_sao)\
**Post date:** [August 2, 2018, 2:03pm UTC](https://forum.katalon.com/t/selecting-date-from-date-picker-field/8918/9 "2018-08-02T14:03:07Z")

</div>

> [Luis alberto guzman](https://forum.katalon.com/profile/2735/Luis%20alberto%20guzman) said:
> 
> Hello, I have the same problem and it is my solution.
> 
> WebUI.focus(findTestObject(‘Page\_Business Insurance/input\_Fecha’))
> 
> WebUI.executeJavaScript(‘$(\’:input\‘).removeAttr(\‘readonly\’)’, )
> 
> WebUI.delay(1)
> 
> WebUI.setText(findTestObject(‘Page\_Business Insurance/input\_Fecha’), ‘01/11/2018’)
> 
> WebUI.sendKeys(findTestObject(‘Page\_Business Insurance/input\_Fecha’), **Keys.chord(Keys.ENTER))**

Hi there,

the Bold line is getting underlined in my script do I need to import something…???

I am automating a mobile app and got this solution… just trying my luck… please help…

thanks in advance

---

<div class="post-metadata">

**Author:** ![sravan2](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@sravan2](https://forum.katalon.com/u/sravan2)\
**Post date:** [August 17, 2018, 12:23pm UTC](https://forum.katalon.com/t/selecting-date-from-date-picker-field/8918/10 "2018-08-17T12:23:42Z")

</div>

Hi there,

Please add the below 2 packages

import org.apache.commons.lang3.StringUtils

import org.openqa.selenium.Keys as Keys

---

<div class="post-metadata">

**Author:** ![Paola\_Godoy](https://avatars.discourse-cdn.com/v4/letter/p/ebca7d/32.png) [@Paola\_Godoy](https://forum.katalon.com/u/Paola_Godoy)\
**Post date:** [September 8, 2018, 3:23pm UTC](https://forum.katalon.com/t/selecting-date-from-date-picker-field/8918/11 "2018-09-08T15:23:05Z")

</div>

> [crokatalontest](https://forum.katalon.com/profile/5173/crokatalontest) said:
> 
> Why don’t you use Jquery to set or get value from date-picker??  
> I gave up on Katalon methods for setting and getting values.  
> To set value you can do this  
> $(‘#yourElementID’).val(‘09.04.2018’)
> 
> In your script you can put this:
> 
> WebUI.executeJavaScript((‘$(“#IdOfDatePicker”).val("’ + YourGlobalVariable) + ‘")’, )

HI!  
Where can I set de value?

---

<div class="post-metadata">

**Author:** ![erikpatar](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/erikpatar/32/23869_2.png) [@erikpatar](https://forum.katalon.com/u/erikpatar)\
**Post date:** [February 25, 2019, 3:17am UTC](https://forum.katalon.com/t/selecting-date-from-date-picker-field/8918/12 "2019-02-25T03:17:22Z")

</div>

Luis\_alberto

why in my katalon not work, but No error in execute javascript.,

and only error in object repository Date picker not found.

 ![object%20repo](https://europe1.discourse-cdn.com/katalon/original/2X/9/94b8ed9f9d64517ac2e5aea37555ef4f881a32ec.png)

.

 ![sample%20date](https://europe1.discourse-cdn.com/katalon/original/2X/5/58a6fea9aba2352edb3f260809b9670e44afc572.png)

---

<div class="post-metadata">

**Author:** ![Luis\_alberto\_guzman1](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/luis_alberto_guzman1/32/5328_2.png) [@Luis\_alberto\_guzman1](https://forum.katalon.com/u/Luis_alberto_guzman1)\
**Post date:** [August 20, 2019, 2:10pm UTC](https://forum.katalon.com/t/selecting-date-from-date-picker-field/8918/13 "2019-08-20T14:10:22Z")

</div>

you are using the attribute “readonly = true” to define your object, when you ejecute the javascript you removed that attribute in the web page and the attribute changed to “readonly = false”.

try to define your object with the Id value litke this.

 ![image](https://europe1.discourse-cdn.com/katalon/original/2X/9/962d0a044eb477a056bf12a9aa545aded702d6f9.png)

---

<div class="post-metadata">

**Author:** ![venkata.bommareddy](https://avatars.discourse-cdn.com/v4/letter/v/50afbb/32.png) [@venkata.bommareddy](https://forum.katalon.com/u/venkata.bommareddy)\
**Post date:** [August 27, 2019, 4:04pm UTC](https://forum.katalon.com/t/selecting-date-from-date-picker-field/8918/14 "2019-08-27T16:04:58Z")

</div>

> [@Luis\_alberto\_guzman2](#):
>
> WebUI.focus(findTestObject(‘Page\_Business Insurance/input\_Fecha’))
> 
> WebUI.executeJavaScript(’$(\’:input\’).removeAttr(\‘readonly\’)’, )
> 
> WebUI.delay(1)
> 
> WebUI.setText(findTestObject(‘Page\_Business Insurance/input\_Fecha’), ‘01/11/2018’)
> 
> WebUI.sendKeys(findTestObject(‘Page\_Business Insurance/input\_Fecha’), Keys.chord(Keys.ENTER))

Thanks a lot, this solution is working for my Date picker for jQuery v4.0.6.
