My workplace utilizes a custom web application with a date picker/calendar that I am attempting to modify programmatically. The app is built in Vue, which has added complexity to my task. Despite exhaustive efforts, I have been unable to select or inject dates successfully. While I can target and interact with buttons using code like this:
element = document.querySelector("#__BVID__2692__cell-2023-08-05_")Clicking on these elements does not trigger any action. I have experimented with sending custom events without success. To make matters more frustrating, I am able to click on the previous year/month and next year/month buttons effortlessly, yet selecting specific dates remains impossible through code. Curiously, manual mouse clicks function as expected. From what I've gathered from Vue examples online, the datepicker appears to be standard for Vue implementations. Below is an image of how it appears within the app. Any guidance or insights would be greatly appreciated.
https://i.sstatic.net/4Nvw8.png
Furthermore, when I attempt to select a date number, the code snippet looks like this:
<div id="__BVID__2692__cell-2023-08-01_" role="button" data-date="2023-08-01" aria-label="Tue, Aug 01, 2023" class="col p-0"><span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">1</span></div>The 'role=button' attribute seems to be causing issues since it doesn't represent an actual button element. Nevertheless, there must be a way to interact with it programmatically considering that mouse clicks work seamlessly.