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.

Antd DatePicker date does not change in onChange function

I am using datePicker from antd library and form also from antd.
If I set a field value it does not change in the onChange function. Without defining the field value beforehand everything is ok (onChange2 in codesandbox).
What can be the reason of that?
I prepared sandbox: https://codesandbox.io/s/magical-gould-9yppt

Easyautocomplete + Vue.js - how to update stored variable by click?

I have an input text field, which value is stored in "app.adress" component in Vue. I'm now using "Easy-autocomplete" plugin, which displays a list of suggested values. When I click one it appears in the text field, but is not saved in "app.adress" component. For example, I type "uni", I click suggested value "United Kingdom", it appears in the text field, but only "uni" is saved in the "app.adress". Any suggestions how to update Vue component by click?

I know this answer is too late. But I just want to share my work around on this issue. Instead of using v-model to bind the value of my input, I just add #change event listener and call a method that will update my data.
Edit: Other solution is to use the event functions of EasyAutocomplete like the onChooseEvent.

What method to use to fire an event after datetime is selected using datetime selector UI?

I came across a datatimepicker plugin
I am trying to use it in a small app that I am working on. I need to be able to enable a button after a user selects data from the picker.
What method would use to trigger some logic after the datetime was selected

You could bind an event to your form input element to fire when it changes.
('#date').datetimepicker({
...
onChangeDateTime: function(dp,$input){
alert($input.val())
}
...
});
Within the handler function you will probably want to implement some kind check to ensure that the value is what you want it to be before enabling the button.

Activating a JQuery UI datepicker via remote Button

I'm using the JQuery UI datepicker, but instead of attaching the datepicker to an input[type=text] element, i'm attaching it to an input[type=hidden] element. In order to activate the datepicker, I'm using a remote button on the UI that's not a sibling of the input element the datepicker is attached to.
In order to show the datepicker, I'm using a click event handler which executes this code
$('input.trial_end_date').datepicker('show');
This works to show the datepicker, but whenever I click a date, I get an uncaught javascript exception:
Uncaught Missing instance data for this datepicker jquery-ui-1.10.1.custom.min.js:6
e.extend._getInst jquery-ui-1.10.1.custom.min.js:6
e.extend._selectDay jquery-ui-1.10.1.custom.min.js:6
t.selectDay jquery-ui-1.10.1.custom.min.js:6
v.event.dispatch localhost.local/:5
o.handle.u localhost.local/:5
However, if I change the input[type=hidden] to an input[type=text] to allow the datepicker to show when the input element is focused, all click events fire without any problems (until I activate the datepicker via the button, then they all fail no matter which way the datepicker is activated).
Is there a more reliable way to activate the date picker via a remote button and hide the input element for the date? I'm not sure why this exception is being thrown at all.
Here's an example of this not working in a JSFiddle. Though, the exception isn't the same. After further research, I seem to have found the reason, which I'll add in an answer below.

Why would you use a hidden input when you can instantiate a datepicker on a regular div and just hide and show that div? If you don't need the input, don't use it.
<input type="button" id="open" />
<div id="datepicker"></div>
JS
$('#datepicker').datepicker();
$('#open').on('click', function() {
$('#datepicker').toggle();
});
FIDDLE

After messing around with this problem a bit in a JSFiddle, (http://jsfiddle.net/XJ7Z7/1/), it's apparent that if you attach the datepicker to an input element - the input element must be visible (ie, not a hidden element).
The reason for this is because the Datepicker module tries to position the calendar via position:absolute; and to do so accurately needs to get the top/left offset for the input element to which it is attached. A hidden input element has no top/left offset (it's set to 0/0), so therefore the module skips that element to try to find one that is visible that it can use to calculate where to place the calendar.
If there's no sibling element that can be used the reference object gets set to null and an exception is thrown when the datepicker tries to access the left/top properties of the return object of $(el).offset() because the call to offset returns a null value.
The solution here is outlined by #adeneo in the accepted answer, but the sacrifice is that you'll have to manage your hidden input value for the selected date on your own via the onSelect callback of the datepicker module initialization.
I hope this helps someone out there who is running into a similar problem.