This is a migrated thread and some comments may be shown as answers.

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

2 Answers 141 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Zac Everett
Top achievements
Rank 1
Zac Everett asked on 18 Sep 2013, 03:42 PM
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>

2 Answers, 1 is accepted

Sort by
0
Accepted
Petur Subev
Telerik team
answered on 20 Sep 2013, 08:34 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Zac Everett
Top achievements
Rank 1
answered on 20 Sep 2013, 09:05 AM
Yep thanks Petur

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

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

Thanks

Zac.
Tags
Grid
Asked by
Zac Everett
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Zac Everett
Top achievements
Rank 1
Share this question
or