Here is a working solution for choosing a date from a datepicker using robot framework.
Datepickers are basically input tags but some of them have an extra attribute "readonly" due to which it becomes difficult to add date into it.
1)First Check if datepicker is readonly or not.
-inspect the page , locate the tag and check.
if it is not read only we can directly use the below code to under previous day date.
${Yeterday_Date} = Get Current Date result_format=%d/%m/%Y increment=-1 day
Input Text ${locator} ${Yeterday_Date}
2)If it has an attribute readonly, remove that attribute and input date into it.
Execute Javascript document.querySelector("locator").removeAttribute("readonly");
Execute Javascript document.querySelector("locator").removeAttribute("onchange");
Execute Javascript document.querySelector("locator").setAttribute("value", "${Yeterday_Date}");
Some datepickers have an onchange attribute which is invoked after readonly attribute is removed, so its better to remove both the attributes.
Related
I have been struggling for days to find a way to set a date of a datepicker using Selenium with Python.
I found out that there is a hidden element with the date, so I tried javascript executor to set a value to that hidden element. I tried different ways, and the scripts seem to execute fine, but the date doesn't change.
My script looks like this:
#input date by using hidden date method 1
element = browser.find_element_by_xpath("/html[1]/body[1]/div[1]/form[1]/table[1]/tbody[1]/tr[1]/td[1]/div[1]/table[1]/tbody[1]/tr[2]/td[1]/div[1]/table[1]/tbody[1]/tr[1]/td[1]/table[1]/tbody[1]/tr[2]/td[1]/table[1]/tbody[1]/tr[1]/td[2]/input[1]")
browser.execute_script("arguments[0].setAttribute('value', '{0}')".format("2019-10-31"), element )
element.submit()
and
#input date by using hidden date method 2
date = "2019-10-31"
element= browser.find_element_by_xpath("/html[1]/body[1]/div[1]/form[1]/table[1]/tbody[1]/tr[1]/td[1]/div[1]/table[1]/tbody[1]/tr[2]/td[1]/div[1]/table[1]/tbody[1]/tr[1]/td[1]/table[1]/tbody[1]/tr[2]/td[1]/table[1]/tbody[1]/tr[1]/td[2]/input[1]")
browser.execute_script('arguments[0].setAttribute("value", "%s")' % date, element)
element.submit()
The HTML code and picture of the website looks like this:
HTML of date picker:
Date picker element:
Edit:
Updated HTML with the hidden element visible
The <input> element is having the type attribute set as hidden. You can edit/remove the type attribute and set the value as follows:
element = browser.find_element_by_xpath("/html[1]/body[1]/div[1]/form[1]/table[1]/tbody[1]/tr[1]/td[1]/div[1]/table[1]/tbody[1]/tr[2]/td[1]/div[1]/table[1]/tbody[1]/tr[1]/td[1]/table[1]/tbody[1]/tr[2]/td[1]/table[1]/tbody[1]/tr[1]/td[2]/input[1]")
browser.execute_script("arguments[0].removeAttribute('type')", element)
new_element = browser.find_element_by_xpath("/html[1]/body[1]/div[1]/form[1]/table[1]/tbody[1]/tr[1]/td[1]/div[1]/table[1]/tbody[1]/tr[2]/td[1]/div[1]/table[1]/tbody[1]/tr[1]/td[1]/table[1]/tbody[1]/tr[2]/td[1]/table[1]/tbody[1]/tr[1]/td[2]/input[1]")
browser.execute_script("arguments[0].setAttribute('value','2019-10-31')", new_element)
References
You can find a couple of relevant detailed discussions in:
How to Change a html line code with python
Selenium Datepicker using JavascriptExecutor
Is there a way to add a new attribute with a value to an element using selenium python?
I'm new to JavaScript and still kind of new web development in general so I may be off in my understanding here somewhere.
Here goes:
In an ASP.NET MVC project with Entity Framework and Razor.
I'm using the bootstrap datepicker to try to create an inline multidate selector. I use a hidden input field to capture the list of dates from the datepicker as follows (note: the reason I'm using a hidden input field here is because I don't want to show a textbox, only the inline datepicker. However, I can't get the DatePicker to both appear inline and also use an input div to capture the multidate string.):
<div id="datepicker" class="datepicker datepicker-inline" data-date-format="dd/mm/yyyy"/>
<input type="hidden" id="hiddenForDates" value="#Model.SelectedDateString" name='#Html.NameFor(model => model.SelectedDateString)'/>
Then some script to tie it in:
$(document).ready(function () {
$('.datepicker').datepicker({
multidate: true,
inline: true
});
$('#datepicker').on("changeDate", function () {
$('#hiddenForDates').val(
$('#datepicker').datepicker('getFormattedDate'))
});
});
The HTML input captures the string of dates from the datepicker (like "01/01/2016, 01/02/2015"...). Then in the script I'm setting up the DatePicker and when the changeDate event occurs, updating the value in the input to the string of dates.
The problem I'm having is when loading the page, I want the DatePicker to seed with the value from the input (right now it seems to populate one way). When my page loads, the hidden input contains the string of dates but the datepicker has no dates selected.
I've tried setDates and setUTCDates per the documentation but that doesn't seem to help (my value is a string of comma separated values, but even if I build an array of Dates it doesn't make a difference).
Does anyone have any suggestions?
Note: I should also point out that I have been able to get this to work using:
#Html.TextBoxFor(model => model.SelectedDateString, new{ #class = form-control datepicker})
but this does not allow me to use an inline datepicker.
I have multiple datepicker controls on single page binded to input controls.
When I click on any of the input control datepicker control linked to that input gets visible.
Now I want to get input for which the current instance of datepicker is being shown on another JS events.
Is it possible?
You can try using the $.datepicker._getInst(target) method to get any specific datepicker on your page. You just have to pass in a target element, which you can do so by just passing the id using document.getElementById (don't use JQuery or it will return undefined).
So like so:
var id = document.getElementById('someId');
//replace someId with the id of the datepicker currently visible.
var inst = window.$.datepicker._getInst(id);
This is especially helpful if you are trying to get the current instance of a datepicker that's an inline element (not attached to an input).
As it is clear in the subject itself.
I have my datepicker fields blank at the time of creation and set to Null as default.
But I can't find a way to set a datepicker field to set it to blank again once a date is selected.
is there a way or I am missing something?
I've got two html textboxes (txtFrom and txtTo) which is read-only. These two textboxes are used to show dates from datepicker.
My scenario is when txtTo textbox is filled with date i want to call a javascript which subtracts the two dates (txtTo - txtFrom) and enter the result in another textbox named txtDays.
How can i do this? I can't call onkeypress or onkeyup event since the textbox is read-only.
You can use onchange event of javascript.
In html Section
<asp:TextBox ID="txtTo" runat="server" onchange="DateComparisionJavascriptFun();"></asp:TextBox>
In Javascript Block
<script type="text/javascript">
function DateComparisionJavascriptFun()
{
alert("Validate dates here.");
}
</script>
you should have callback function on that datepicker, when user selects a date it could call this function
dont know if its yours or third party datepicker but he should have defined callback when user selects a date and than it writes it to the text input, you should be able to add your function at this place
The onchange event only fires when the text field loses focus, so that probably won't work for you.
If you're programatically changing the text of the date field, then you should probably just change the other fields at the same time.
If you're going to be doing this sort of thing in more than one place, I'd highly recommend using a data binding framework like Knockout JS, and use a ViewModel with a computed property.