在我实现项目页面开发时,仅仅是为了实现时间控件年份效果显示,本来第二种实现方式是以前捣腾出来的,可是却在另外一个项目下没能复用,也许是不同包,引用的相关工具类有差异,于是,摸索出来了第二种实现方式。希望对大家的DateBox开发有帮助!
jQuery EasyUI中的日期控件DateBox很好用的,首先需要引入jquery文件
第一种实现方式:
1、ftl代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title>Basic DateBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<div id="dateBoxDiv">
<ul>
<li>
<span class="tit">协议年份:</span>
<input style="width:90px" id="chooseYear" name="agreementInfo.year" editable="false"/>
</li>
</ul>
</div>
</body>
</html>
2、JavaScript代码如下(注意代码使用的确切位置,而不是一味ctrl+c):
var date = new Date();
var nowDay = date.getDate();//当前日
var nowMonth = date.getMonth();//当前月
var nowYear = date.getFullYear();//当前年
$("#chooseYear").datebox({
currentText : '今天',
closeText : '关闭',
disabled : false,
required : true,
formatter : formatDateMonth,
value:new Date(nowDay,nowMonth,nowYear).format('yyyy-MM'),
onSelect : function(date){
var val = new Date(date.getTime()).format('yyyy-MM-dd');
$("#chooseYear").datebox('setValue',val);
}
});
$(".datebox :text").attr("readonly", "readonly");// 设置日期控件为只读//格式化
function formatDateMonth(v) {
if (v instanceof Date) {
return new Date(v.getTime()).format('yyyy');
}
}
3、年份显示效果如下:
第二种实现方式:
1、ftl代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title>Basic DateBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dateBoxTable">
<tr><td align="right">缴费年度:</td>
<td align="left">
<input style="width:140px" id="payAnnual" name="platFormInvoiceApplyDto.payAnnual" editable="false"/>
</td></tr>
</body>
</html>
2、JavaScript代码如下(注意代码使用的确切位置,而不是一味ctrl+c):
var currentDate = new Date();
var currentYear = currentDate.getFullYear();
var currentMonth = currentDate.getMonth();
var currentDay = currentDate.getDate();
// 时间选择
$("#payAnnual").datebox({
currentText : '今天',
closeText : '关闭',
disabled : false,
required : true,
isEdited:true,
value:new Date(currentYear,currentMonth,currentDay).format('yyyy'),
formatter : formatDate,
parser:parseDate
});
// 设置日期控件为只读
$(".datebox :text").attr("readonly", "readonly");
function formatDate(v) {
var y = v.getFullYear();
return y;
}
function parseDate(dateStr){
return new Date();
}
3、年份显示如下: