Send Date range Data to controller

[Muhamad Adam Fakhrullah Nik Mohamad]

Hi, can I know ways to get both date in daterangepicker and send to controller? I didnt found this solution within documentation. Please help me. Thanks!

[Berly Christopher]

Hi Muhamad, 

  

Greetings from Syncfusion support.  

  

We can get the start date and end date value from the DateRangePicker component’s value property as a index since it is a DateTime array. Please refer the below code example. 

  

[Index.cshtml] 

  

@model Syncfusion_EJ2_Core_App.Controllers.DateRange  

 

    <div class=" control-section"> 

        <div id="wrapper" class="daterangepicker-section"> 

            <div id="daterangepicker-control"> 

                <form method="post"> 

                    <ejs-daterangepicker id="daterangepickerFor" ejs-for="@Model.value"></ejs-daterangepicker> 

                    <div id="errorMessage"> 

                        <span asp-validation-for="value"></span> 

                    </div> 

                    <div id="submitbutton"> 

                        <ejs-button id="submitButton" content="Submit"></ejs-button> 

                    </div> 

                </form> 

            </div> 

        </div> 

    </div> 

  

[HomeController.cs] 

  

  public class DateRange 

    { 

        [Required(ErrorMessage = "Please enter the value")] 

        public DateTime[] value { get; set; } 

 

    } 

    public class HomeController : Controller 

    { 

        DateRange DateRangeValue = new DateRange(); 

        public IActionResult Index() 

        { 

            DateRangeValue.value = new DateTime[] { new DateTime(2020, 03, 03), new DateTime(2021, 09, 03) }; 

            return View(DateRangeValue); 

        } 

        [HttpPost] 

        public IActionResult Index(DateRange model) 

        { 

            //posted value is obtained from the model 

            DateRangeValue.value = model.value; 

            var stratDate = model.value[0]; 

            var endDate = model.value[1]; 

            return View(DateRangeValue); 

        } 

} 

  

Please find the sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/151775/ze/Syncfusion_EJ2_Core_App_151775_daterangepicker1002407681  

  

Regards, 

Berly B.C 

[Alejandro Parada]

Hi Muhamad, 

  

Greetings from Syncfusion support.  

  

We can get the start date and end date value from the DateRangePicker component’s value property as a index since it is a DateTime array. Please refer the below code example. 

  

[Index.cshtml] 

  

@model Syncfusion_EJ2_Core_App.Controllers.DateRange  

 

    <div class=" control-section"> 

        <div id="wrapper" class="daterangepicker-section"> 

            <div id="daterangepicker-control"> 

                <form method="post"> 

                    <ejs-daterangepicker id="daterangepickerFor" ejs-for="@Model.value"></ejs-daterangepicker> 

                    <div id="errorMessage"> 

                        <span asp-validation-for="value"></span> 

                    </div> 

                    <div id="submitbutton"> 

                        <ejs-button id="submitButton" content="Submit"></ejs-button> 

                    </div> 

                </form> 

            </div> 

        </div> 

    </div> 

  

[HomeController.cs] 

  

  public class DateRange 

    { 

        [Required(ErrorMessage = "Please enter the value")] 

        public DateTime[] value { get; set; } 

 

    } 

    public class HomeController : Controller 

    { 

        DateRange DateRangeValue = new DateRange(); 

        public IActionResult Index() 

        { 

            DateRangeValue.value = new DateTime[] { new DateTime(2020, 03, 03), new DateTime(2021, 09, 03) }; 

            return View(DateRangeValue); 

        } 

        [HttpPost] 

        public IActionResult Index(DateRange model) 

        { 

            //posted value is obtained from the model 

            DateRangeValue.value = model.value; 

            var stratDate = model.value[0]; 

            var endDate = model.value[1]; 

            return View(DateRangeValue); 

        } 

} 

  

Please find the sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/151775/ze/Syncfusion_EJ2_Core_App_151775_daterangepicker1002407681  

  

Regards, 

Berly B.C 

The method in the example is worng. 

 public IActionResult Index(DateRange model) 

        { 

            //posted value is obtained from the model 

            DateRangeValue.value = model.value; 

            var stratDate = model.value[0]; 

            var endDate = model.value[1]; 

            return View(DateRangeValue); 

        } 

only get first data of the date (model.value[0]), the other data is null (model.value[1])

[Ponmani Murugaiyan]

Hi Alejandro, 

Thanks for the update. 

We have checked your reported query. But unfortunately the reported issue is not replicated in our end. We have attached the video demonstration for your reference. 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture_23-11-2020_7.59.54_PM.mp4-1326064022  

Kindly check with the above video. If issue still exists in your end, please provide the below details, which helps us to check and update the solution at earliest. 

1. Provide video demonstration with issue replication procedure.
2. In which case, the end date is returns null.
3. Try to provide the issue replicating sample.

Regards, 

Ponmani M 

[Alejandro Parada]

Hi Alejandro, 

Thanks for the update. 

We have checked your reported query. But unfortunately the reported issue is not replicated in our end. We have attached the video demonstration for your reference. 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture_23-11-2020_7.59.54_PM.mp4-1326064022  

Kindly check with the above video. If issue still exists in your end, please provide the below details, which helps us to check and update the solution at earliest. 

1. Provide video demonstration with issue replication procedure.
2. In which case, the end date is returns null.
3. Try to provide the issue replicating sample.

Regards, 

Ponmani M 

Hi

I attach video with the problem.

In the video in the first attempt it is observed that when the date is defined in the ONGET () and it is consulted, the data does arrive with the POST.

But when the user changes the date through the calendar, only the initial date arrives.

see full video Please

Attachment: 20201123_113509_2a171822.rar

[Alejandro Parada]

Hi Alejandro, 

Thanks for the update. 

We have checked your reported query. But unfortunately the reported issue is not replicated in our end. We have attached the video demonstration for your reference. 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture_23-11-2020_7.59.54_PM.mp4-1326064022  

Kindly check with the above video. If issue still exists in your end, please provide the below details, which helps us to check and update the solution at earliest. 

1. Provide video demonstration with issue replication procedure.
2. In which case, the end date is returns null.
3. Try to provide the issue replicating sample.

Regards, 

Ponmani M 

Hi

I attach video with the problem.

In the video in the first attempt it is observed that when the date is defined in the ONGET () and it is consulted, the data does arrive with the POST.

But when the user changes the date through the calendar, only the initial date arrives.

see full video Please

----------------------------------------------------------

we are waiting answer

[Ponmani Murugaiyan]

Hi Alejandro, 

Thanks for the patience. 

We have validated the reported issue "While post, data received null value in controller" caused due to both server and client machine have a different date format. Because of this (“month and date order mismatch”), DateRangePicker component returns the value null in the POST action.    

By default, the component rendered with “en-us” culture with “MM/dd/yyyy” date format. But (your) the machine configured with different culture with different date format. 

During post-back time the date value sent as component date format value. In Server-side, the machine expects the date format as “dd/MM/yyyy” format. Both are mismatched so that the value was returned as null. 

 In this case, we can override this case by setting the locale property as per your culture or setting the date format equivalent of your culture date format in the sample level. 

 If you are using form post, date format set based on the globally defined culture (by default, en- US). So, we suggest you use the below work around solution in the startup.cs file in your application to get the date value as per the defined format at your end. 

protected void Application_BeginRequest(Object sender, EventArgs e)  

        {  

            CultureInfo newCulture = (CultureInfo)System.Threading.Thread.CurrentThread.CurrentCulture.Clone();  

            newCulture.DateTimeFormat.ShortDatePattern = "dd/MM/yyyy"; // required culture format   

            newCulture.DateTimeFormat.DateSeparator = "/"; // required separator   

            Thread.CurrentThread.CurrentCulture = newCulture;  

        }  

 

Kindly check with the above suggestion. Please get back us if you need further assistance. 

Regards, 

Ponmani M