ruoyi 若依行内编辑 bootstrap-editable 日期控件位置 中文日期

参考自: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


 

发布了99 篇原创文章 · 获赞 55 · 访问量 32万+

猜你喜欢

转载自blog.csdn.net/torpidcat/article/details/103871641