Question 229064 in Html Question posted in
Some basic documentation can be found here.

Html – Angular datepicker change event not working

I’m writing a script in javascript to automate some data entry task on a webpage.

the page I’m working on has some text areas that won’t register (would be treated as empty when the page is submitted) as changed unless I declare a change or input event like this:

var evt = new Event("input", {"bubbles":true, "cancelable":false});        
element.dispatchEvent (evt);

there’s a datepicker part that accepts manual input or date pick through a calendar thingy.
if I input the date though my code like I’m trying to do, the change again won’t register even with the event dispatch like above.

So, how do I input the date and trigger a change event for that element?

I say that the page is but I could be wrong. some elements have classes that have with ng like "ng-star-inserted"

Thank you

I tried using normal event dispatch but I didn’t work.

Tags:

2

Answers


  1. 0

    I think you might need to simulate user interaction more accurately to trigger the necessary events. One approach you can try is to focus on the element, set its value, and then dispatch a series of events to mimic user behavior

    document.addEventListener("DOMContentLoaded", function () {
  var dateInputElement = document.getElementById("date-input");
  var triggerButton = document.getElementById("trigger-button");

  triggerButton.addEventListener("click", function () {
    // Simulate focusing on the input element
    var evtFocus = new Event("focus", { bubbles: true, cancelable: true });
    dateInputElement.dispatchEvent(evtFocus);

    // Set the desired date value
    var desiredDate = "2023-08-12"; // Replace with your desired date
    dateInputElement.value = desiredDate;

    // Simulate input event
    var evtInput = new Event("input", { bubbles: true, cancelable: true });
    dateInputElement.dispatchEvent(evtInput);

    // Simulate change event
    var evtChange = new Event("change", { bubbles: true, cancelable: true });
    dateInputElement.dispatchEvent(evtChange);

    console.log("Date automation completed");
  });
  
  // Debugging: Log events when interacting with the input manually
  dateInputElement.addEventListener("focus", function () {
    console.log("Input focused manually");
  });

  dateInputElement.addEventListener("input", function () {
    console.log("Input value changed manually");
  });

  dateInputElement.addEventListener("change", function () {
    console.log("Input value committed manually");
  });
});
    <input type="text" id="date-input" placeholder="Select a date">
  <button id="trigger-button">Trigger Automation</button>
    Login or Signup to reply.
  2. 0

    In order to write the value date picker’s control value accessor (CVA) should receive the value through input event. Here is how the event is handled in the input. Then in the date picker input event handler checks the value provided here.

    What you can do is provide the value you need like this:

    var evt = new Event("input", {
  "bubbles":true,
  "cancelable":false,
  "target": {
    "value": "2023-08-01"
  }
});        
element.dispatchEvent (evt);

    This way date picker will pass the date to its CVA and the change should be recorded correctly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search