At this moment, icons can't be displayed in <select> items - it uses the standard browser element and that doesn't support HTML in <option> elements.
You can implement your own form item type using plugins. Here is an example:
var form = [
{name: "Description", id: "description", type: "textarea"}
];
var data = {
description: "This is a sample text with <html>"
};
var options = {
plugins: {
textarea: function(row) {
var view = {};
var textarea = document.createElement("textarea");
textarea.style.width = "100%";
textarea.style.height = "200px";
textarea.addEventListener("keydown", function(ev) {
if (ev.key === "Enter") {
ev.stopPropagation();
}
});
// validation triggers
textarea.oninput = function(e) {
view.onInput();
};
textarea.onblur = function(e) {
view.onBlur();
}
view.element = textarea;
// change state from value
view.apply = function(row) {
view.element.value = row.value;
};
// load value
view.save = function() {
var result = {};
result[row.field] = view.element.value;
return result;
}
view.canFocus = function() {
return true;
};
view.focus = function() {
view.element.focus();
}
return view;
}
}
}
DayPilot.Modal.form(form, data, options).then(function(modal) {
console.log(modal);
});
The plugin receives "row" object which holds the row state.
You need to return a "view" object that implements these properties:
- element
- apply() function
- save() function
- canFocus() function
- focus() function
You also need to call view.onInput() for "input" event and view.onBlur() for "blur" event to enable validation.