本文介绍了一种使用JavaScript实现日期输入框，允许用户输入年份+季度格式的日期，并通过实时监听功能自动转换为yyyyMM格式。文章详细解释了如何设置全局变量、日期格式化以及避免死循环的方法。
今天在开发的过程中，其中一个任务期次的输入查询是按年份+季度的格式来输入的，比如2013年第一季度则用201301来显示，输入框是用date。大致思路是用日期框生成yyyyMM格式的日期，然后实时监听日期框的值，如果有改变则读取值，然后将值进行字符串处理成yyyy+季度格式数据，其中为了防止实时监听的死循环，加入了一个ischanged变量来控制。实现代码如下：
设置一个全局变量，用来记录是否改变过值，为了防止死循环用；
var isChanged = true;
绑定实时监听的代码实现
$("#taskTerm").bind('input propertychange', function() {
//为了防止出现死循环，延迟一秒后在改变值 设置isChanged变量
if(isChanged){
isChanged = false;
var taskTermVal = $(this).val();
var taskTerm;
if(taskTermVal == ""){
return;
}else {
var monthVal = taskTermVal.substring(4,6);
var yearVal = taskTermVal.substring(0,4);
if(monthVal.localeCompare("01") >= 0 && monthVal.localeCompare("03") <= 0){
taskTerm = yearVal + "01";
}else if(monthVal.localeCompare("04") >= 0 && monthVal.localeCompare("06") <= 0){
taskTerm = yearVal + "02";
}else if(monthVal.localeCompare("07") >= 0 && monthVal.localeCompare("09") <= 0){
taskTerm = yearVal + "03";
}else {
taskTerm = yearVal + "04";
}
$("#taskTerm").ligerGetDateEditorManager().setValue(taskTerm);
}
//为了防止出现死循环，延迟0.5秒后在改变值
setTimeout("setIsChanged()", 500 );
}
});
日期框的格式化：
$("#taskTerm").ligerDateEditor({
format: "yyyyMM"
});
改变ischanged变量值的函数
function setIsChanged(){
isChanged = true;
}
这样就实现了年份季度这种日期格式的设置。
贴一下整个页面代码
<script type="text/javascript">
var result;
var isChanged = true;
var isChanged2 = true;
$(function() {
$.get("/mmwp/mmwp/report.do?method=getTqList",loadGrid);
function loadGrid(data){
result = $.secureEvalJSON(data);
window['gridTq'] = $("#grid1").ligerGrid({
columns : getGrid1Columns(),
data : result.TQList,
allowHideColumn : false,
width : '100%',
rownumbers : false,
pageSize:20,
rownumbers:true,
onDblClickRow : viewTQ,
toolbar: { items: [
{ text: '查看详细', click: itemclick, icon: 'search'} ,
{ line: true },
{text: '高级自定义查询', click: searchMore, icon: 'search2'}
]
}
});
}
$('#tqSearch').bind('click', function(){
var tqTypeVal = $("#tqType").ligerComboBox().getValue();
var taskNameVal = $("#taskName").ligerGetTextBoxManager().getValue();
var fillinDeptVal = $("#fillinDept").ligerGetTextBoxManager().getValue();
var fillinPersonVal = $("#fillinPerson").ligerGetTextBoxManager().getValue();
var taskTermVal = $("#taskTerm").val();
var taskTermVal2 = $("#taskTerm2").val();
$.get("/mmwp/mmwp/report.do?method=getTqList",
{
tqType: encodeURIComponent(tqTypeVal),
taskName: encodeURIComponent(taskNameVal),
fillinDept: encodeURIComponent(fillinDeptVal),
fillinPerson: encodeURIComponent(fillinPersonVal),
taskTerm: encodeURIComponent(taskTermVal),
taskTerm2: encodeURIComponent(taskTermVal2)
},
loadGrid);
});
$("#taskTerm").bind('input propertychange', function() {
//为了防止出现死循环，延迟一秒后在改变值 设置isChanged变量
if(isChanged){
isChanged = false;
var taskTermVal = $(this).val();
var taskTerm;
if(taskTermVal == ""){
return;
}else {
var monthVal = taskTermVal.substring(4,6);
var yearVal = taskTermVal.substring(0,4);
if(monthVal.localeCompare("01") >= 0 && monthVal.localeCompare("03") <= 0){
taskTerm = yearVal + "01";
}else if(monthVal.localeCompare("04") >= 0 && monthVal.localeCompare("06") <= 0){
taskTerm = yearVal + "02";
}else if(monthVal.localeCompare("07") >= 0 && monthVal.localeCompare("09") <= 0){
taskTerm = yearVal + "03";
}else {
taskTerm = yearVal + "04";
}
$("#taskTerm").ligerGetDateEditorManager().setValue(taskTerm);
}
//为了防止出现死循环，延迟0.5秒后在改变值
setTimeout("setIsChanged()", 500 );
}
});
$("#taskTerm2").bind('input propertychange', function() {
//为了防止出现死循环，延迟一秒后在改变值 设置isChanged2变量
if(isChanged2){
isChanged2 = false;
var taskTermVal2 = $(this).val();
var taskTerm2;
if(taskTermVal2 == ""){
return;
}else {
var monthVal2 = taskTermVal2.substring(4,6);
var yearVal2 = taskTermVal2.substring(0,4);
if(monthVal2.localeCompare("01") >= 0 && monthVal2.localeCompare("03") <= 0){
taskTerm2 = yearVal2 + "01";
}else if(monthVal2.localeCompare("04") >= 0 && monthVal2.localeCompare("06") <= 0){
taskTerm2 = yearVal2 + "02";
}else if(monthVal2.localeCompare("07") >= 0 && monthVal2.localeCompare("09") <= 0){
taskTerm2 = yearVal2 + "03";
}else {
taskTerm2 = yearVal2 + "04";
}
$("#taskTerm2").ligerGetDateEditorManager().setValue(taskTerm2);
}
//为了防止出现死循环，延迟0.5秒后在改变值
setTimeout("setIsChanged2()", 500 );
}
});
$("#taskTerm").ligerDateEditor({
format: "yyyyMM"
});
$("#taskTerm2").ligerDateEditor({
format: "yyyyMM"
});
})
function setIsChanged(){
isChanged = true;
}
function setIsChanged2(){
isChanged2 = true;
}
function viewTQ(data){
if( data.REPORTTYPE == 'T-Q-1'){
window.open("reportTq1.jsp?taskId="+data.TASKID,"","scrollbars=yes,status=yes,resizable=no,top=0,left=0,width="+(screen.availWidth-10)+",height="+(screen.availHeight-30));
}else if( data.REPORTTYPE == 'T-Q-2'){
window.open("reportTq2.jsp?taskId="+data.TASKID,"","scrollbars=yes,status=yes,resizable=no,top=0,left=0,width="+(screen.availWidth-10)+",height="+(screen.availHeight-30));
}else if( data.REPORTTYPE == 'T-Q-3'){
window.open("reportTq3.jsp?taskId="+data.TASKID,"","scrollbars=yes,status=yes,resizable=no,top=0,left=0,width="+(screen.availWidth-10)+",height="+(screen.availHeight-30));
}else if( data.REPORTTYPE == 'T-Q-4'){
window.open("reportTq4.jsp?taskId="+data.TASKID,"","scrollbars=yes,status=yes,resizable=no,top=0,left=0,width="+(screen.availWidth-10)+",height="+(screen.availHeight-30));
}else if( data.REPORTTYPE == 'T-Q-5'){
window.open("reportTq5.jsp?taskId="+data.TASKID,"","scrollbars=yes,status=yes,resizable=no,top=0,left=0,width="+(screen.availWidth-10)+",height="+(screen.availHeight-30));
}else {
$.ligerDialog.warn('该报表类型不是非现场报表，不能查看！');
}
}
function itemclick(){
var data = gridTq.getSelectedRow();
if(data == null){
$.ligerDialog.warn('请先选择要查看的报表！');
}else {
viewTQ(data);
}
}
function searchMore(){
gridTq.options.data = result.TQList;
gridTq.showFilter();
}
function reset(){
$("#tqType").ligerComboBox().setValue("");
$("#taskName").ligerGetTextBoxManager().setValue("");
$("#fillinDept").ligerGetTextBoxManager().setValue("");
$("#fillinPerson").ligerGetTextBoxManager().setValue("");
$("#taskTerm").ligerGetDateEditorManager().setValue("");
$("#taskTerm2").ligerGetDateEditorManager().setValue("");
}
function getGrid1Columns() {
return [ {
display : '任务名称',
name : 'TASKNAME',
width : 120,
align : 'left'
},{
display : '报表类型',
name : 'REPORTTYPE',
width : 60,
align : 'left'
},{
display : '填报部门',
name : 'FILLINDEPT',
width : 100,
align : 'left'
},{
display : '填报人',
name : 'FILLINPERSON',
width : 60,
align : 'left'
},{
display : '填报时间',
name : 'CREATEDATE',
width : 80,
align : 'left'
},{
display : '联系电话',
name : 'TELEPHONE',
width : 100,
align : 'left'
},{
display : '责任人',
name : 'RESPERSON',
width : 60,
align : 'left'
},{
display : '任务期次',
name : 'TASKTERM',
width : 60,
align : 'left'
},{
display : '文件名称',
name : 'FILENAME',
width : 200,
align : 'left',
render : function(record, rowindex, value, column) {
if (record.FILEPATH != '' && record.FILEPATH != null) {//如果选择其他，会有备注信息
value = "<a href = \"/mmwp/mmwp/file.do?method=downLoadFile&filePath= " + record.FILEPATH + "\" >" + value + "</a>"
}
return value; //返回此单元格显示的HTML内容(一般根据value和row的内容进行组织)
}
}
];
}
</script>
</head>
<body style="padding: 6px; width: 90%; height: 100%;">
<div id="form1" class="liger-form">
<table cellpadding="0" cellspacing="0" class="l-table-edit" >
<tr>
<td align="right" class="l-table-edit-td" width="80">TQ类型:</td>
<td align="left" class="l-table-edit-td">
<select name="tqType" id="tqType" ltype="select" >
<option value="">ALL</option>
<option value="T-Q-1">TQ1</option>
<option value="T-Q-2">TQ2</option>
<option value="T-Q-3">TQ3</option>
<option value="T-Q-4">TQ4</option>
<option value="T-Q-5">TQ5</option>
</select>
</td>
<td align="left"></td>
<td align="right" class="l-table-edit-td" width="80">任务名称:</td>
<td align="left" class="l-table-edit-td"><input name="taskName" type="text" id="taskName" ltype="text" /></td>
<td align="left"></td>
<td align="right" class="l-table-edit-td" width="80">填报部门:</td>
<td align="left" class="l-table-edit-td"><input name="fillinDept" type="text" id="fillinDept" ltype="text" /></td>
<td align="left"></td>
<td align="right" class="l-table-edit-td" width="80">填报人:</td>
<td align="left" class="l-table-edit-td"><input name="fillinPerson" type="text" id="fillinPerson" ltype="text" /></td>
<td align="left"></td>
</tr>
<tr>
<td align="right" class="l-table-edit-td">任务期次:</td>
<td align="left" class="l-table-edit-td">
<input name="taskTerm" type="text" id="taskTerm" ltype="date" />
</td><td align="left"></td>
<td align="center" class="l-table-edit-td" width="80">至:</td>
<td align="left" class="l-table-edit-td">
<input name="taskTerm2" type="text" id="taskTerm2" ltype="date" />
</td><td align="left"></td>
</tr>
</table>
<font color="red">(提示：2013年第一季度则期次为201301)</font>
<div align="center">
<input type="button" value="查询" id="tqSearch" class="l-button " />
<input type="reset" value="重置" class="l-button" onclick="reset();" />
</div>
</div>
<div id="grid1" style="margin-top: 20px; padding: 0; float: left;"></div>
<div style="display: none;"></div>
</body>
</html>
扫一扫
1865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
