如何使 bootstrap 3 datepicker 在 kendo mvc 单元内批量编辑网格中工作答案

【问题标题】：How do I make a bootstrap 3 datepicker work in a kendo mvc in-cell batch edit grid如何使 bootstrap 3 datepicker 在 kendo mvc 单元内批量编辑网格中工作
【发布时间】：2014-03-20 06:04:25
【问题描述】：

所以我可以在较新的浏览器中使其正常工作，但在 IE9 中，当在日期选择器上单击日期时，单元格将返回为未选中、空且不脏。我的代码示例是

型号

public string name { get; set; }

[DataType(DataType.Date)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:d}", NullDisplayText = "")]
[Display(Name = "Actual Start")]
public DateTime? ActualStartDate { get; set; }

public DateTime? ActualEndDate { get; set; }

网格

Html.Kendo().Grid<MilestoneDto>()

     .Name("editMilestoneList")
     .Columns(columns =>
     {
         columns.Bound(m => m.Name).Title("Name");
         columns.Bound(m => m.Status).EditorTemplateName("_milestoneStatus");
         columns.Bound(m => m.PlannedStartDateStringValue);
         columns.Bound(m => m.ProjectedStartDateStringValue);
         columns.Bound(m => m.ActualStartDate).EditorTemplateName("GenericDatePicker");
         columns.Bound(m => m.PlannedEndDateStringValue);
         columns.Bound(m => m.ProjectedEndDateStringValue);
         columns.Bound(m => m.ActualEndDateStringValue).EditorTemplateName("GenericDatePicker");
         columns.Bound(m => m.CommentCount).ClientTemplate("<a href='javascript:;' onclick='callCommentModal()'>#if(CommentCount > 0) {# <span class=\"badge\">#=CommentCount#</span>#}else{#<span class=\"fa fa-plus-circle\"></span>#}#</a>").Title("Comments").Sortable(false).IncludeInMenu(false);
     })
     .HtmlAttributes(new { @class = "hidden results table-responsive" })
     .DataSource(dataSource => dataSource
                                 .Ajax()
                                 .Read(read => read.Action("DataSource", "Milestone").Data("additionalParams"))
                                 .Update(update => update.Action("BatchEdit", "Milestone"))
                                 .Batch(true)
                                 .Events(e => e.Sync("SyncGrid"))
                                 .ServerOperation(false)
                                 .Model(m => {
                                     m.Id(mf => mf.Id);
                                     m.Field(f => f.Name).Editable(false);
                                     m.Field(f => f.Status).Editable(ViewBag.IsBaselined);
                                     m.Field(f => f.PlannedStartDateStringValue).Editable(false);
                                     m.Field(f => f.PlannedEndDateStringValue).Editable(false);
                                     m.Field(f => f.CommentCount).Editable(false);
                                     m.Field(f => f.ProjectedStartDateStringValue).Editable(false);
                                     m.Field(f => f.ProjectedEndDateStringValue).Editable(false);
                                     m.Field(f => f.ActualStartDate).Editable(ViewBag.IsBaselined);
                                     m.Field(f => f.ActualEndDate).Editable(ViewBag.IsBaselined);                          
                                 })
     )
     .Editable(editable => editable.Mode(GridEditMode.InCell))
     .ColumnMenu()
     .Filterable()
     .Sortable();
}

编辑器模板

@model DateTime? 
@Html.TextBoxFor(model => model, new { @class="k-textbox bootStrapDatePicker form-   control" })
<script type="text/javascript">
    $('.bootStrapDatePicker').datepicker({ startDate: '0', format: "m/d/yyyy", autoclose:   true });
</script>

【问题讨论】：

标签： kendo-ui kendo-grid kendo-asp.net-mvc kendo-ui-mvc

【解决方案1】：

您有两个（更好的）选项可以自动为您设置 DateTimePicker：

1) 在网格列/模型中，使用您的 ActualStartDate 属性。然后你可以在你的列上使用.Format() 方法来设置你想要的格式。

2) 我不知道确切的语法是什么，但是当您在网格中定义Model 时，我相信有DataType() 或类似的方法可以将其设置为日期时间。

【讨论】：

【解决方案2】：

已经有一段时间了，但事实证明问题是 jquery 的版本不正确。

【讨论】：