EJ2 DateRangePicker: How to display the calendar when clicking on the input box

[Support Arcania]

Hi,

We would like to display the calendar not only when the user clicks on the calendar icon but also when he clicks inside the input box.

We tried a code like this but it doesn't work. The click event is not triggered.

$("body").on("click", ".e-daterangepicker", function (e) {

     // display the calendar

});

Thanks

[Prince Oliver]

Hi Arcania, 

Thank you for contacting us. 

You can use the focus event in the DateRangePicker control and call the control’s show method to display the calendar popup. Kindly refer to the following code. 

  @Html.EJS().DateRangePicker("range").Focus("OnFocus").Width("300px").FirstDayOfWeek(1).Render() 

 

<script> 

    function OnFocus() { 

        this.show(); 

    } 

</script> 

Sample link: https://www.syncfusion.com/downloads/support/forum/151885/ze/DateRangePicker-1498804619  

Let us know if you need any further assistance on this. 

Regards, 

Prince 

[Support Arcania]

Hi,

Thanks for your reply.

Your solution works when there is no date range selected yet.

Once we select and apply a date range and click again inside the input box, the calendar doesn't appear anymore.

Do you have another solution for that?

Thanks

[Berly Christopher]

Hi Arcania, 

  

While popup get closed, we have maintained the focus on the input. For this, we need to click the document to focus out the component. Due to this, while click on input while it is in focus state already, DateRangePicker popup not get opened. So, we suggest you to call the focusOut() method in the DateRangePicker’s close event as mentioned below.  

  

<div style="padding:5%;"> 

      @Html.EJS().DateRangePicker("range").Close("OnClose").Focus("OnFocus").Width("300px").FirstDayOfWeek(1).Render() 

  </div> 

   

   

  <script> 

      function OnFocus() { 

          this.show(); 

      } 

      function OnClose() { 

          this.focusOut(); 

      } 

  </script> 

 

 

  

Else, we can show / hide the popup based on popup open state by using the isPopupOpen method in the input event of the DateRangePicker as mentioned below. 

  

  <div> 

      @Html.EJS().DateRangePicker("daterange").Width("300px").FirstDayOfWeek(1).Render() 

   

  </div> 

   

   

  <script> 

      document.addEventListener("DOMContentLoaded", function (args) { 

          var daterangeObj = document.getElementById("daterange").ej2_instances[0]; 

          daterangeObj.inputElement.addEventListener("click", function (args) { 

              (!daterangeObj.isPopupOpen()) ? daterangeObj.show() : daterangeObj.hide(); 

          }) 

      }) 

     

  </script> 

 

 

 

  

Please find the sample from the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/151885/ze/DateRangePicker_151885-1721984425  

  

Regards, 

Berly B.C 

[Support Arcania]

Yes, it works now.

Thanks for your help

[Berly Christopher]

Hi Arcania, 

  

Most welcome. Please let us know If you need further assistance on this. 

  

Regards, 

Berly B.C