bootstrap-table+x-editable实现行内编辑之日期选择器

在使用 Bootstrap-Table 的过程中，我们经常需要使用到表格中的行内编辑功能，而日期选择器是其中常见的需求之一。然而，自带的 x-editable 日期选择器可能不尽人意，其样式可能与我们的设计风格不符。因此，我们可以通过自定义的方式，利用 laydate 日期控件来实现一个更符合我们需求的日期选择器。

//引入样式和相关js文件
<th:block th:include="include :: datetimepicker-css"/>
<th:block th:include="include :: bootstrap-editable-css"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: bootstrap-table-editable-js"/>

else if (editableType === "date") {
                            uniqueIdForDatePicker = fieldData.fieldName + fieldData.id
                            dateFieldName = fieldData.fieldName
                            column.editable = {
                                type: 'text',
                                title: column.title,
                                mode: "inline",
                                showbuttons: false,
                                tpl: "<input id='" + uniqueIdForDatePicker + "'>",
                                inputclass: 'RemoveFocus datepicker-Date',
                            }
                        }

var uniqueIdForDatePicker;
var newUniqueId;
var dateFieldName;


function onClickCell(field, value, row, $element) {
    initDatePickers();
    if (field === dateFieldName) { 
        newUniqueId = uniqueIdForDatePicker + '-' + row.id; // 创建唯一的 ID
        $('#' + uniqueIdForDatePicker).attr('id', newUniqueId); // 更新日期选择器的 ID
    }
}

// 初始化日期选择器
function initDatePickers() {
    layui.use('laydate', function () { // 使用 layui 的 laydate 插件
        var laydate = layui.laydate;
        $(this).removeAttr("lay-key"); 
        laydate.render({
            elem: '#' + newUniqueId, // 渲染日期选择器到指定id
            trigger: 'click',
            done: function (value, date) { 
                $(this)[0].elem[0].dispatchEvent(new KeyboardEvent('keydown', { // 模拟键盘事件触发
                    keyCode: 13 // 模拟按下回车键
                }));
            }
        });
    });
}

• uniqueIdForDatePicker、newUniqueId 和 dateFieldName 分别用于存储日期选择器的唯一 ID、更新后的唯一 ID 和 当前日期字段的名称。
• onClickCell 函数用于在单元格被点击时初始化日期选择器。当单元格对应的字段是日期类型时，它将初始化日期选择器并更新其唯一 ID。
• initDatePickers 函数利用 layui 的 laydate 插件初始化日期选择器。它使用 newUniqueId 作为日期选择器的目标元素，并设置点击触发日期选择器。在选择日期后，通过模拟键盘事件触发回车键，以保存日期修改。

 在官方文档里，行内编辑不带按钮的时候表单会自动提交，因此需要在bootstrap-editable.js里补充对应的autosbmit逻辑

autosubmit: function () {
				var $input = this.$input;
				if (!$input.hasClass("RemoveFocus") || !$input.hasClass("datepicker-Date")) {
					$input.keydown(function (b) {
						if (13 === b.which) {
							b.preventDefault();
							a(this).closest("form").submit();
						}
					});
					$input.blur(function () {
						a(this).closest("form").submit();
					});
				} else {
					$input.keydown(function (b) {
						if (13 === b.which) {
							b.preventDefault();
							a(this).closest("form").submit();
						}
					});
				}
			},

Bootstrap-DatePicker 覆盖掉原日期控件插件https://pan.baidu.com/s/1OFu50hldGp8H8ZZzUPO9fg#list/path=%2F

效果图补充