# How to perform Dynamic Date Selection with help of JavaScript Event on browser click path synthetic monitor while working with Travel Sites

**URL:** <https://community.dynatrace.com/t/how-to-perform-dynamic-date-selection-with-help-of-javascript-event-on-browser-click-path-synthetic-monitor-while-working-with-travel-sites/39201>\
**Category:** Troubleshooting\
**Tags:** browser-monitors, synthetic-monitoring\
**Created:** [April 11, 2023, 2:19pm UTC](https://community.dynatrace.com/t/how-to-perform-dynamic-date-selection-with-help-of-javascript-event-on-browser-click-path-synthetic-monitor-while-working-with-travel-sites/39201 "2023-04-11T14:19:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mareeswaran](https://avatars.discourse-cdn.com/v4/letter/m/d2c977/32.png) [@Mareeswaran](https://community.dynatrace.com/u/Mareeswaran)\
**Post date:** [April 11, 2023, 2:19pm UTC](https://community.dynatrace.com/t/how-to-perform-dynamic-date-selection-with-help-of-javascript-event-on-browser-click-path-synthetic-monitor-while-working-with-travel-sites/39201/1 "2023-04-11T14:19:30Z")

</div>

# 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&nbsp;

The following JavaScript code snippet can be modified to perform Dynamic Date Selection in a browser clickpath synthetic monitor.

```auto
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

1. Go to the relevant page on Chrome browser

2. 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

3. Right click on the element on the Web developer tools - \> Copy - \> Copy JS path of both From & To Date input elements

4. 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&nbsp;[Synthetic Troubleshooting Map](https://community.dynatrace.com/topic/250426)

---

<div class="post-metadata">

**Author:** ![ChadTurner](https://dub1.discourse-cdn.com/dynatrace/user_avatar/community.dynatrace.com/chadturner/32/161_2.png) [@ChadTurner](https://community.dynatrace.com/u/ChadTurner)\
**Post date:** [May 12, 2023, 7:05pm UTC](https://community.dynatrace.com/t/how-to-perform-dynamic-date-selection-with-help-of-javascript-event-on-browser-click-path-synthetic-monitor-while-working-with-travel-sites/39201/2 "2023-05-12T19:05:47Z")

</div>

Thank you for sharing this! I’m sure it will help out many community members.