[Solved] Grid Editor Template Date Parse issue

[Siobhan McTear]

I have a Grid Editor Template for a Date field and it takes the format dd-MMM-yyyy. However I continuously get the error 'field [property name] is not a valid date'. I have had this issue on a regular view and got round it by using a custom date parsing function and using this to validate dates:

//Manage the JQuery/Kendo date parsing issue
            kendo.culture("en-GB");
            $.validator.addMethod('date',
                function (value, element) {

                    //return this.optional(element) || kendo.parseDate(value)
                    return this.optional(element) || Date.parse(element.value) //Custom function
                });

However this does not appear to work on the Editor Template for a Kendo grid. My Editor Template code looks like the following:

@model DateTime?

@(
    Html.Kendo().DatePickerFor(m => m).Format("dd-MMM-yyyy").ParseFormats(new [] {"dd-MMM-yyyy"})
)


<script src="@Url.Content("~/Scripts/date.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/cultures/kendo.culture.en-GB.min.js")"></script>
<script type="text/javascript">


    $(document).ready(function () {

        kendo.culture("en-GB");
        $.validator.addMethod('date',
            function (value, element) {
                return this.optional(element) || Date.parse(element.value)
            })
    });


    //$('#DateStarted').kendoValidator({
    //    dateValidation: function (element) {
    //        debugger;
    //        var value = $(element).val();

    //        var date = Date.parse(value);
    //        if (!date) {
    //            return false;
    //        }

    //        return true;
    //    }
    //});


</script>

How can i resolve this issue?

[Daniel]

Hello,

The grid does not use the jQuery validation but the Kendo Validator. The Kendo Validator uses the formats from the current Kendo culture so you should use a format from the used culture for the datepicker or override the validator mvcdate rule:

$.extend(true, kendo.ui.validator, {
    rules: {
        mvcdate: function (input) {
            if (input.is("[data-val-date]") && input.val() !== "") {
                return kendo.parseDate(input.val(), "dd-MMM-yyyy") !== null;
            }

            return true;
        }
    }
});

Another option would be to modify the short date format in the current culture or use a custom culture with the needed formats. 

Regards,
Daniel
Telerik

 

 

[Siobhan McTear]

That work perfectly. Thanks.