UI Date Picker Issue

Question

I have an issue with date picker, here is the cshtml and cs code I have

@using (Html.BeginForm("", "", FormMethod.Post))
                {
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                @Html.LabelFor(m => m.MyDate)
                                <br />
                                @Html.Kendo().DatePickerFor(m => m.MyDate).Format("dd/MM/yyyy")
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                @Html.LabelFor(m => m.MyDateTime)
                                <br />
                                @Html.Kendo().DateTimePickerFor(m => m.MyDateTime).Format("dd/MM/yyyy").HtmlAttributes(new { Placeholder = "Latest"})
                            </div>                           
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">MyButton</button>
                }

Controller

public ActionResult Index()
    {
        return MyFunc(DateTime.UtcNow.AddDays(1).ConvertUtcToLocal(), null);
    }

public ActionResult MyFunc(DateTime theDate, DateTime? mydatetime)
    {
        //code not important

        return View("", new MyModel
        {
            MyDate = theDate.Date,
            MyDateTime= mydatetime
        });
    }

Convert Utc to local is custom method does as name suggests

Part 1: On first launch, I get 2/21/2024 in the controller Index method and 2/22/2024 gets passed on to MyFunc as we are adding one day. In the date picker UI I see 22/02/2024 which is what I want and latest in datetime picker but I want the date and time component.

Part 2: When I hit the button it calls the controller MyFunc with theDate as 1/1/0001. It seems because of mismatch between server and client, it expects Month first and obviously 22 is not a valid month. When I select a date say 03/09/2023 (3 September) the myFunc gets 3/9/2023 and assumes 3 to be month and makes it 09 March in the UI 09/03/2023.

I am unable to understand what is going wrong. Please tell me if information is missing I can add in the question.

Answer 1

What's happening is that you are sending the date up in dd/MM/yyyy format but your server has a culture that is set to parsing the dates as MM/dd/yyyy.

If you want the web application to always parse the dates MM/dd/yyyy, regardless of which controller/action you're using then I would just change your web.config to match the culture you're using (e.g. en-GB):

<system.web>
    <globalization uiCulture="en-GB" culture="en-GB" />
</system.web>

Otherwise, if you only want to parse the dates MM/dd/yyyy on this one action, then a workaround is to replace the DateTime arguments as string arguments and then manually parse them at the top of the method:

public ActionResult MyFunc(string theDate, string mydatetime)
{
    DateTime theDateParsed;
    if (!DateTime.TryParseExact(value, "dd/MM/yyyy", CultureInfo.InvariantCulture, DateTimeStyles.None, out theDateParsed))
    {
        throw new ArgumentOutOfRangeException(nameof(theDate));
    }

    DateTime? myDateTimeParsed;
    if (!string.IsNullOrWhitespace(mydatetime) && !DateTime.TryParseExact(value, "dd/MM/yyyy", CultureInfo.InvariantCulture, DateTimeStyles.None, out myDateTimeParsed))
    {
        throw new ArgumentOutOfRangeException(nameof(mydatetime));
    }

    return View("", new MyModel
    {
        MyDate = theDateParsed.Date,
        MyDateTime = myDateTimeParsed
    });
}