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
    Manoharan
  • 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

    Hi,

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

    https://stackblitz.com/edit/js-v2wyn6

    Regards,
    Ashwin
  • 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

    Hi,

    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.

    ~regards
  • 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"))) {
    this.setCalendarClose(true);
    }
    }, true);

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

    Hi,

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

    ~regards
Need extra support?

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

Learn More

Forum Channels