一、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 () {
span.trigger('click');
if (!tds)
setTimeout(function() {
tds = p.find('div.calendar-menu-month-inner td');
tds.click(function(e) {
e.stopPropagation();
var year = /\d{4}/.exec(span.html())[0] ,
month = parseInt($(this).attr('abbr'), 10);
$('#remarkDate').datebox('hidePanel').datebox('setValue', year + '-' + month);
});
}, 0);
},
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: 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');
span.trigger('click');
var self = this;
if (!tds){
setTimeout(function() {
tds = p.find('div.calendar-menu-month-inner td');
tds.click(function(e) {
e.stopPropagation();
console.log(111)
var year = /\d{4}/.exec(span.html())[0] ,
month = parseInt($(this).attr('abbr'), 10);
$(self).datebox('hidePanel').datebox('setValue', year + '-' + month);
});
}, 0);
}
},
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: 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('请正确填写信息')
}
}
如果是年月日或者年月日时分秒就不用写那么多。直接用EasyUI框架自带的时间控件即可,年月日:datebox;年月日时分秒的是:datetimebox;Class是:class="easyui-datebox"和class=“easyui-datetimebox”。可参考官网地址。
官网地址是:https://www.jeasyui.net/
其他:http://easyui.92ui.net/