有时，会用到只选择年月的日期控件，jquery中没有现成的这样控件，
该控件基于jquery，没有详尽整理
调用代码：
$('#settleDateStart').combobox('yearandmonth');
$('#settleDateEnd').combobox('yearandmonth');
全部代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<style>
.mytable
{
padding: 0;
margin: 10px auto;
border-collapse: collapse;
font-family: @宋体;
empty-cells: show;
}
.mytable caption
{
font-size: 12px;
color: #0E2D5F;
height: 16px;
line-height: 16px;
border: 1px dashed red;
empty-cells: show;
}
.mytable tr th
{
border: 1px dashed #C1DAD7;
letter-spacing: 2px;
text-align: left;
padding: 6px 6px 6px 12px;
font-size: 13px;
height: 16px;
line-height: 16px;
empty-cells: show;
}
.mytable tr td
{
font-size: 12px;
border: 1px dashed #C1DAD7;
padding: 6px 6px 6px 12px;
empty-cells: show;
border-collapse: collapse;
}
.cursor
{
cursor: pointer;
}
.tdbackground
{
background-color: #FFE48D;
}
</style>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<%@ include file="/includepage.jsp"%>
<script type="text/javascript" src="webpages/statistics/tbl_bat_recharge.js"></script>
<script type="text/javascript">
$.extend($.fn.combobox.methods, {
yearandmonth: function (jq) {
return jq.each(function () {
var obj = $(this).combobox();
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var table = $('<table style="width:150px;height:178px">');
var tr1 = $('<tr>');
var tr1td1 = $('<td>', {
text: '-',
click: function () {
var y = $(this).next().html();
y = parseInt(y) - 1;
$(this).next().html(y);
}
});
tr1td1.appendTo(tr1);
var tr1td2 = $('<td>', {
text: year
}).appendTo(tr1);
var tr1td3 = $('<td>', {
text: '+',
click: function () {
var y = $(this).prev().html();
y = parseInt(y) + 1;
$(this).prev().html(y);
}
}).appendTo(tr1);
tr1.appendTo(table);
var n = 1;
for (var i = 1; i <= 4; i++) {
var tr = $('<tr>');
for (var m = 1; m <= 3; m++) {
var td = $('<td>', {
text: n,
click: function () {
var yyyy = $(table).find("tr:first>td:eq(1)").html();
var cell = $(this).html();
var v = yyyy + '-' + (cell.length < 2 ? '0' + cell : cell);
obj.combobox('setValue', v).combobox('hidePanel');
}
});
if (n == month) {
td.addClass('tdbackground');
}
td.appendTo(tr);
n++;
}
tr.appendTo(table);
}
table.addClass('mytable cursor');
table.find('td').hover(function () {
$(this).addClass('tdbackground');
}, function () {
$(this).removeClass('tdbackground');
});
table.appendTo(obj.combobox("panel"));
});
}
});
function myformatter(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
return y+'-'+(m<10?('0'+m):m);
}
function myparser(s){
if (!s) return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
if (!isNaN(y) && !isNaN(m)){
return new Date(y,m-1);
} else {
return new Date();
}
}
function myformatter(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
return y+'-'+(m<10?('0'+m):m);
}
function myparser(s){
if (!s) return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
if (!isNaN(y) && !isNaN(m)){
return new Date(y,m-1);
} else {
return new Date();
}
}
var querypage;
var basePath = '<%=basePath%>';
$(document).ready(function() {
var index = 0;
var height1 = document.body.clientHeight;
var width1 = document.body.clientWidth;
var result =${actionresult};
var logonUser=result.field2;
comboboxRequest(basePath+'/common_getTbl_bse_info_inst.do',"#up_inst_id");
comboboxRequest(basePath+'/common_getSystemDictionary.do?dicttype=20012','#chk_st');
comboboxRequest(basePath+'/common_getSystemDictionary.do?dicttype=20075','#card_type');
comboboxRequest(basePath+'/common_getSystemDictionary.do?dicttype=20072','#err_code');
$('#settleDateStart').combobox('yearandmonth');
$('#settleDateEnd').combobox('yearandmonth');
$('#mchnt_id').combogrid({
panelHeight:250,
delay: 1000,
mode: 'remote',
url: '<%=basePath%>'+'/common_getTbl_bse_inf_mchnt.do',
idField: 'mchnt_id',
textField: 'mchnt_name',
method:'post',
columns: [[
{field:'mchnt_id',title:'商户号',width:160,sortable:true},
{field:'mchnt_name',title:'商户名称',width:100,sortable:true}
]]
});
$('#inst_id').combogrid({
panelHeight:250,
delay: 1000,
mode: 'remote',
url: '<%=basePath%>'+'/common_getTbl_bse_info_inst.do',
idField: 'inst_id',
textField: 'inst_cn_short',
method:'post',
columns: [[
{field:'inst_id',title:'机构代码',width:100,sortable:true},
{field:'inst_cn_short',title:'机构中文简称',width:100,sortable:true}
]]
});
//构造查询面板
querypage = new Querypage('<%=basePath%>'+'/statistics/tbl_bat_batlog_query.do','#tb1','#pg',height1,width1,tbColumns1);
//初始化权限按钮
initPriviligeBtns('/statistics/tbl_bat_batlog_loadPage.do');
});
</script>
<title>空圈财务统计管理</title>
</head>
<body class="easyui-layout">
<div data-options="region:'center'" style="background:#fafafa;overflow:hidden">
<table id="tb1" class="easyui-datagrid" title="" style="width:100%px;"
data-options="rownumbers:true,singleSelect:true,fit:true,toolbar:'#tb'">
</table>
<div id="tb" style="padding:5px;height:auto">
<div style="margin-bottom:5px">
<a id="btn-query" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="queryInfo02(1,QP_PAGESIZE,'settle_date','')">查询</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reset" plain="true" onclick="reset()">重置</a>
<a id="btn-export" href="javascript:void(0)" class="easyui-splitbutton" data-options="menu:'#splitbutton',iconCls:'icon-print'">导出</a>
</div>
<form id="queryfm" method="post">
<div>
<div>
结算开始日期:<input id="settleDateStart" name="settleDateStart" />
结算结束日期:<input id="settleDateEnd" name="settleDateEnd" />
错误代码描述:<input id="err_code" name="err_code" class="easyui-combobox" data-options="valueField:'dictvalue',textField:'dictvaluedesc',panelHeight:'auto',editable:false" />
卡类型:<input id="card_type" name="card_type" class="easyui-combobox" data-options="valueField:'dictvalue',textField:'dictvaluedesc',panelHeight:'auto'" />
</div>
<div>
机构代码：<input id="inst_id" name="inst_id" class="easyui-combogrid" style="width: 200px;"maxlength='11' data-options="editable:false"/>
商户号 : <input id="mchnt_id" name="mchnt_id" class="easyui-combogrid" style="width: 266px;"maxlength='15' data-options="editable:true"/>
</div>
</div>
</form>
</div>
<div id="splitbutton" style="width:300px">
<div><a id="btn-exportxls" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-excel07" plain="true" onclick="exportExcel('xls')">xls文件</a>(EXCEL1997-2003版本)</div>
<div><a id="btn-exportxls" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-excel07" plain="true" onclick="exportExcel('xlsx')">xlsx文件</a>(EXCEL2007以上版本)</div>
</div>
<!-- 添加模块 -->
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveInfo()">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#adddlg').dialog('close')">取消</a>
</div>
<div id="rowdtl-dialog" class="easyui-dialog" closed="true" modal="true" style="height:350;width:700;overflow:auto">
<div id="dtltable"></div>
</div>
</div>
<div data-options="region:'south',split:false" style="height:30px;background:#fafafa;">
<div id="pg" style="height:30" class="easyui-pagination"></div>
</div>
</body>
</html>
194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
