Date Picker Selected Date

[Frankie Moran]

Hello,

Looking for a bit of help with the Date Picker Control. 

I have implemented a Date Pickers on a page. One of them is for a From Date, and the other one is for a To Date. 

1. The From Date needs to be a Sunday Date. So if the user clicks a Wednesday date it would go back to the last Sunday Date. For example, if I clicked the From Date and choose today's date (04/10/2017 [UK]) it would go back and select (01/09/2017 [UK]). This would work regardless of which day of the week was chosen (i.e. Monday - Friday).

2. The To Date needs to be a Saturday Date. This would work similarly as above, however, it would go forward to the Saturday Date. For example, if I clicked the To Date and choose today's date (04/10/2017 [UK]) it would go forward and select (07/10/2017 [UK]). This would work regardless of which day of the week was chosen (i.e. Monday - Friday).

Is there any where to implement this on the Date Picker Control? 

Thanks,
Frankie

[Prem Kumar Madhan Raj]

Hi Frankie, 

 

Thanks for contacting Syncfusion support. 

 

We have checked with your query to set the selected date as Sunday or Saturday in the datepicker regardless to the day of the week selected. We have achieved your requirement by setting the selected date value to corresponding week’s Sunday / Saturday if the user is not selected these days.  Here once the invalid date selected means, it will reset the value to require day and this changes is processed in DatePicker Select event as we shown in below code example. 

 

<h3>From DatePicker</h3> 

@Html.EJ().DatePicker("FromDatePicker").ClientSideEvents(e=> e.Select("onFromSelect")) 

 

<h3>To DatePicker</h3> 

@Html.EJ().DatePicker("ToDatePicker").ClientSideEvents(e => e.Select("onToSelect")) 

 

<script> 

    function onFromSelect(args) { 

        if (args.date.getDay() != 0) { 

            this.option("value", new Date(args.date.setDate(args.date.getDate() - args.date.getDay()))); 

            // Changes the date to the previous Sunday’s date. 

        } 

    } 

    function onToSelect(args) { 

        if (args.date.getDay() != 6) { 

            this.option("value", new Date(args.date.setDate(args.date.getDate() + (6 - args.date.getDay())))); 

            // changes the date to the Saturday’s date of the week. 

        } 

    } 

</script> 

 

For your convenience, we have created a simple sample based on your requirement and attached in the below link. Please check it. 

 

Link: http://www.syncfusion.com/downloads/support/forum/133020/ze/Datepicker_sample2048101123 

 

Regards, 

Prem Kumar. M

[Frankie Moran]

This has worked perfectly! 

Much appreciated. 

Thanks,
Frankie

[Prem Kumar Madhan Raj]

Hi Frankie, 

 

Thanks for the update. Please get back to us if you need any further assistance on this. 

 

Regards, 

Prem Kumar. M