Develop Reference

Angular not detecting change inside a duration picker when time is selected using its controls

I am having an html duration picker inside my code like below. I can either type in the time or change the time by clicking the up/down arrows.
I am binding its value to a variable using ngModel
<input type="text" id="mTime" [class] = "'html-duration-picker'" [(ngModel)]="manufacturingTime">
I also have another text field which shows the result of the time duration divided by another value. So, when the time duration is changed, this field needs to be updated on the fly.
<input name="assemblyTime" class="form-control right" [disabled] = true [ngModel]="(manufacturingTime/numberOfWorkers)">
All these functionalities were working fine. Recently, I moved from angular version 11 to V 13. Since then,when the time is changed by clicking the up/down arrows, it is not updating the ngModel, whereas if the time is typed in, the ngModel is updated. I tried adding code on (change), (ngChange), also tried using changeDetection. But it seems, angular doesn't recognize the value change when it is done using up/down arrows. So these events are not fired. I can access the duration using ViewChild to save the duration to database. But the second textbox which shows the divided value cannot be updated on the fly. Can someone suggest a way to fix this?
The duration picker is a third party tool developed in Javascript.
https://nadchif.github.io/html-duration-picker.js/
So I cannot control the events on arrow clicks.

I suspect that this may work, as it could cause the expression to be evaluated more often.
In your component class, add a getter that calculates the divided value like so:
public get dividedValue(): number {
return this.manufacturingTime / this.numberOfWorkers;
}
Then assign that value to the second input:
<input name="assemblyTime" class="form-control right" [disabled] = true [ngModel]="dividedValue">
Again, this is just a wild guess, because I have no code to run.
If you provide a runnable Stackblitz example, I would be happy to help you debug it.

If you take a look at the html-duration-picker code, in the function definition for changing values using arrow keys changeValueByArrowKeys; the last line:
insertFormatted(inputBox, constrainedValue, false);
has third argument false which is passed to the function insertFormatted. This function insertFormatted creates the (change) or (input) events.
In the above image you can see that any event be it (change) or (input) is only triggered if the dispatchSynethicEvents is not equal to false.
To handle this you can create a fork the library, make changes to it, store a local copy and use that instead of the library. Alternatively you could raise a PR and ask the author to consider your change.
To solve it you need to basically remove that if condition. It will then emit (input) event no matter what.

(input) attribute in Angular

I can't seem to find out what (input) does in Angular. Here's the code sample:
<input class="form-control" placeholder="person" (input)="filterPersons($event.target.value, 'Hair Colour')">
I have placed a log inside the filterPersons method to see when it is executed but nothing gets outputted at all when I click/unclick the checkbox or submit the form. What functionality does (input) actually provide?
Worth noting that there are no errors and the codebase works fine and in fact there are multiple examples of this throughout the codebase so I know it's not a simple typing error but I cannot see what effect it has.

It seems like what you want is this:
https://developer.mozilla.org/de/docs/Web/HTML/Element/Input/checkbox
as the input type and then you can listen for changes via the change event instead of input (There is no input on checkbox):
<input type="checkbox" class="form-control" placeholder="person" (change)="filterPersons($event.target.value, 'Hair Colour')">
As on getting triggered on the form submit, you would have to do that programmatically or store the state when the input changes.

Try providing type="text" / type="number" and I'm sure you will see your method being executed. The (input) event fires on every key press and can be used if you want immediate validation of an input (The (change) event fires when you leave the control.)

I don't know why could not able to find what (input) actually does. In your code
<input class="form-control" placeholder="person" (input)="filterPersons($event.target.value, 'Hair Colour')">
(input) call filterPersons method with 2 parameters.
Please check the stackblitz link and see the console.log value. It changes on every single input.
StackBlitz Demo Link.

Don't allow time change React-DatePicker

I'm using the React-DatePicker package along with momentjs to let the user pick a date on an input which looks like this:
I want to display the time, but not let the user change it directly from the <input>. My date picker has an onChange() function:
onExpirationDateChange(date) {
this.setState({selectedTime: date.unix()});
}
Does anyone know how I can achieve displaying the time, but not letting the user change it?

I would recommend this way:
document.getElementsByTagName("inputdate")[0].setAttribute("readonly", "readonly");
As you can problably tell, it's set to readonly, so one can't write in the input anymore but they can still copy the text if needed.

As per the examples on this page: https://reactdatepicker.com/
You might try this to prevent the users from selecting times...
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
showTimeSelect
excludeTimes={[moment().hours(17).minutes(0), moment().hours(18).minutes(30), moment().hours(19).minutes(30)], moment().hours(17).minutes(30)}
dateFormat="LLL"
/>

Found the answer myself. Just set readOnly on picker and make sure to not include time select option.

How to make a real "onchange" event in HTML (no jQuery)?

Please note: I do not want to use jQuery for this (otherwise I like it)
Problem: I have come to situation where I need to do some javascript function after an user changes an input field (e.g. input type="text"). So I said to myself - I remember an onchange event - BUT onchange event runs AFTER user leaves the field, but I need the function to be called for example every time user types a character to that field. Wowhead shows nice example of what I am trying to achieve this (field with placeholder "Search within results...")
Summary: I am looking for a SIMPLE way of detecting REAL onchange event(not the classic HTML one)and through that call a JS function while not using jQuery?

Use onkeyup instead of onchange then.

Following is a simple way of invoking each type of Key Press on field.
input type="text" onkeypress="myFunction()
Get Example here
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeypress
Enjoy..
you can also use onkeyup and onkeydown instead of onkeypress.

Tried onkeypress="myFunction()" or onkeyup="myFunction()"?
There are also events for onfocus and onblur for entering and leaving a textfield :)

You should use "input" event. keyup and keypress don't work if a user modified the value only by a mouse.

Onchange is not working with Javascript entry

I have a form with some dates to be filled in. I'm using Cold Fusion, but here am using just the form and input tags, not the "enhanced" CF tags. The user can select these dates only from a Javascript calendar. The calendar works fine, the dates get filled in, the Javascript function "validx" is working, but the onchange does not fire with this data entry method.
<input
type = "text"
id = "#colid#"
class = "calendarSelectDate" {this fires the calendar}
name = "#col#"
readonly
onclick = "tooltip(#i#)"
onchange = "validx(#i#, #top#, '#thecase#', '#themsg#')"
value = "#sv#" >
I can get onblur to do the job, but would really prefer onchange. Anyone have a way to do this? Thanks.

I believe you are misunderstanding the purpose of onchange. This event fires when the user blurs the checkbox after making a change. By definition it requires a blur. Perhaps you should look into onkeyup or similar events involving keypresses.