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

3 posts, 1 answers
  1. Zac Everett
    Zac Everett avatar
    16 posts
    Member since:
    Sep 2012

    Posted 18 Sep 2013 Link to this post

    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. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 20 Sep 2013 Link to this post

    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!
  3. Zac Everett
    Zac Everett avatar
    16 posts
    Member since:
    Sep 2012

    Posted 20 Sep 2013 Link to this post

    Yep thanks Petur

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

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

    Thanks

    Zac.
Back to Top