1 year ago

#373717

test-img

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

Accepted video resources