1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. DatePicker - Only default values passed to MVC5-Controller

DatePicker - Only default values passed to MVC5-Controller

Dear All,

I am currently trying to pass two values from two date-picker components to a controller for further processing. Following this post / example here in the community forum, I managed to create a working form that is correctly posting to the respective Controller. However, despite having selected values in both date-picker components, only the default are passed to the Controller's Action. I might have overlooked something while adjusting the example from the aforementioned post. Please consider the following code snippets

Index / View

@using Syncfusion.EJ2
@model WebApplicationDateTimPickerTest.Models.CustomParams

@{
    ViewBag.Title = "Home Page";
}

<h2>Title</h2>
<body>
    @using (Html.BeginForm("CheckDate", "Home", FormMethod.Post, new { id = "dateChecker" }))
    {
        <div class="form-group">
            <div class="form-control">
                @Html.LabelFor(p => p.StartDate)
                @Html.EJS().DatePickerFor(m => m.StartDate).Width("255px").Render()
            </div>
            <div class="form-control">
                @Html.LabelFor(p => p.EndDate)
                @Html.EJS().DatePickerFor(m => m.EndDate).Width("255px").Render()
            </div>
        </div>
        @Html.AntiForgeryToken()

        <div class="cst-button-confirm">
            <input id="cst-button-confirm" 
                   type="submit" 
                   value="Check dates" 
                   class="btn btn-success btn-lg" />
        </div>
    }
</body>


Controller

namespace WebApplicationDateTimPickerTest.Controllers
{
    public class HomeController : Controller
    {
       [snip]

             [HttPost]
        public ActionResult CheckDate(CustomParams customParams)
        {
            const string dateFormat = "yyyyMMdd";

            var date1 = customParams.StartDate.ToString(dateFormat);
            var date2 = customParams.EndDate.ToString(dateFormat);
[Do more with the dates]
            return View();
        }
    }
}

Model
using System;

namespace WebApplicationDateTimPickerTest.Models
{
    public class CustomParams
    {
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
    }
}


Thanks a mil in advance. Do let me know if you require additional information.

Kind regards

C

3 Replies 1 reply marked as answer
SN Sevvandhi Nagulan Syncfusion Team November 25, 2020 01:10 PM UTC

Hi Chris, 


Greetings from Syncfusion support. 

We checked the reported requirement. The reported issue "post to the controller but data in model is null" caused due to both server and client machine have a different date format. Because of this (“month and date order mismatch”), DatePicker component returns the value null in the POST action.   
 
   
Date format set based on the globally defined culture (by default, en-US ("MM/dd/yyyy")). So, we suggest you use the below solution in the global.asax.cs file in your application to get rid of the reported issue. 
 


protected void Application_BeginRequest(Object sender, EventArgs e) 
 
        { 
 
            CultureInfo newCulture = (CultureInfo)System.Threading.Thread.CurrentThread.CurrentCulture.Clone(); 
 
            newCulture.DateTimeFormat.ShortDatePattern = "MM/dd/yyyy"; 
 
            newCulture.DateTimeFormat.DateSeparator = "/"; 
 
            Thread.CurrentThread.CurrentCulture = newCulture; 
        } 
 
Provide the ShortDatePattern format by comparing to the system date format. Both should be same to resolve the issue.  Refer the below screenshot, 

 

Please find the sample below, 




Let us know if you need further assistance. 


Regards, 
Sevvandhi N 


CR CR November 26, 2020 10:35 AM UTC

Dear Sevvandhi,

Thanks a mil for your reply and providing me with a detailed explanation and as well as a sample project. While I could resolve the initial issue, I have a follow-up question regarding globalisation. 

I checked your documentation about how to apply globalisation to the date picker component, but contrary to the example in the document, I decided to use DatePickerFor instead of the default date picker. I am not quite sure how to correctly reference those date pickers in the javascript code required to apply localisation strings. Would be grand if you could also help me out with that. Feel free to move my follow-up question to another post. 

This is what I am currently using:

@using (Html.BeginForm("CheckImports", "ImportCheck", FormMethod.Post, new { id = "dateChecker" }))
 {
        <div class="form-group">
            
                @Html.LabelFor(p => p.StartDate)
                @Html.EJS().DatePickerFor(m => m.StartDate).Width("255px").Format("dd-MM-yyyy").Render()
            
            
                @Html.LabelFor(p => p.EndDate)
                @Html.EJS().DatePickerFor(m => m.EndDate).Width("255px").Format("dd-MM-yyyy").Render()
            
        </div>
        [ ... snip]
}

How would I set and reference the id(s) here for:

document.addEventListener('DOMContentLoaded', function () {
        datepicker = document.getElementById('datepicker').ej2_instances[0];
        var L10n = ej.base.L10n;
        L10n.load({ [... snip]

Looking forward to your reply.

Kind regards

Chris

SN Sevvandhi Nagulan Syncfusion Team November 27, 2020 11:05 AM UTC

Hi Chris, 


We modified the previously provided sample with requested requirement. Also, please provide culture’s default format in the global.aspx page to get the model value and culture code. Here we loaded the ‘de’ culture. So provided the default format accordingly. Refer the below code. 


[global.aspx] 
 
protected void Application_BeginRequest(Object sender, EventArgs e) 
 
        { 
 
            protected void Application_BeginRequest(Object sender, EventArgs e) 
 
        { 
 
            CultureInfo newCulture = CultureInfo.GetCultureInfo("de"); 
 
 
            Thread.CurrentThread.CurrentCulture = newCulture; 
        }         
} 
 
[Index.cshtml] 
 
 
@using Syncfusion.EJ2 
@model Syncfusion_MVC.Controllers.HomeController.CustomParams 
<h2>Title</h2> 
<body> 
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "dateChecker" })) 
    { 
        <div class="form-group"> 
            <div class="form-control"> 
                @Html.LabelFor(p => p.StartDate) 
                @Html.EJS().DatePickerFor(m => m.StartDate).Width("255px").Render() 
            </div> 
            <div class="form-control"> 
                @Html.LabelFor(p => p.EndDate) 
                @Html.EJS().DatePickerFor(m => m.EndDate).Width("255px").Render() 
            </div> 
        </div> 
        @*@Html.AntiForgeryToken()*@ 
 
        <div class="cst-button-confirm"> 
            <input id="cst-button-confirm" 
                   type="submit" 
                   value="Check dates" 
                   class="btn btn-success btn-lg" /> 
        </div> 
    } 
</body> 
<script> 
    document.addEventListener('DOMContentLoaded', function () { 
        datepicker1 = document.getElementById('StartDate').ej2_instances[0]; 
        datepicker2 = document.getElementById('EndDate').ej2_instances[0]; 
        var L10n = ej.base.L10n; 
        L10n.load({ 
            'de': { 
                'datepicker': { 
                    placeholder: 'Wählen Sie ein Datum', 
                    today: 'heute' 
                } 
            } 
        }); 
        loadCultureFiles('de'); 
        datepicker1.locale = 'de'; 
        datepicker2.locale = 'de'; 
    }); 
 
    function loadCultureFiles(name) { 
        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json']; 
        if (name === 'ar') { 
            files.push('numberingSystems.json'); 
        } 
        var loader = ej.base.loadCldr; 
        var loadCulture = function (prop) { 
            var val, ajax; 
            if (name === 'ar' && prop === files.length - 1) { 
                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../scripts/cldr-data/supplemental/' + files[prop], 'GET', false); 
            } else { 
                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false); 
            } 
            ajax.onSuccess = function (value) { 
                val = value; 
            }; 
            ajax.send(); 
            loader(JSON.parse(val)); 
        }; 
        for (var prop = 0; prop < files.length; prop++) { 
            loadCulture(prop); 
        } 
    } 
 
</script> 
 
 
Please find the sample below, 
 
 
 
 
Please let us know if you need further assistance. 


Regards 
Sevvandhi N 


Marked as answer
Loader.
Up arrow icon