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

来源：互联网发布：淘宝客服需要注意什么编辑：程序博客网时间：2024/05/17 02:32

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

阅读全文

1 0