1500字范文 > EasyUI年-月日期格式的日期时间控件+行内编辑的年-月日期格式的日期时间控件

EasyUI年-月日期格式的日期时间控件+行内编辑的年-月日期格式的日期时间控件

时间：2019-06-04 18:09:49

一、input标签下的easyui-datebox的年月时间格式

1、标签代码

<label style="font-size: 14px;font-family: Microsoft YaHei ! important;font-weight: bold">备注时间:</label>  <input id="remarkDate" name="remarkDate" class="easyui-datebox"/>

2、js代码

//格式化日期function myformatter(date) {//获取年份var y = date.getFullYear();//获取月份var m = date.getMonth() + 1;return y + '-' + m;}$(function () {$('#remarkDate').datebox({//显示日趋选择对象后再触发弹出月份层的事件，初始化时没有生成月份层onShowPanel: function () {//触发click事件弹出月份层span.trigger('click');if (!tds)//延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔setTimeout(function() {tds = p.find('div.calendar-menu-month-inner td');tds.click(function(e) {//禁止冒泡执行easyui给月份绑定的事件e.stopPropagation();//得到年份var year = /\d{4}/.exec(span.html())[0] ,//月份//之前是这样的month = parseInt($(this).attr('abbr'), 10) + 1;month = parseInt($(this).attr('abbr'), 10);//隐藏日期对象,//设置日期的值$('#remarkDate').datebox('hidePanel').datebox('setValue', year + '-' + month);});}, 0);},//配置parser，返回选择的日期parser: function (s) {if (!s) return new Date();var arr = s.split('-');return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);},//配置formatter，只返回年月之前是这样的d.getFullYear() + '-' +(d.getMonth());formatter: function (d) {var currentMonth = (d.getMonth()+1);var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + '');return d.getFullYear() + '-' + currentMonthStr;}});//日期选择对象var p = $('#remarkDate').datebox('panel'),//日期选择对象中月份tds = false,//显示月份层的触发控件span = p.find('span.calendar-text');var curr_time = new Date();//设置前当月$("#remarkDate").datebox("setValue", myformatter(curr_time));});

二、新增行内编辑中的年-月格式

1、在datagrid下的可编辑代码，可编辑属性editor。

{field: 'remarkDate', align: 'center', title: '备注时间', width: 100,editor: {type: 'datebox',options: {required: true,editable: false,validType: ['length[0,30]'],onShowPanel: function () {//日期选择对象var p = $(this).datebox('panel'),//日期选择对象中月份tds = false,//显示月份层的触发控件span = p.find('span.calendar-text');//触发click事件弹出月份层span.trigger('click');var self = this;if (!tds){//延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔setTimeout(function() {tds = p.find('div.calendar-menu-month-inner td');tds.click(function(e) {//禁止冒泡执行easyui给月份绑定的事件e.stopPropagation();console.log(111)//得到年份var year = /\d{4}/.exec(span.html())[0] ,//月份//之前是这样的month = parseInt($(this).attr('abbr'), 10) + 1;month = parseInt($(this).attr('abbr'), 10);//隐藏日期对象,//设置日期的值$(self).datebox('hidePanel').datebox('setValue', year + '-' + month);});}, 0);}},//配置parser，返回选择的日期parser: function (s) {if (!s) return new Date();var arr = s.split('-');return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);},icons: [{iconCls:'iconfont icon-guanbi3',handler: function(e){$(e.data.target).textbox('clear');}}],//配置formatter，只返回年月之前是这样的d.getFullYear() + '-' +(d.getMonth());formatter: function (d) {var currentMonth = (d.getMonth()+1);var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + '');return d.getFullYear() + '-' + currentMonthStr;}}}}

2、新增按钮标签代码以及新增方法的js

<a href="javascript:void(0)" class="easyui-linkbutton b-btn-red" onclick="addStsDayRemark()" data-options="iconCls:'icon iconfont icon-add'">新增</a>

//新增行function addStsDayRemark() {var tableName = $("#listTable");if (table_save(tableName)) {//设置前当月var curr_time = new Date();tableName.datagrid('appendRow', {remarkDate:myformatter(curr_time)});editIndex = tableName.datagrid('getRows').length - 1;//将第一行设置为可编辑状态tableName.datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);onResetRender(tableName);} else {Msg.error('请正确填写信息')}}