How to get event on any change in the control when in focus

[appa]

Hi,

Looking for a way to get an event when the content of the DateTimePicker changes valid/invalid without the user leaving the control that is the focus remains on the control.

The 'changed' event fires only when the control lose focus i also tried  'input' event in DateTimePicker.inputElement.

Thanks

[Priyanka Karthikeyan]

Hi appa,

 

Thank you for reaching out to us. To validate the DateTimePicker directly as you enter the value, you can achieve this within the FormValidator by adding a custom validation rule. You can perform the validation inside the input event. This allows you to integrate the format validation seamlessly into the rules configuration.

 

Here's how you can modify your code to include custom rules for validating the DateTimePicker format:

var datepicker = new DatePicker({

    placeholder: 'Choose date',

    change: function () {

        formObject.validate('datevalue');

    }

});

 

datepicker.appendTo('#element');

 

var customFn = function (args) {

    var value = args.value;

    var dateObject = new Date(value);

    console.log(!isNaN(dateObject.getTime()))

    return !isNaN(dateObject.getTime());

};

datepicker.inputElement.addEventListener('input', function () {

   formObject.validate()

});

var options = {

    rules: {

        'datevalue': {

            required: true,

            range: [customFn, 'Invalid Date']

        }

    },

    customPlacement: function (inputElement, errorElement) {

        inputElement.parentElement.parentElement.appendChild(errorElement);

    }

};

 

var formObject = new FormValidator('#form-element', options);

 

 

 

Sample: 8rfbrj (forked) - StackBlitz

 

 

Regards,

Priyanka K

[appa]

Thank you for your quick reply.

There are a lot of scenarios where using 'input' event will not work, for example if you change the values by only using the arrow keys.

I have already tried to place observer on the DOM root + listen to all events but i can't seem to be able to catch the changes made with the arrow keys (at least not until you click 'tab'), also the value property of the DateTimePicker does not change on arrow up/down.

Looks like the changes are happening in a "::before" CSS element that I don't know how to capture/observe.

Can you suggest a way to react to every key click and tap

Thanks

[Priyanka Karthikeyan]

Hi appa,

 

To capture the event when the arrow keys are pressed, you can listen to the keydown event. This event will be triggered when any key, including the arrow keys, is pressed in the date picker input. You can then use this event to execute any desired functionality, such as validation or other actions.

Here’s an example of how you can implement this:

 

datepicker.inputElement.addEventListener('keydown', function (event) {
    if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
        alert("Arrow key pressed");
        formObject.validate();
    }
});

 

Sample: https://stackblitz.com/edit/pn11hs-fhf2ls?file=index.html,index.ts

 

Regards,

Priyanka K