2012-11-27 45 views
8

Tôi có lưới kendo với trường ngày trong nguồn dữ liệu. Khi hiển thị trường, tôi sử dụng mẫu để hiển thị ngày theo định dạng ngày tháng 'dd/MM/yyyy'. Vấn đề là khi lọc, tôi không biết cách hiển thị bộ lọc ngày theo định dạng Anh.định dạng ngày tháng của bộ lọc dữ liệu lưới kendo ui

Một vấn đề khác mà tôi đang gặp là không có loại datetime, chỉ là ngày tháng, do đó, chỉ có thể lọc theo ngày không phải datetimes.

Bất kỳ trợ giúp hoặc ý tưởng nào sẽ được đánh giá cao.

Đây là quan điểm từng phần (cshtml)

<script type="text/javascript"> 
$(document).ready(function() { 
    var date = new Date(); 
    var dateString = date.getMonth()+1 + "/" + date.getDate() + "/" + date.getFullYear(); 
    var url = '@Url.Action(AccountTypeController.GetAllocationGridData, new {id = Model.Id})'; 

    var dataSource = new kendo.data.DataSource({ 
     serverPaging: true, 
     serverSorting: true, 
     serverFiltering: true, 
     pageSize: 10, 
     transport: { 
      read: { 
       type: 'post', 
       dataType: 'json', 
       url: url 
      }, 
      parameterMap: function(options) { 
       if (options.filter) { 
        for (var i = 0; i < options.filter.filters.length; i++) { 
         if (options.filter.filters[i].field == 'Start' || options.filter.filters[i].field == 'End') { 
          options.filter.filters[i].value = kendo.toString(options.filter.filters[i].value, "MM/dd/yyyy"); 
         } 
        } 
       } 
       return options; 
      } 
     }, 
     schema: { 
      data: 'Data', 
      total: 'Count', 
      model: { 
       id: 'Id', 
       fields: { 
        Id: { type: 'number' }, 
        Start: { type: 'date' }, 
        End: { type: 'date' }, 
        Allocation: { type: 'number' } 
       } 
      } 
     }, 
     sort: { 
      field: "Start", 
      dir: "asc" 
     }, 
     filter:{ 
      logic: "and", 
      filters: [ 
       { 
        field: "End", 
        operator: "gt", 
        value: dateString 
       } 
      ] 
     } 
    }); 

    $('#account-allocation').kendoGrid({ 
     height: 383, 
     dataSource: dataSource, 
     columns: [ 
      { 
       field: 'Start', 
       title: 'Start Date', 
       template: '#= kendo.toString(Start,"dd/MM/yyyy HH:mm") #' 
      }, 
      { 
       field: 'End', 
       title: 'End Date', 
       template: '#= kendo.toString(End,"dd/MM/yyyy HH:mm") #' 
      }, 
      { 
       field: 'NoSpaces', 
       title: 'Number of Spaces', 
       filterable: false 
      }, 
      { 
       field: 'Id', 
       filterable: false, 
       title: 'Actions', 
       template: '<a class="link-lightbox" href="@Url.Action(AccountTypeController.UpdateAllocationAction1, AccountTypeController.Name)/#= Id #"><img src="@Url.Content("~/Content/img/grid-update.png")" alt="Update"/></a>', 
       width: 75 
      } 
     ], 
     filterable: true, 
     sortable: false, 
     scrollable: false, 
     pageable: true   
    }); 
</script> 

<div class="panel panel-w"> 
    <h2>@Model.Name Allocations 
      <a href="@Url.Action(AccountTypeController.SetAllocationAction1, new { id = Model.Id })" class="button link-lightbox"><span class="edit">Set Account Type Allocation</span></a> 
    </h2> 
    <div id="account-allocation"></div> 
</div> 
+0

Ngoài ra, bạn có thể thử để xem ở đây: http://stackoverflow.com/questions/28232575/kendoui-grid-filter-date-format –

Trả lời

9

Đầu tiên bao gồm tệp JavaScript tương ứng với văn hóa tiếng Anh:

<script src="http://cdn.kendostatic.com/2012.2.710/js/cultures/kendo.culture.en-GB.min.js"></script> 

Sau đó gọi kendo.culture để thiết lập các nền văn hóa hiện nay:

kendo.culture("en-GB"); 

Lưới Kendo sẽ tự động sử dụng định dạng 'dd/MM/yyyy'.

Thông tin thêm về cách giao diện người dùng Kendo với toàn cầu hóa có thể được tìm thấy trong documentation.

Đây là một bản demo trực tiếp: http://jsbin.com/onetol/1/edit

+0

làm việc hoàn hảo. Cảm ơn! –

Các vấn đề liên quan