Wijmo calendar - nothing happens when clicking on same date

Posted by: mmurugesan on 20 May 2020, 2:49 am EST

  • Posted 20 May 2020, 2:49 am EST

    Hi Team
    Wijmo calendar didn't respond anything if I click on the same date which I previously selected. Attached is the gif.
    I want to close the calendar window when I click on the same date.
    Please suggest.
    Thank you
  • Replied 20 May 2020, 4:24 am EST

    This is how I'm setting up the control.

    public inputDate: wijmo.input.Calendar;
    const currentDate = new Date();
    this.inputDate = new wijmo.input.Calendar(this.$.inputDateSelector, {
    value: currentDate

    this.inputDate.valueChanged.addHandler((s, e) => {
    this.inputDate.value = s.value;
    this.dateValue = DateUtility.toDateString(s.value, this.searchDateFormat);
  • Marked as Answer

    Replied 20 May 2020, 5:31 pm EST


    You will need to add an event listener for click and close the popup manually. Please refer to the sample below:


  • Replied 21 May 2020, 3:18 am EST

    Hi Ashwin
    Thank you for your response and yes this is exactly what I'm looking for.

    It works in the standalone application, however, if I try to implement it in my project I'm getting this error while clicking on the button.

    Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
    at Object.showPopup (wijmo.js:7234)

    My button is polymer button.
    <paper-icon-button id="datePickerButton" icon="threegis-svg:calendar-picker" on-tap="pickDate" />

    I'm having the suggested logic in the pickDate function. Any suggestions what could be done here?
  • Replied 21 May 2020, 8:31 pm EST


    Can you please provide a code snippet of where the error occurs? Also, it would be better if you could modify the above sample so that it replicates the issue.

  • Replied 22 May 2020, 2:40 am EST

    Got it Ashwin. Here it's not using wijmo's hide/show instead they use something else through some interface which provide setCalendarClose method. The below code fixed it.
    cld.hostElement.addEventListener("click", e => {
    const row = wijmo.closest(e.target, "tr");
    if ((!row && e.target.firstChild?.className === "wj-glyph-circle") ||
    (!wijmo.hasClass(row, "wj-header") && wijmo.closestClass(e.target, "wj-calendar-month"))) {
    }, true);

    Thank you for your quick solution.
  • Replied 25 May 2020, 2:51 pm EST


    We are glad that you were able to resolve the issue. Let us know in case you have any further issues or doubts.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels