Question

134

KendoUI grid filter date format

rated 0 times [ 138] [ 4] / answers: 1 / hits: 28780 / 10 Years ago, fri, january 30, 2015, 12:00:00

In my kendo grid I want to change the date format in filter

Ex: 1/30/2015 to Jan 30, 2015

I already change the date format of Start Date

                field: StartDate,

                title: Start Date,

                width: 30,

                format: {0:MMM dd, yyyy},

                parseFormats: {0:MM/dd/yyyy},

                headerTemplate: '<label for=check-all><b>Start Date</b></label>',

                headerAttributes: { style: text-align: center; },

                attributes: { style: text-align:center !important;padding-right: 25px; }

Code in my filterable

  filterable: {

                extra: false,

                operators: {

                    string: {

                        startswith: Starts with,

                        eq: Is equal to

                    }

                }

            },

For screenshot see this

Thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deonkalvinw

Add To Favorites

Follow

Total Points: 409

Total Questions: 96

Total Answers: 89

Location: Saint Pierre and Miquelon

Member since Sun, Nov 27, 2022

2 Years ago

deonkalvinw questions

1 Handling UI State in Remix.run

Sun, Feb 6, 22, 00:00, 2 Years ago

1 Npm install throws warn old lockfile error

Tue, Dec 28, 21, 00:00, 2 Years ago

1 moving between section page using next and previous button in javascript

Tue, Dec 28, 21, 00:00, 2 Years ago

1 React Horizontal Scrolling cards with Arrows on top

Sun, Aug 22, 21, 00:00, 3 Years ago

1 How to pass state between routes in NEXT JS?

Sun, Mar 7, 21, 00:00, 3 Years ago

View All

answered 10 Years ago herman · Accepted Answer

You should define filterable.ui as a function where you create the DatePicker and set the desired format:

{

    field: StartDate,

    title: Start Date,

    width: 30,

    format: {0:MMM dd, yyyy},

    parseFormats: {0:MM/dd/yyyy},

    headerTemplate: '<label for=check-all><b>Start Date</b></label>',

    headerAttributes: { style: text-align: center; },

    attributes: { style: text-align:center !important;padding-right: 25px; },

    filterable : {

        ui: function (element) {

            element.kendoDatePicker({

                format: MMM dd, yyyy

            });

        }

    }

},

Check the following snippet:

$(document).ready(function() {

  $(#grid).kendoGrid({

    dataSource: {

      type: odata,

      transport: {

        read: http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders

      },

      schema: {

        model: {

          fields: {

            OrderID: { type: number },

            Freight: { type: number },

            ShipName: { type: string },

            OrderDate: { type: date },

            ShipCity: { type: string }

          }

        }

      },

      pageSize: 20,

      serverPaging: true,

      serverFiltering: true,

      serverSorting: true

    },

    height: 550,

    filterable: true,

    sortable: true,

    pageable: true,

    columns: [

      {

        field:OrderID,

        filterable: false

      },

      {

        field: OrderDate,

        title: Order Date,

        format: {0:MMM dd, yyyy},

        parseFormats: {0:MM/dd/yyyy},

        headerTemplate: '<label for=check-all><b>Start Date</b></label>',

        headerAttributes: { style: text-align: center; },

        attributes: { style: text-align:center !important;padding-right: 25px; },

        filterable : {

          ui: function (element) {

            element.kendoDatePicker({

              format: MMM dd, yyyy

            });

          }

        }

      },

      ShipName

    ]

  });

});

html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }

<link rel=stylesheet href=http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css />

<link rel=stylesheet href=http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css />

<script src=http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js></script>

<script src=http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js></script>



<div id=grid></div>