on - edited on by
HannahM
Summary
For dates that need to be dynamically selected, for example, always select a date 37 days in the future, some script customization is required. This is often seen on travel-related sites where from and to dates are needed.
Solution
The following JavaScript code snippet can be modified to perform Dynamic Date Selection in a browser clickpath synthetic monitor.
var now = new Date();
var today = new Date(now.getFullYear(), (now.getMonth()), now.getDate());
var oneMonthLater = new Date(today.valueOf() + 30*1*24*60*60*1000); //30 days later from the current date
api.info(oneMonthLater);
var ReturnDate = new Date(today.valueOf() + 37*1*24*60*60*1000);
api.info(ReturnDate); //37 days later from the current date
function monthConverter(month){ switch(month){ case 0: return '01'; case 1: return '02'; case 2: return '03'; case 3: return '04'; case 4: return '05'; case 5: return '06'; case 6: return '07'; case 7: return '08'; case 8: return '09'; case 9: return '10'; case 10: return '11'; case 11: return '12'; } }
var startMonth = monthConverter(oneMonthLater.getMonth());
var startDay = ("0" + oneMonthLater.getDate()).slice(-2);
var startYear = oneMonthLater.getFullYear();
var returnMonth = monthConverter(ReturnDate.getMonth());
var returnDay = ("0" + ReturnDate.getDate()).slice(-2);
var returnYear = ReturnDate.getFullYear();
var departDate = startYear + "-" + startMonth+ "-" + startDay; // change the variable order format and delimiter based on your input filed based on your date format for both departDate & returnDate variables. In this example date format is dd-mm-yyyy
var returnDate = returnYear + "-" + returnMonth + "-" + returnDay;
api.info(departDate);
api.info(returnDate);
function triggerevent(element) {
var evt = document.createEvent("MouseEvent");
var eventType = ["input", "change"];
for (i = 0; i < eventType.length; i++) {
evt.initMouseEvent(eventType[i], true, true, window);
element.dispatchEvent(evt); } }
var element1 = document.querySelector("#From"); // Replace with From input field JS Path
var element2 = document.querySelector("#To"); // Replace with To input field JS Path
element1.value = departDate;
triggerevent(element1);
element2.value = returnDate;
triggerevent(element2);
Steps to update and use the JavaScript snippet
- Go to the relevant page on Chrome browser
-
Right click on the From & To Date input elements which you want to perform the dynamic date selection on the page-> Inspect the element which will open the developer tools
-
Right click on the element on the Web developer tools - > Copy - > Copy JS path of both From & To Date input elements
-
Paste the JS path on the below element1 & element2 value and add this JavaScript code into the JavaScript Event of your Browser click path monitor which will enter the Dynamic Date on From & To input fields as shown in the below image,
Note:- Change the departDate and returnDate variable assigned order format and delimiter based on your input filed date format. In this example date format is dd-mm-yyyy
What's Next
If none of the previous steps resolved the issue, open a chat and a link to the monitor and this article.
You can find further troubleshooting tips for Synthetic in the Synthetic Troubleshooting Map
