jQuery：Kendo Grid下拉值变更时如何为内置Kendo DatePicker设置今日日期

问题根因 #

• 原有代码获取日期选择器的逻辑错误：closest() 方法用于向上查找祖先元素，而同行的 dateReceived 输入框是当前行节点下其他单元格的子元素，无法通过向上查找定位
• Kendo网格批量编辑模式下，直接操作绑定的数据源比操作UI控件更稳妥，可避免DOM定位失效、编辑器未初始化等异常问题

最优解决方案（操作数据源自动同步UI） #

直接修改当前行绑定的dataItem字段值，Kendo网格会自动同步对应UI显示、自动标记脏数据，完全适配批量编辑逻辑，不需要手动查找日期控件实例，修改后的编辑器函数代码如下：

function medRecRcvdDropDownEditor(container, options) {
    $('<input required name="' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: true,
            dataTextField: "MedRecRcvdName",
            dataValueField: "MedRecRcvdId",
            change: function (e) {
                var value = this.value();
                if (value != null && value == "Y") {
                    var grid = e.sender.element.closest(".k-grid").data("kendoGrid");
                    var row = e.sender.element.closest("tr");
                    // 获取当前行绑定的数据项
                    var dataItem = grid.dataItem(row);
                    // 直接给dateReceived字段赋值，网格会自动更新对应列的UI和编辑器值
                    dataItem.set("dateReceived", new Date());
                }            
            },
            dataSource: {
                transport: {
                    read: function (e) {
                        e.success(datasource);
                    }
                }
            }
        });
}

可选方案（修复控件查找逻辑） #

如果你确实需要直接操作日期选择器实例，只需要修正DOM查找逻辑即可，将原来的向上查找改为在当前行范围内向下查找：

// 把原有change事件中的日期控件查找代码替换为下面的内容
var row = e.sender.element.closest("tr");
var medRecdtPicker = row.find("[name='dateReceived']").data("kendoDatePicker");
if(medRecdtPicker) { // 增加判空逻辑避免编辑器未初始化时报错
    medRecdtPicker.setDate(new Date());
}

内容的提问来源于stack exchange，提问作者HereToLearn_