easyui datebox控件,只显示年月,不显示年月日

需要的效果图如下:

具体的js代码:

<script>
$(function(){
intiMonthBox('costTime');
}); var intiMonthBox = function(id){
var db = $('#'+id);
db.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); //月份,这里不需要+1
db.datebox('hidePanel')//隐藏日期对象
.datebox('setValue', year + '-' + month); //设置日期的值
});
}, 0);
yearIpt.unbind();//解绑年份输入框中任何事件
},
parser: function (s) {
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 = db.datebox('panel'), //日期选择对象
tds = false, //日期选择对象中月份
yearIpt = p.find('input.calendar-menu-year'),//年份输入框
span = p.find('span.calendar-text'); //显示月份层的触发控件
} </script>

html页面

<div>
<label>显示年月:</label>
<input id="costTime" type="text" class="easyui-datebox"/>
</div>

需引入文件:

<link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.4.3/themes/metro/easyui.css">
<script type="text/javascript" src="../js/jquery-easyui-1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

其中遇到问题:

1)汉化和格式

需引入文件,easyui-lang-zh_CN.js,放在easyui.min.js后面

<script type="text/javascript" src="../js/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

2)显示乱码问题

这是编码问题导致的,将原先的gb2312编码改成utf-8

最终的显示结果

3)格式化显示问题

当选择的月份小于10时,没有添加“0”

修改格式化日期formatter方法,如下

  formatter: function (d) {
//解决月份小于10时,未加'0'问题
var yearstr = d.getFullYear();
var month = d.getMonth() + 1;
var monthstr = month<10? "0"+ month : month;
return yearstr+ '-'+ monthstr;
// return d.getFullYear() + '-' + (d.getMonth() + 1);
}

最终结果

参考网址:

http://www.cnblogs.com/hmYao/p/5779463.html

easyui datebox时间控件如何只显示年月的更多相关文章

  1. jquery easyui datebox 时间控件默认显示当前日期的实现方法

    jquery easyui datebox 时间控件默认显示当前日期的实现方法 直接class easyui-datebox后添加一个value="true"就可以

  2. mniui里面没有只显示年的控件,monthpicker显示年月,datepicker显示具体到天的日期

    spinner无法出现下拉框,只能一下下的点击. combobox可以出现下拉框,但是一般情况是从url后台取值. 现在可以自己在js里定义需要的值. <td><input id=& ...

  3. EasyUI的时间控件禁止输入

    <td class="right">制单日期:</td>  <td class="left"> <input name ...

  4. zui框架配置日期控件只显示年月

    zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jqu ...

  5. 给easyui datebox时间框控件扩展一个清空的实例

    给easyui datebox扩展一个清空的实例 步骤一:拓展插件 /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; ( ...

  6. 自定义EasyUI的datetimebox控件日期时间的显示格式(转)

    工作中遇到的问题,在此记录一下. 需求:前台页面使用了EasyUI框架,在某一个html页面中要求datetimebox显示格式为年月日和小时,如图所示: 尝试过两种方法,分别如下: 第一种方法: d ...

  7. easyui datebox 扩展 只显示年月

    http://blog.csdn.net/zhaobao110/article/details/47755445 一个日期控件只显示年月是很正常的事情.可是easyui datebox 不支持这种格式 ...

  8. 疑似easyui本身bug:easyui时间控件问题,试了几个版本都不行

    最近发现easyui时间控件的值格式不支持带斜杠的日期(2016/10/31),必须是2016-10-31这类的才能正常使用,否则默认初始化为当前时间 <input id="Retur ...

  9. C# 时间控件 竖直进度条 饼图显示 仪表盘 按钮基础控件库

    Prepare 本文将使用一个NuGet公开的组件来实现一些特殊的控件显示,方便大家进行快速的开发系统. 在Visual Studio 中的NuGet管理器中可以下载安装,也可以直接在NuGet控制台 ...

随机推荐

  1. 关于容器类型数据的强转一共:str() list() set() tuple() dict() 都可以转换成对应的数据类型 /Number 数据类型的强转一共: int() bool() flaot() complex() 都可以转换成对应的数据类型

    # ###强制转换成字典类型 # 多级容器数据:该类型是容器数据,并且里面的元素还是容器类型数据 # ###二级容器 # 二级列表 listvar = [1,3,4,5,[6,7,8,9]] res ...

  2. python frist lesson

    1.print("") 代表打印字符段 2.name2 = name ,然后改变name的赋值,name2的值还是以前name的值,说明name2指向的是内存中name的赋值. 3 ...

  3. vue-amap | 基于 Vue 2.x 与高德的地图组件

    vue-amap | 基于 Vue 2.x 与高德的地图组件 参考:https://elemefe.github.io/vue-amap/#/

  4. Vue引入elementUI组件全过程

    参考:https://www.cnblogs.com/fubinbin/p/9938528.html 在vue脚手架安装完成之后,页面正常跳出vue刚安装完的界面 我们开始引入elementui 1. ...

  5. 如何在java List中进行模糊查询

    比如我有下面这样一个List,里面存放的是多个Employee对象.然后我想对这个List进行按照Employee对象的名字进行模糊查询.有什么好的解决方案么? 比如我输入的查询条件为“wang”,那 ...

  6. python-17

    # 列表生成式 a = [x*2 for x in range(10)] # 这两个变量必须一致 print(a) #列表 元组的高级赋值办法 b,c = [",6] # python的垃圾 ...

  7. nginx根据CPU配置多线程运行

    转自:Nginx使用教程(二):Nginx配置性能优化之worker配置 配置Nginx workers <br\>NGINX根据指定的配置运行固定数量的工作进程. 这些工作进程负责处理所 ...

  8. Linux 安装 java

    由于各Linux开发厂商的不同,因此不同开发厂商的Linux版本操作细节也不一样,今天就来说一下CentOS下JDK的安装: 方法一:手动解压JDK的压缩包,然后设置环境变量 1.在/usr/目录下创 ...

  9. Why Choose MB SD C5 with Engineer Software

    MB SD C5 with engineer software performed good and now is released. Unlike the old clone C5 which us ...

  10. function(){}、var fun=function(){}和function fun(){}的区别

    一.基本定义 1.函数声明:使用function声明函数,并指定函数名. function fun() { // ...... } 2.函数表达式:使用function声明函数,但未指定函数名,将匿名 ...