We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Date Picker Selected Date

Thread ID:

Created:

Updated:

Platform:

Replies:

133020 Oct 4,2017 07:07 AM Oct 9,2017 02:40 AM ASP.NET MVC 3
loading
Tags: DatePicker
Frankie Moran
Asked On October 4, 2017 07:07 AM

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 [Syncfusion]
Replied On October 5, 2017 08:57 AM

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. 
 
 
Regards, 
Prem Kumar. M

Frankie Moran
Replied On October 6, 2017 05:16 AM

This has worked perfectly! 

Much appreciated. 

Thanks,
Frankie


Prem Kumar Madhan Raj [Syncfusion]
Replied On October 9, 2017 02:40 AM

Hi Frankie, 
 
Thanks for the update. Please get back to us if you need any further assistance on this. 
 
Regards, 
Prem Kumar. M  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;