@Html.AntiForgeryToken() @Html.ValidationSu" /> @Html.AntiForgeryToken() @Html.ValidationSu" /> @Html.AntiForgeryToken() @Html.ValidationSu"/>

Why is it impossible to format Kendo UI datepicker outputs correctly?

203 Views Asked by At
<form class="SecForms" action="@Url.Content("~/Credit/GenerateStatement")" method="post" id="credit_form">
    @Html.AntiForgeryToken()

    @Html.ValidationSummary(true)
    @Html.HiddenFor(o => o.PracticeId)
    <div class="setup-content" id="purchasing">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="control-label col-sm-5">Start Date</label>
                    <div class="col-sm-7 input-group">
                        @Html.Kendo().DatePickerFor(m => m.StartDate)
                            .Format("dd-MM-yyyy").Culture("en-GB")
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-5">End Date</label>
                    <div class="col-sm-7 input-group">
                        @Html.Kendo().DatePickerFor(m => m.EndDate)
                            .Format("dd-MM-yyyy").Culture("en-GB")
                    </div>
                </div>
            </div>
        </div>

        <div class="BDuttonBar">
            <div class="BButtRightOptom">
                <button type="submit" class="btn btn-success lyprocess" type="submit" onclick="document.getElementById('spinny').style.display = 'block';">Generate</button>

                <i class="fa fa-circle-o-notch" fa-spin loadingSpinner" id="spinny" style="font-size:24px;float:right;display:none;"></i>
            </div>
        </div>
    </div>
</form>

Despite having explicitly set the format on the DatePickers, it still tries to output with dates formatted as 2019-30-09 (for September 30th). With a date like this selected, and I suspect, any date with a day-of-month greater than 12, the form fails to submit.

I've tried setting Culture = ... at the top of the page per the official Telerik DatePicker Globalization guide but this hasn't made one iota of a difference.

As a workaround (see below), I've gone ahead and reformatted the dates to ACTUAL DateTime values, but as previously mentioned, the inability to submit the form on the selection of particular dates remains a problem.

[HttpPost]
public ActionResult GenerateStatement(GenerateStatementViewModel model)
{
    if (ModelState.IsValid)
    {
        // Recreate the datetimes from the inputs because everything is stupid and nothing formats properly.
        var startDate = new DateTime(model.StartDate.Year, model.StartDate.Day, model.StartDate.Month);
        var endDate = new DateTime(model.EndDate.Year, model.EndDate.Day, model.EndDate.Month);

        // Continue work processing the form.
    }
}

I don't know what else to try. How do I get this ridiculous Telerik nonsense to actually work as specified?

When I check the information for Kendo.Mvc.dll it shows Version is 2019.1.115.440 (part of Kendo Web Extensions for ASP.NET MVC in Telerik's 2019 R1 suite)

0

There are 0 best solutions below