Filter Grid using DateTimePicker - String was not recognized as a valid DateTime

[Zac Everett]

I have a grid to display audits with a datetime field.

I want to have a separate datetimepicker to the grid that i can use to filter the grid results.

I am struggling to get the value of the datetimepicker in the correct format for C# when the request gets posted back.

I receive 'String was not recognized as a valid DateTime'.

The format of the date is en-gb so DD/MM/YYYY HH:mm

If I manually make the format US ie MM/DD/YYYY etc then this works, but we are english and want the format of the datetimepicker to be in en-gb.

How can i get this to work. I really need the time as well as the date.

Here is my grid

@(Html.Kendo().Grid(Model)

    .Name("Grid")
    .Columns(columns =>
        {
            columns.Bound(p => p.AuditCode);
            columns.Bound(p => p.AuditId).Width(60);
            columns.Bound(p => p.AuditText1).Width(200);
            columns.Bound(p => p.AuditText2);
            columns.Bound(p => p.AuditText3);
            columns.Bound(p => p.AuditValue1);
            columns.Bound(p => p.AuditValue2);
            columns.Bound(p => p.DateTime);
        })

     .Pageable(p => p.PageSizes(true))
     .Sortable()
          .Scrollable()
     .HtmlAttributes(new { style = "height:355px;" })
     .Resizable(resize => resize.Columns(true))
     .DataSource(dataSource => dataSource
         .Ajax()
         .PageSize(20)
         .Read(read => read.Action("Audit_Read", "Support"))

     )
)

Here is my date picker

<td>@(Html.Kendo().DateTimePicker().Name("datetimepicker"))</td>

This is the script for searching the grid

<script>
    $(document).ready(function () {
        $("#GO").click(function () {
            $filter = new Array();

            $fromDateTime = $("#datetimepicker").val();
            $toDateTime = $("#datetimepicker2").val();

            dateFromFilter = $fromDateTime; 
            dateToFilter = $toDateTime; 

            if (dateFromFilter) { $filter.push({ field: "DateTime", operator: "isgreaterthanorequalto", value: dateFromFilter }); }
            if (dateToFilter) { $filter.push({ field: "DateTime", operator: "islessthanorequalto", value: dateToFilter }); }

            var grid = $("#Grid").data("kendoGrid");

            grid.dataSource.filter($filter);
        });
    });

</script>

[Petur Subev]

Hello Zac,

Why do you send the date as string? If you set the value for the filter method to be actual JavaScript date object I then assume it will be send to the server in the proper format.

Basically to get the JavaScript date of the DatePicker you need to use the value method of the datetimepicker

e.g.

var jsDate =  $("#datetimepicker").data('kendoDateTimePicker').value();

Let us know your findings.

Kind Regards,
Petur Subev
Telerik

[Zac Everett]

Yep thanks Petur

var jsDate =  $("#datetimepicker").data('kendoDateTimePicker').value();

This is exactly what i needed, the datetime works a treat.

Thanks

Zac.