Change event fires even when Picker dismissed by clicking elsewhere on page

[Pat]

We are handling the change event on the ejs-daterangepicker so that when the daterangepicker has its value changed we can change the window's location rel='nofollow' href attribute

However we are seeing the javascript handler for change event firing when the picker is dismissed by clicking outside of the control, simply elesewhere on the page. That should not fire a change event. No change has happened.

How can we stop this or at least detect it?

Thanks

[Sevvandhi Nagulan]

Hi Pat, 

Greetings from Syncfusion support. 

We checked your query. The date range picker component's change event is triggered when the control loses focus. If you select the date and then click on the document, the date value is modified. So, the change event will be triggered as the component gets focused out. If you don't choose a date, the change event won't be triggered when you focus out the component because the value hasn't changed when comparing to the previous one. It is default behavior of change event. If you want to detect when the change event has been triggered, then you can find this by accessing the target element in the change event argument. If the target element was a html element, the change event was triggered by clicking on the document. If the target element was a button, the change event was triggered by clicking on the button. Kindly refer the below code. 

 

<ejs-daterangepicker id="date" change="onChange"></ejs-daterangepicker> 

 

<script> 

    function onChange(args) { 

        console.log(args.event.target); 

    } 

</script> 

 Screenshot: 

 

Please find the API documentation link below. 

API link: https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Calendars.DateRangePickerBuilder.html#Syncfusion_EJ2_Calendars_DateRangePickerBuilder_Change_System_String_ 

If we misunderstood your requirement, please provide additional information about your query to proceed further on this. 

Kindly get back to us for further assistance. 

[Pat]

That is not the experience I am having

1. Click "calendar icon"

 

2. Date Range Picker is displayed

3. Click elsewhere on the page without entering the entry box or changing any of the dates AND the change event still fires

I think it might be important to mention that I am in the UK where the time is currently UTC +1

This is  the javascript that is being output into the page by your control

new ejs.calendars.DateRangePicker({

  "cssClass": "float-right",

  "endDate": "2021-05-21T23:59:59.999+01:00",

  "format": "dd MMM yyyy",

  "maxDays": 0,

  "minDays": 0,

  "presets": [

    {

      "end": "2021-05-20T00:00:00Z",

      "label": "Last Week",

      "start": "2021-05-14T00:00:00Z"

    },

    {

      "end": "2021-05-20T00:00:00Z",

      "label": "Last Month",

      "start": "2021-04-20T00:00:00Z"

    },

    {

      "end": "2021-05-20T00:00:00Z",

      "label": "Last 2 Months",

      "start": "2021-03-20T00:00:00Z"

    },

    {

      "end": "2021-05-20T00:00:00Z",

      "label": "Last 3 Months",

      "start": "2021-02-20T00:00:00Z"

    },

    {

      "end": "2021-05-20T00:00:00Z",

      "label": "Last Year",

      "start": "2020-05-20T00:00:00Z"

    }

  ],

  "startDate": "2021-02-20T00:00:00+00:00",

  "change": onChangeDateRange

}).appendTo("#dateRange"); 

[Sevvandhi Nagulan]

Hi Pat, 

We checked your query. We prepared the sample using given code and ensured the reported issue in the mentioned timezone (UTC+1). Unfortunately, the reported issue was not reproduced at our end. Kindly refer the below code. 

[Index.cshtml] 

<ejs-daterangepicker id="presets" format="dd MMM yyyy" placeholder="Choose a Range" startDate="ViewBag.StartDate" endDate="ViewBag.EndDate" change="onChange"> 

    <e-daterangepicker-presets> 

        <e-daterangepicker-preset id="week" label="This Week" start="ViewBag.weekStart" end="ViewBag.weekEnd"></e-daterangepicker-preset> 

        <e-daterangepicker-preset id="month" label="This Month" start="ViewBag.monthStart" end="ViewBag.monthEnd"></e-daterangepicker-preset> 

        <e-daterangepicker-preset id="lastmonth" label="Last Month" start="ViewBag.lastMonthStart" end="ViewBag.lastMonthEnd"></e-daterangepicker-preset> 

        <e-daterangepicker-preset id="year" label="Last Year" start="ViewBag.lastYearStart" end="ViewBag.lastYearEnd"></e-daterangepicker-preset> 

    </e-daterangepicker-presets> 

</ejs-daterangepicker> 

 

<script> 

    function onChange(args) { 

        console.log("Change event triggered"); 

    } 

</script> 

 

[HomeController.cs] 

public IActionResult Index() 

        { 

            int days = (int)DateTime.Now.DayOfWeek; 

            DateTime lastMonth = DateTime.Now.AddMonths(-1); 

            ViewBag.weekStart = DateTime.Now.AddDays(-days); 

            ViewBag.weekEnd = ViewBag.weekStart.AddDays(6); 

            ViewBag.monthStart = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1); 

            ViewBag.monthEnd = ViewBag.monthStart.AddMonths(1).AddDays(-1); 

            ViewBag.lastMonthStart = new DateTime(lastMonth.Year, lastMonth.Month, 1); 

            ViewBag.lastMonthEnd = ViewBag.lastMonthStart.AddMonths(1).AddDays(-1); 

            ViewBag.lastYearStart = new DateTime(DateTime.Now.Year - 1, 1, 1); 

            ViewBag.lastYearEnd = new DateTime(DateTime.Now.Year - 1, 12, 31); 

            ViewBag.StartDate = new DateTime(2021, 02, 20); 

            ViewBag.EndDate = new DateTime(2021, 05, 21, 23, 59, 59); 

            return View(); 

        } 

 

        

 

Please find the sample below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DateRange-1826066677 

Please find the video demonstration of the issue. 

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture_5-21-2021_1.38.11_PM1232369671 

It would be helpful if you provide the video demonstration of the issue or issue reproducing sample to investigate the issue further at our end. 

Regards, 

Sevvandhi N 

[Pat]

Ok so I believe I can see why we get a change event when no change is made. 

We initialise the control with two dates e.g.

From Date 26/03/2021 00:00:00.000000

End Date 26/04/2021 23:59:59.999999

We set the format property of the control as "dd MMM yyyy" as we do not want to Time Part to show

In the change event when no change has been made the End Date is 26/04/2021 00:00:00.000000. I assume this is what is seen as the change. Why does it do that? It does it even when the format is set to "dd MMM yyyy HH:mm:ss"

I can see the control display as "24 May 2020 00:00:00 - 24 May 2021 23:59:59" but the endDate shows as 00:00:00.000000 in the change event

[Sevvandhi Nagulan]

Hi Pat, 

We validated the reported requirement. The cause for the reported issue is that the time value reset to 00:00:00 when focus out the component in the end date. Due to this, the change event has been triggered. We don’t have time support for the DateRangePicker component. Hence, the time value will be reset to 00:00:00 when the component loses it focus. We already considered providing the time support for DaterangePicker component and it will be available in any of the upcoming releases. So, we suggest that you to remove the time part value given in the end date to resolve the reported issue.  

public IActionResult Index() 

        { 

            int days = (int)DateTime.Now.DayOfWeek; 

            DateTime lastMonth = DateTime.Now.AddMonths(-1); 

            ViewBag.weekStart = DateTime.Now.AddDays(-days); 

            ViewBag.weekEnd = ViewBag.weekStart.AddDays(6); 

            ViewBag.monthStart = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1); 

            ViewBag.monthEnd = ViewBag.monthStart.AddMonths(1).AddDays(-1); 

            ViewBag.lastMonthStart = new DateTime(lastMonth.Year, lastMonth.Month, 1); 

            ViewBag.lastMonthEnd = ViewBag.lastMonthStart.AddMonths(1).AddDays(-1); 

            ViewBag.lastYearStart = new DateTime(DateTime.Now.Year - 1, 1, 1); 

            ViewBag.lastYearEnd = new DateTime(DateTime.Now.Year - 1, 12, 31); 

            ViewBag.StartDate = new DateTime(2021, 02, 20); 

            ViewBag.EndDate = new DateTime(2021, 05, 21); 

            return View(); 

        } 

Please find the feedback link below. 

Feedback link: https://www.syncfusion.com/feedback/5760/new-datetimerangepicker-control 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N