How to set datepicker using webdriverIO? - javascript

I have a task where I need to automate the booking.com page, and one of the tasks is to select check-in and check-out dates. How I can do this? I automated , that I can open calendar, but I don't know how to select dates.
Here is my code
Cucumber step
And user selects dates from "2020-06-16" to "2020-06-26"
BookingStep
When('user selects dates from {string} to {string}',()=>{
BookingPage.checkInOut.click();
browser.debug(); });
Booking page
class BookingPage{
get whereAreYouGoingTextBox(){return $('#ss')};
get checkInOut(){return $('div.xp__dates-inner')}; }export default new BookingPage();

Note: My answer is a solution for the ability to set a value in the date field, and only interact with the cancel link on the date picker object.
I battled this for a while and came up with a solution that works for me, I hope it works for you also.
First when I inspect the datepicker object, it generates a random XPATH/CSS Selector. As a result if you inspect & copy the selector and try to use it in your next test, it will fail since the xpath/selector is randomly generated. I got around this issue by identifying a unique css ID that lived above the datepicker element, and used that as my starting point. Then I looked at the html path from that point to the datepicker input tag, and I appended that path. This solved the first problem of not being able to set a value in the date picker text field. Here is an example using xpath:
//*[#id="filtersSideBar"] - This is the unique ID found above the datepicker
/div[2]/div/input - This is the path to the date picker from the unique ID
$('//*[#id="filtersSideBar"]/div[2]/div/input').waitForClickable(3000);
$('//*[#id="filtersSideBar"]/div[2]/div/input').setValue('2020-01-01');
Now that you have a date inside the date picker field, you have to close the datepicker object. I had to use Javascript to accomplish this. First open the datepicker object, then inspect the 'Cancel' link element. Copy the CSS Selector ID. Lets say it ends up being #cancelLink
Now you run this code:
browser.execute(() => document.querySelector('#cancelLink').click());
Which will then close the datepicker object so that you can proceed with your testing.
Here is my actual code:
class DataSearchSortAndDateRangePage {
get startDate() { return $('//
[#id="filtersSideBar"]/div[2]/div/div[2]/div[1]/div/input'); }
setStartDate(date) {
this.startDate.waitForClickable( { timeout: browser.config.timeOutValue } );
this.startDate.setValue(date);
browser.execute(() => document.querySelector('body > div.md-datepicker-dialog.md-theme-default > div.md-datepicker-body > div.md-dialog-actions.md-datepicker-body-footer > button > div > div').click());
}
}
export default new DataSearchSortAndDateRangePage();
I hope this helps out =)

Related

get click date in addEvent modal

I'm working on a fullcalendar project.
When I click on a day of my calendar it appeared a modal where you put the name of your event, the start date and end date.
The input for start and end date is a datetime-local and I was looking for a way that when you click on a day and the modal show up in my start input is already visualize the day.
This is my modal and, for example, when I click on 4th of April it appeared directly like this, without me having to put it manually: like this ->example.
I found online this solution to get the clicked date:
dayClick: function(date, jsEvent, view, resourceObj) {
alert(date.format('DD/MM/YYYY 08:00')); //format i decide
},
But i dont know how to applied to my code to have it as input and not alert
I found also this way, I like it better because I can add the hour I want:
var startDateSelected = moment(event.startStr).format("DD-MM-YYYY 08:00:00");
var endDateSelected = moment(event.endStr).format("DD-MM-YYYY 17:30:00");
but still havent found a way to applied to my input datelocal-time
At the end I found this solution:
select: function select(event, date) {
$('#addNewEvent').modal('show');
$('#calendar').fullCalendar('refetchEvents',event._id);
var now = new Date(event);
document.getElementById('starts').value = now.toISOString().slice(0,16);
document.getElementById('ends').value = now.toISOString().slice(0,16);
}
This is the function that open my modal and fecth the events from my database by ID
And the ID mention in getElementById are from my two datetime-local input
I hope someone can find it useful.
It refered to Fullcalendar v3 because that the version the template I'm using have

Access Selected Date from dynamically created Calendar Control asp/javascript/VB.net

UPDATE: To anyone who still may read this, I used a completely different way of doing this. With AjaxToolkit's Calendar Extender, I was able to easily add a calendar dynamically and use Javascript to change the format of different date inputs so that calendar extender could read it. Highly recommend you go the AjaxToolkit route if you are trying to do something similar to me.
I have dynamically created a Calendar control(asp:Calendar), Buttons, and dropdown lists for a Comment Class. The Comment Class will always have a textbox in it, but if the ID/attribute label of the textbox is DOB or birthday or something similar, these other controls get dynamically created.
So far, the calendar, dropdown lists, and one of the buttons works, but I am have trouble with the last button. Currently, I dynamically add a script that is used for one of the buttons to show and hide the div that contains that Calendar, dropdown lists, and relevant buttons, which works amazingly. I am trying to add another script trigger on a button press to take the selected date from the Calendar and put it in the textbox.
Right now, I am just trying to get access to the Calendar. I am using code that looks like this:
function use_calendarDate(){
var calendarDate = '<%=question128_Cal1.SelectedDate%>';
alert(calendarDate);
}
I found this function in another question similar to this, but instead of getting the date, it just puts <%=question128_Cal1.SelectedDate%> as a string into the alert box.
This LINK shows exactly what I am trying to do, but I get a different result. Can anyone help me with what I am doing wrong here?
Interestingly, when I use
var calendarDate = question128_Cal1.SelectedDate;
OR
var calendarDate = question128_Cal1.value;
My alert box tells me undefined.
Thanks in advance.
In case it is needed, my calendar control is created like this:
In Page_Init
Dim calendar1 As New Calendar
Call BuildCalendar(calendar1)
calendarDiv.Controls.Add(calendar1)
Here is the function referenced above.
Private Sub BuildCalendar(ByRef calendar1 As Calendar)
calendar1.ID = "Cal1"
calendar1.SelectedDate = DateTime.Today
calendar1.Attributes.Add("runat", "server")
calendar1.Attributes.Add("OnClientDateChanged", "onDateChange")
calendar1.Attributes.Add("borderwidth", "2px")
calendar1.Attributes.Add("BackColor", "White")
calendar1.Attributes.Add("width", "200px")
calendar1.Attributes.Add("ForeColor", "Black")
calendar1.Attributes.Add("Height", "180px")
calendar1.Attributes.Add("Font-Size", "8pt")
calendar1.Attributes.Add("Font-Names", "Verdana")
calendar1.Attributes.Add("BorderColor", "#999999")
calendar1.Attributes.Add("BorderStyle", "Outset")
calendar1.Attributes.Add("DayNameFormat", "FirstLetter")
calendar1.Attributes.Add("CellPadding", "4")
calendar1.Attributes.Add("ShowNextPrevMonth", "True")
calendar1.Attributes.Add("SelectionMode", "Day")
calendar1.Attributes.Add("ShowTitle", "false")
calendar1.Attributes.Add("OnSelectionChanged", "Calendar_SelectionChanged")
calendar1.TodayDayStyle.ForeColor = Drawing.Color.Black
calendar1.Attributes.Add("todaydaystyle-backcolor", "#cccccc")
calendar1.Attributes.Add("selectorstyle-backcolor", "#cccccc")
calendar1.NextPrevStyle.VerticalAlign = VerticalAlign.Bottom
calendar1.Attributes.Add("dayheaderstyle-font-size", "7pt")
calendar1.Attributes.Add("dayheaderstyle-font-bold", "true")
calendar1.Attributes.Add("dayheaderstyle-backcolor", "#cccccc")
calendar1.Attributes.Add("selecteddaystyle-font-bold", "true")
calendar1.Attributes.Add("selecteddaystyle-forecolor", "White")
calendar1.Attributes.Add("selecteddaystyle-backcolor", "#666666")
calendar1.Attributes.Add("titlestyle-font-bold", "true")
calendar1.TitleStyle.BorderColor = Drawing.Color.Black
calendar1.Attributes.Add("titlestyle-backcolor", "#999999")
calendar1.Attributes.Add("weekenddaystyle-backcolor", "#ffffcc")
calendar1.OtherMonthDayStyle.BackColor = Drawing.Color.Gray
End Sub
Is it question128_Cal1 or question128_Calendar1 ? Your function use_calendarDate() refers to the first. Typo ?
Interestingly, when I use
var calendarDate = question128_Calendar1.SelectedDate;
OR
var calendarDate = question128_Calendar1.value;
My alert box tells me undefined.
That's because the client script has no knowledge of what 'question128_Calendar1' is. That is a server-side ID.
Is there a reason why you can't use markup to define the calendar instead that rather large 'BuildCalendar' function? You're making a bit of a maintenance nightmare by doing that, IMO.

DateTimePicker how to trigger onChangeTime() from outside the constructor

I created a DateTimePicker and am currently using the "onChangeDateTime" as a means of updating a page using ajax. But I'm not a front end person and I'm having trouble understanding what exactly is going on and I have almost no experience with Jquery. I'm working on learning more but in the mean time I'd appreciate some advice if anyone is offering.
What I'm trying to do is have a link/button on the page where I can call some method to change the time in the date picker and have it trigger the onChangeDateTime function.
I thought it would be as simple as doing $("#DateTimePicker").somefunction() to change the time but I can't seem to figure out even how to change the time nor how to trigger onChangeDateTime().
I'm creating a schedule viewer and I'd like to let users click a button to cycle forward and backward in time rather than having to select the specific time over and over again on the datetimepicker.
I got my version of datepicker from http://xdsoft.net/jqplugins/datetimepicker/
Edit: this is what I've written so far.
<body>
<input id="datetimepicker" type="text" value="2015/04/08 17:49">
<a id="myLink" title="Click to do something"
href="#" onclick="backEpisodes();">Backwards</a>
<a id="myLink" title="Click to do something"
href="#" onclick="forwardEpisodes();">Forwards</a>
<script>
jQuery('#datetimepicker').datetimepicker({
formatTime:'g:ia',
format: 'm/d/Y g:i a',
inline:true,
maxDate:'<?php echo date('Y/m/d', strtotime("+3 week")); ?>',
onSelectTime:function(current_time,$input){
updateEp($input.val());
}
});
</script>
</body>
You can programmatically set the value of the DateTimePicker by using it's setOptions() function and specifying the "value" option like this:
$('datetimepicker').data('xdsoft_datetimepicker').setOptions({
value: '1944/06/06 6:06' // Of course this needs to match the correct format
});
jsfiddle
Note: The jsfiddle contains a function that parses a string into a JavaScript Date object. That could be implemented using a regular expression, but I took a shortcut and utilized the moment.js library.
Notes:
You might want to use the "onChangeDateTime" option, rather than the "onSelectTime" option if you want that code to also execute when the user changes the date.
The format of your initial value ("2015/04/08 17:49") does not match the format you give to the datetimepicker ('m/d/Y g:i a'). You will want to correct that.
The "formatTime" option is needed only if you are specifying the "minTime" and/or "maxTime" options. Similarly, the "formatDate" option is needed only if you are specifying the "minDate" and/or "maxDate" options. Therefore, you don't need to specify the "formatTime" option. You could specify the "formatDate" option since you do specify a "maxDate", but it defaults to "Y/m/d".
id values should be unique, so you should not use "myLink" as the value for both your <a> elements.

Angular event detection for datepicker close

I have just started using angular and in general love it. I have a UI requirement to show a date as text, then when you click on the text, it shows a date picker instead. Then when you select a date it goes back to text. Sounds simple.
I have tried a few variations on the below code the object being edited holds a value called editdate, clicking on the text box changes this to true and hides the text and shows the editor. This works fine, the problem is hiding the date picker. I tried adding ng-blur to the datepicker to cause the box to hide when it looses focus, but this was very intermittent as to if it worked. I then tried ng-Mouseleave but the box closed when I moved the mouse pointer into the date picker from the text box.
<td colspan="7">
Required Date : <span ng-click="item.editdate=true; item.delayeditclose = true;" ng-show="!item.editdate">{{item.dueDate.toDateString()}}</span>
<input type="date" ng-blur="item.editdate=false" ng-click="item.switcheditdate(item.delayeditclose)" ng-show="item.editdate" class="datepick" ng-model="item.dueDate" ng-focus="selectPart(item.partNumber)" />
</td>
The javascript is initialized as:
for (var i = 0; i < data.items.length; i++) {
item = data.items[i];
item.showExpanded = false;
item.editdate = false;
item.delayeditclose = true;
item.switcheditdate = function (delayclose) {
if (!delayclose) {
this.editdate = !this.editdate;
this.delayeditclose = true;
}
this.delayeditclose = false;
};
items.push(item);
}
I have now moved onto the above which almost does the job. The new issue being html5 date pickers seem to have a x to close them down. This hides the whole box and not just the picker part. If this happens I want to show the text of the date rather than what I get now which is nothing. Does anyone know of how I can capture this close event and revert back to the text or suggest a better approach to the problem?
I have lots of items each one is in its own row in a table
I am using angular 1.3 beta 8
thanks for looking
Andy
The reason why you are getting nothing is because when you click x what happens is that the date value gets cleared so then your date view is an empty string. What you can do is set a condition to display a string such as "Click to Edit" when the date is empty.
Taking just what you have above, one way of doing it is by adding an element and a flag in your date "view". So change this:
Required Date : <span ng-click="item.editdate=true; item.delayeditclose = true;" ng-show="!item.editdate">{{item.dueDate.toDateString()}}</span>
To:
Required Date :
<span ng-click="item.editdate=true; item.delayeditclose = true;" ng-show="!item.editdate">
<span>{{item.dueDate.toDateString()}}</span>
<span ng-show="!item.dueDate">Click to Edit</span>
</span>
The directive way
Now in my opinion I think it's much better to use a directive for this. It would simplify your logic and is much easier to re-use. I created a plunker which shows my implementation using a directive.
Answer to question in title
To answer the question posed by your title, when using the html5 date picker, you can't detect when it is closed (or even when it is opened). See this answer and the linked Quick FAQs on input[type=date]

How to fire a script with input controls of jasper server

I have four input controls in jasper server like CCA, CCIT, CIT and TAN. Now those four fields has to get validated and proper alert message has to be displayed when TAN input control is entered other CCA, CCIT and CIT has to get disabled and when you enter anything in CCA, CCIT and CIT then TAN input has to get disabled. this validations i has generated in JSP code and trying to publish a report in jasperserver by script is as follows: This script is working fine when i use input fields in jsp and execute. But, when i use same script with same input control names and all no alert window nor any kind of messages are displayed nor report values get changed.. I need solution how to make input controls can speak with script and fire proper alert messages. Thank you in advance.
With help of Stack overflow am able to work with question which i asked. I tried it in different way like, Follow these steps
Step:1
Run your report in jasper server, Now
Observe in inspect window of your browser(if right click is not happening use ctrl+shift+j) inside elements tag expand body tag inside that div "frame"--> div class "content"--> div id "display"--> div id "reportViewFrame"--> div class "content"--> div class "body"--> div id "inputcontrolsform"-->div class "panel pane inputcontrols"--> div class "content hasFooter"--> div class "body"-->ul class "list input controls"
Now, select which input control id you would like to use code when your jasper report is displayed
Step 2:
Create Jsp file with same names
For eg: sampleText.jsp
Open notepad and paste following code
<%--Include templates--%>
<jsp:include page="InputControlTemplates.jsp"/>
<%-- input controls container --%>
<ul class="list inputControls" id="inputControlsContainer"></ul>
<script>
jQuery(document).ready(function(){
jQuery("#apply").click(function(){
var fromDate = document.querySelector('#start_date label.control input').value;
var toDate = document.querySelector('#end_date label.control input').value;
/*alert("Start Date: "+fromDate+"End Date: "+toDate);*/
/*Year conversion*/
var start1=fromDate.substring(0,4);
var end1=toDate.substring(0,4);
/*alert("Years: From: "+start1+" End: "+end1);*/
/*Months conversion*/
var m1=fromDate.substring(7,5);
var m2=toDate.substring(7,5);
/*alert("Months m1: "+m1+" m2 :"+m2);*/
/*condition checking*/
if(fromDate>toDate){
alert("End Date has to be higher than start date");
}
if((end1-1)>start1){
alert("1.End date has to be in the same financial year as start date.");
}
if((end1-1)==start1){
if(m2>3){
alert("End date has to be in the same financial year as start date.");
}
}
if(end1==start1)
{
if(m2<=3)
{
alert("End date has to be in the same financial year as start date.");
}
}
});
});
</script>
Save as in the location “\jasperreports-server-cp-5.1.0\apache-tomcat\webapps\jasperserver\WEB-INF\jsp\” with sampleText.jsp
Now login to jasper soft and execute that report. Screen should appear like this,
Select date from the date picker screen appears like this
Specify in start date todays date and in end date specify 1 of this month and click on “Apply “ button then screen will give u a pop up (alert) like this,
So you can check for different conditions like
a. Enter end date 2014-04-01 and check
b. Enter end date with 2014-03-31 and check
c. Enter end date with 2012-03-31 and check
In all the above situations it has to show alert.
Note: Above sample code of jsp is used to give validations for input controls of start date and end date.
Refer the link https://www.youtube.com/watch?v=1xP967Eb4f4&t=585s by using the concept of js into your code

Categories