enabling and disabling date range picker using checkbox

[Bernadus Rangga Kresna Waskita]

Hello, I want to have option to enable and disable daterange picker using checkbox, see my image below

but the problem is i need to check and uncheck twice to make the datepicker popup works... This is a bug i think, because it needs twice of check and uncheck again to make it work

I want it when user check the check box like image above, date picker is enabled and user can click calendar icon without having to check and uncheck it twice... thank you

[UdhayaKumar Duraisamy]

Hi Bernadus,

We can Enable/Disable the DateRangePicker component by changing the Enabled property based on the CheckBox component as like mentioned in the below code snippet.

@Html.EJS().DateRangePicker("daterangepicker").Enabled(true).Width("300px").Render()

 

@Html.EJS().CheckBox("default").Change("onChange").Checked(true).Label("Enable DateRangePicker").Render()

 

<script>

    function onChange(args) {

        var daterangepickerobj = document.getElementById("daterangepicker").ej2_instances[0];

        daterangepickerobj.enabled = args.checked;

    }

</script>

API Documentation: https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Calendars.DateRangePicker.html#Syncfusion_EJ2_Calendars_DateRangePicker_Enabled

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DRPCheckBoxMVC-1706348792.zip

Kindly try the above suggestion and let us know if this meets your requirement.

Regards,

Udhaya Kumar D

[Bernadus Rangga Kresna Waskita]

thanks this solve it

[UdhayaKumar Duraisamy]

Hi Bernadus,

We are glad that your requirement has been fulfilled on your end. We are always happy to assist you.

Regards,

Udhaya Kumar D