因为easyui自带的控件默认显示的是年月日,所以想要只要年和月,需要重新初始化。
效果:
html代码:
<%@ page contentType="text/html;charset=UTF-8" %>
<title>easyui年月选择控件</title>
<meta name="decorator" content="default"/>
**<!--需要引入的文件-->**
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script src="../../easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
//js代码初始化
$(function() {
$('#dateInfo').datebox({
onShowPanel : function() {// 显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层
span.trigger('click'); // 触发click事件弹出月份层
if (!tds)
setTimeout(function() {// 延时触发获取月份对象,因为上面的事件触发和对象生成有时间间隔
tds = p.find('div.calendar-menu-month-inner td');
tds.click(function(e) {
e.stopPropagation(); // 禁止冒泡执行easyui给月份绑定的事件
var year = /\d{4}/.exec(span.html())[0]// 得到年份
, month = parseInt($(this).attr('abbr'), 10) ; // 月份
$('#dateInfo').datebox('hidePanel')// 隐藏日期对象
.datebox('setValue', year + '-' + month); // 设置日期的值
}, 0);
parser : function(s) {// 配置parser,返回选择的日期
if (!s)
return new Date();
var arr = s.split('-');
return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);
formatter: function (d) {
return d.getFullYear() + '-' + (d.getMonth() + 1);
var p = $('#dateInfo').datebox('panel'), // 日期选择对象
tds = false, // 日期选择对象中月份
span = p.find('span.calendar-text'); // 显示月份层的触发控件
</script>
</head>
<body class="">
<!--日期选择框-->
<input id="dateInfo" editable="false" />
</body>
</html>
需要引入的文件大家都可以去easyui的官网下载:
http://www.jeasyui.net/download/jquery.html
点击网址下拉:
下载完成后是一个压缩包,打开选择你需要的文件:
《1》jquery-easyui-1.7.0.zip\themes\default\images :里面是需要用到的两个图片:
《2》jquery-easyui-1.7.0.zip\themes\default 文件路径easyui.css
《3》jquery-easyui-1.7.0.zip 文件路径:jquery.easyui.min.js
《4》jquery-easyui-1.7.0.zip 文件路径:locale easyui-lang-zh_CN.js
function dateboxFormat(dateId){
$(dateId).datebox({
//显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层
onShowPanel: function () {
//触发clic...
一个日期控件只显示年月是很正常的事情。可是easyui datebox 不支持这种格式的,要么就是截取字符串,不可取,自己没有写过类似的扩展,但是也算是实现功能了,先来张图吧
本人水平有限写不出高深的东西,代码大家都能看懂,但是还是贡献出来,让大家提提意见共同进步吧
<meta charset="UTF-8">
<title>更改easyui日期控件,使其只显示到年月</title>
<!-- 引入jquery脚本文件,jquery必须在easyui之前引入,因为easyui是jquery的插件 -->
转载https://www.cnblogs.com/NieXiaoHui/p/5054075.html真的是有用
选择的过程中要选择 年月日 在显示在框里面的时候会显示年月
//页面加载时进行
$(function(){
var currTime=new Date();
var strDate=currTime.getFullYear()+"-"+(currTime.getMonth()+1)+"-01";
//dateid ..
只显示年月的方法:此方法允许用户输入的话会弹出到日,但是选择的值还是正确的月份值,最好使用editable="false"属性将用户输入禁用直接弹出选择框
$(function () {
$('#id').datebox({
//显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层
onShowPanel: fu...
EasyUI datebox控件默认只显示年月选择
EasyUI 的时间控件datebox一般默认为显示日期选择,有的时候业务需求只显示年份与月份,原生的datebox控件js并没有提供这样的选项,这时候就需要写js去实现,废话不多说,上实例:
1.下载easyui包
首先需要下载easyui包,这个直接从官网上下载就行了:http://www.jeasyui.net/download/jquer...
var p = $('#monthly').datebox('panel'), tds = false,
yearIpt = p.find('input.calender-menu-year'),
span = p.find('span.calendar-text');
$('#monthly').datebox(
editable : false,
onShowPa...
记录一下,最近的做的一个功能,需要在easyUI的日期框datebox 中,只显示年月格式,同时,还需要切换到年月日的格式
第一步:如何显示年月日,默认当前一天
如下代码是:报表日期及时间选择框
报表日期:
<span id="reportdate_box">
<input type="text" id="start_time" name="start_tim...