EJ2: How to customize DateRangePicker

[Support Arcania]

Hi,

1) We want to set Monday as the 1st day of the week and not Sunday. Can you tell us how to do that?

2) There was a "Reset" button on EJ1. How can we display that on EJ2 calendar?

Thanks

[Ponmani Murugaiyan]

Hi Support, 

Greetings from Syncfusion support. We have validated your reported query. 

Query 1: We want to set Monday as the 1st day of the week and not Sunday. Can you tell us how to do that? 

You can set any days as the first day of the week in EJ2 calendar using the API FirstDayOfWeek. Please find the code snippet below for your reference. 

[Index.cshtml] 

@Html.EJS().DateRangePicker("range").Select("OnSelect").Created("OnCreate").Open("OnOpen").FirstDayOfWeek(1).Render() 

Output: 

 

Query 2: There was a "Reset" button on EJ1. How can we display that on EJ2 calendar? 

In EJ2 DateRangePicker, there is no RESET button option to reset the values. We have customized the sample as per your requirement and while reset the popup will be refresh and get closed. Please find the sample and code snippet below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DateRangePicker568706220  

 

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture_25-02-2020_5.25.47_PM.xesc-237782101  

 

If you need any further assistances on this, Please get back us. 

Regards, 

Ponmani M 

[Support Arcania]

Great,

Thanks for your help!

[Ponmani Murugaiyan]

Hi Support, 

  

Thanks for your feedback. If you need further assistance on this, please get back us. 

  

Regards, 

Ponmani M