jQuery EasyUI中的日期控件DateBox（年份）样式

最新推荐文章于 2024-05-11 09:56:24 发布

jk_meng

最新推荐文章于 2024-05-11 09:56:24 发布

阅读量4.6k

点赞数 1

分类专栏： jQuery EasyUI 文章标签： jquery easyui 控件

本文链接：https://blog.csdn.net/u012984390/article/details/72303506

版权

jQuery EasyUI 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

在我实现项目页面开发时，仅仅是为了实现时间控件年份效果显示，本来第二种实现方式是以前捣腾出来的，可是却在另外一个项目下没能复用，也许是不同包，引用的相关工具类有差异，于是，摸索出来了第二种实现方式。希望对大家的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();  
	}