Develop Reference

Dynamic Kendo UI Grid editable datetime column not using value

I have a kendo UI Grid that has in-line editing on a single column. That column should be using a datepicker as the input when editing.
However, after setting the value on the datepicker, and then returning to the same row/column, the date does not then show in the datepicker input.
I have created a Dojo to show what I mean:
https://dojo.telerik.com/eJEmoVEv/4
And a quick gif to explain the issue better:

Dealing with bindings on kendo is always tricky. I have update your demo with a few changes:
Editor:
When you're using data-bind you're not suposed to handle the widget's state. Kendo should deal with it by itself, but you need to tell kendo to handle that using kendo.bind(element, model)(bind() docs). Hence, you don't need to set data-value attribute.
function commentEditor(container, options) {
var datePicker = $('<input data-role="datepicker" data-format="dd/MM/yyyy" type="date" name="Comment" data-bind="value:Comment">');
datePicker.appendTo(container);
kendo.bind(datePicker, options.model);
}
Comment field type:
In order to make kendo to know how to handle the Comment field value as a date and to set it properly to the widget, you need to set the right data type in it's model definition:
Comment: { type: "date", editable: true }
Template:
A small fix to the template:
template: function (dataItem) {
if (dataItem.Comment != "") {
let date = kendo.parseDate(dataItem.Comment);
if (date) {
return kendo.toString(date, "dd/MM/yyyy");
}
}
return (dataItem.Comment || "");
}
I'm making sure that the Comment content is a valid date by checking the parseDate result. If not valid, proceed to another condition where it verifies if Comment is not null, undefined, etc, if yes, prints an empty string.
I hope it helps.
Update
Not sure why, but it seems that kendo saves the selected value as string to the bound property. I have added this handler to the widget's change event that seems to work:
datePicker.data("kendoDatePicker").bind("change", function(e) {
let model = this,
widget = e.sender;
model.Comment = widget.value();
}.bind(options.model));
Updated demo
That forces Comment property to be of Date type.

After the help from #DontVoteMeDown I finally found an answer to this.
The datepicker is expecting the Comment field to be of date type, so adding in a kendo.parse and then resetting the comment field fixed this issue.
See updated kendo dojo: https://dojo.telerik.com/eJEmoVEv/4
var dateTimeComment = kendo.parseDate(options.model.Comment);
options.model.Comment = dateTimeComment;

Display tooltip/message while input is invalid HTML/JS/CSS/Angularjs

I have an HTML input field where certain characters shouldn't be allowed. The functional part is solved, but I would like to display a tooltip/message next to the input field while it contains illegal characters.
I have a boolean which keeps track of this, but I've been unable to make a satisfactory tooltip/message.
I've tried tweaking uib-tooltip, but It requires the user to hover over the input area. I've tried making a span/div/label that's hidden/displayed based on the boolean, but my CSS skills aren't strong enough.
The app uses Angularjs and Bootstrap 3.
The input field is not part of a form.

where you catch that boolean just say to display the div next to input like
myDiv.visible = true;

Without knowing your exact Javascript, I can't really answer it directly.
I would do something like
function invalid() {
if (invalid = true) {
document.getElementById("alert").style.visibility = 'visible'
}
}
make sure the error message is set to hidden,
then have the checker function run on focus..
<input type="text" onfocus="invalid()">
https://jsfiddle.net/we67geke/1/

This comment by user Lex solved the problem.
You can manually set the visibility of the uib-tooltip using the
tooltip-is-open attribute. Simply use the same boolean you are using
to keep track of the invalid characters.

As you mentioned
The app uses Angularjs and Bootstrap 3.
I suggest that you should use Boostrap tooltip. Use $('#element').tooltip('show') and $('#element').tooltip('hide') with your flag to handle status of Tooltip.
I don't know how your codes work, my idea seems like:
HTML:
<input type=text (keypress)="eventHandler()"> // angular >= 2
<input type=text ng-keypress="eventHandler()"> // angular 1
Angular code:
eventHandler() {
if (isIllegal) {
$('#element').tooltip('show');
} else {
$('#element').tooltip('hide');
}
}
Something like that.
Bootstrap Tooltip: https://getbootstrap.com/docs/3.3/javascript/#tooltips

Set css variable with HTML5 color picker in Angular 5?

I have an Angular 5 application with items styled in CSS with CSS variables, as in
--color-links: #0000ff;
a { color: var(--color-links); }
So, I was trying to wire up an HTML5 color picker to allow changing this variable on the fly.
I saw this article which showcases this pen where the author is using some simple JS to do something like I am trying to do, but with document.addEventListener. I was trying to come up with a pure Angular/HTML5 method.
So, I created a picker:
<div class="form-group">
<label for="color-picker-link">Link color</label>
<input type="color"
id="color-picker-link"
(change)="setColor()"
[(value)]="linkColor">
</div>
And in my Component, I create the variable linkColor and setting it to #0000ff. That part works, the picker defaults to blue.
public linkColor = '#0000ff';
setColor() {
console.log('value', this.linkColor);
}
However, the variable always logs as the original 30000ff even though the picker obviously changes.
So, what I need to do is get the value the picker was changed to. Not sure why it's not working.
Also, the sample Codepen I linked to above uses this function to set the variable value once retrieved, although I don't think it would work in an Angular app:
function setThemeVar(name, value, unit) {
var rootStyles = document.styleSheets[0].cssRules[0].style;
rootStyles.setProperty('--theme-' + name, value + (unit || ''));
}
If I can solve getting the value from the picker on change, and then fire a function passing that retrieved value I can probably figure out the rest.

To get the selected value from the picker use ngModelChange event with ngModel directive.
<input type="color"
id="color-picker-link"
(ngModelChange)="setColor($event)"
[ngModel]="linkColor">
setColor(newColor) {
console.log('value', newColor);
this.linkColor = newColor;
}

xdan/datetimepicker - datetimepicker({'setOptions', {highlightedDates: [] } }) is not updated - calendar view is not updated

I am trying to to update/change the highlighted days in callendar view. But they are not updated on next event when calendar is shown.
There is working Plunker snippet: https://plnkr.co/edit/4HkCp5?p=preview
Part of code:
var element = $("#datetimepicker");
//element.datetimepicker('destroy');
element.datetimepicker({
'setOptions': {
highlightedDates: ["08/10/2016,,xdsoft_highlighted_mint", "10/10/2016,,xdsoft_highlighted_mint"]
}
});
How can I make that the highlights were updated after setting the new value to "highlightedDates"?
Some realated questions:
xdan/datetimepicker using knockout - can not update “highlihted days” dynamicaly
Note: I can not use "element.datetimepicker('destroy')" because it will destroy all data and I only need to update highlights.

Found solution...
So problem is that when new value of highlightedDays is empty array, then the "highlightedDays" value is not updated. So you need always some dummy value to update previous value.
This is like a hack, but works. I am passing dummy date from 1970`th, so no one cares about it...

Jquery Autocomplete remembers the previous selection

The requirement is to display autocomplete addresses based on the region selected. The Jquery autocomplete is called everytime the region changes. I am getting the correct autocomplete addresses based on the region. But along with the new address list, I also get the address list for previously selected regions.
To solve this problem, I used - $("#address).removeData('events').autocomplete(...)
This solves the problem. But a new problem is introduced now! The scrolling in the autocomplete list does not work properly, items are skipped on pressing down arrow key/up arrow key.
Here is the code snippet:
$("#address).removeData('events').autocomplete({
serviceUrl : 'mysource',
minChars : 2,
params : {
region : selectedRegion
},
noCache : true,
width : 350,
maxHeight : 170,
onSelect : function (value) {
...
...
}
});
Can somebody suggest me the correct approach? I am using jquey.autocomplete-min.js

If youre getting an additional appearing alongside jquery's autocomplete list, it may be an issue with your browser trying to autocomplete the input.
trying adding the autocomplete="off" attribute to the input field you're autocompleting

As mentioned in this answer the issue might not be with your code snippet but with browser http caching in general.

Well, the following worked like a charm to me
var ac = $("#address").autocomplete();
The next time, the region is changed, instead of calling autocomplete()
again, I just do this -
ac.setOptions({ params:{ region : selectedRegion}});
This updates the existing call with new region. I will no more see autocomplete suggestions for the previous selections.