1 year ago
#373717
user15111237
datepicker as custom-calendar using native-web component
I wanted to use native web in order to have custom calendar. I created js file and wrote some class that extends HTMLElement. Calendar pops up properly but the problem is that I can't choose a day in the calendar. When I try to choose a date It throws this exception : "Uncaught Missing instance data for this datepicker".
My code looks like this :
class CustomCalendar extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
const wrapper = document.createElement('div');
wrapper.setAttribute('class', 'wrapper');
const calendarInputLabel = wrapper.appendChild(document.createElement('label'));
calendarInputLabel.setAttribute('class', 'date-label');
const iconImg = calendarInputLabel.appendChild(document.createElement('img'));
iconImg.setAttribute('class', 'calendarIcon');
iconImg.src = this.hasAttribute('iconImgSrc') ? this.getAttribute('iconImgSrc') : 'api/theme/img/icons-calendar.png';
const calendarInput = calendarInputLabel.appendChild(document.createElement('input'));
calendarInput.setAttribute('type', 'text');
calendarInput.setAttribute('id', this.getAttribute('calendarName'));
shadowRoot.append(wrapper);
}
connectedCallback() {
$(this.shadowRoot.getElementById('from')).datepicker({
dateFormat: "dd-mm-yy"
, duration: "fast"
});
}
}
customElements.define('custom-calendar', CustomCalendar);
<custom-calendar calendarName="from"> </custom-calendar>
please help me. How can I fix this ?
javascript
html
datepicker
shadow-dom
custom-element
0 Answers
Your Answer