参考自:https://segmentfault.com/q/1010000008362364
{
field : 'contentCreateDate',
title : '发布日期',
visible: true,
sortable: true,
editable : {
type: 'date',
clear: false,
placement: 'left',//位置
emptytext : "--",//默认值
title: '请选择日期:'
}
},
日期中文支持:
需要先引入中文支持相关js,from https://github.com/uxsolutions/bootstrap-datepicker/blob/master/js/locales/bootstrap-datepicker.zh-CN.js
/**
* Simplified Chinese translation for bootstrap-datepicker
* Yuan Cheung <[email protected]>
*/
(function($){
$.fn.datepicker.dates['zh-CN'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
daysMin: ["日", "一", "二", "三", "四", "五", "六"],
months: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
// months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
today: "今天",
monthsTitle: "选择月份",
clear: "清除",
format: "yyyy-mm-dd",
titleFormat: "yyyy年mm月",
weekStart: 1
};
}(jQuery));
<link th:href="@{/ajax/libs/bootstrap-table/extensions/editable/bootstrap-editable.css}" rel="stylesheet"/>
---------
html内容
---------
<script src="/ajax/libs/bootstrap-table/extensions/editable/bootstrap-editable.min.js"></script>
<!--这是自定义的js文件 <script src="/ajax/libs/bootstrap-table/extensions/editable/bootstrap-editable.update.js"></script> -->
<script src="/ajax/libs/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
<script src="/ajax/libs/bootstrap-table/extensions/editable/bootstrap-datepicker.zh-CN.js"></script>
<script th:inline="javascript">
----其他代码-----
{
field : 'contentCreateDate',
title : '发布日期',
visible: true,
sortable: true,
editable : {
type: 'date',//日期控件
clear: false,//隐藏clear按钮
placement: 'left',//居左显示
emptytext : "--",//默认值
datepicker: {
language: 'zh-CN',//中文支持
},
title: '请选择日期:'
}
},
----其他代码-----
</script>
--------------------------------------------------------------------------------------
如果觉得自带的日期样式不好看,可以X-editable搭配Bootstrap-DatePicker控件 :https://blog.csdn.net/torpidcat/article/details/103878860