Wijmo calendar - nothing happens when clicking on same date

Wijmo calendar - nothing happens when clicking on same date

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

• 

  mmurugesan

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 May 2020, 2:49 am EST - Updated 3 October 2022, 7:16 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

• 

  mmurugesan

  • Post Options:
  • Link
    Copy

  Posted 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);
          });
      }
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  mmurugesan

  • Post Options:
  • Link
    Copy

  Posted 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?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  mmurugesan

  • Post Options:
  • Link
    Copy

  Posted 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.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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