EasyUI Calendar 日历插件,只显示年月。

从别人的博客园搬过来的,放在这里只是为了方便自己用。已经注明原文出处,尊重别人的劳动成果。

原文地址:http://www.cnblogs.com/hmYao/p/5779463.html

此日历插件依赖于easyui的js和css。

html:

<input id="db"  />

js:

初始化加载db标签

$(‘#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‘); //显示月份层的触发控件

原文地址:http://www.cnblogs.com/hmYao/p/5779463.html

时间: 2024-08-08 09:27:55

EasyUI Calendar 日历插件,只显示年月。的相关文章

easyui的datebox只显示年月

要求点击easyui的datebox时只显示年月,隐藏日,之前百度了好多,发现有的好麻烦,有的使用没效果,也许自己没理解,改不了.最后老员工帮我搞定了,添加一个fomatter和一个parser函数就行. 当然我学习到的一点就是调试,之前只会用类似alert和console.info进行调试,然而这两种方法对easyui中的这种方法不奏效,比我我想知道parser中的function中的参数date值到底是什么,用这两种方法是没用的,用console.log(date);就可以看到date的值,

easyui datebox 扩展 只显示年月

一个日期控件只显示年月是很正常的事情.可是easyui datebox 不支持这种格式的,要么就是截取字符串,不可取,自己没有写过类似的扩展,但是也算是实现功能了,先来张图吧 本人水平有限写不出高深的东西,代码大家都能看懂,但是还是贡献出来,让大家提提意见共同进步吧 $.extend($.fn.combobox.methods, { yearandmonth: function (jq) { return jq.each(function () { var obj = $(this).combo

easyui datebox 只显示年月

在网上看了好多的js源码 点击12月份都会变成2017-0 这样的 调试后发现了问题,在此发修改后的方法 //只显示年月 function convertDatebox(domId) { $("#" + domId).datebox({ onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层 span.trigger('click'); //触发click事件弹出月份层 if (!tds) setTimeout(func

Zabuto Calendar 日历插件使用指南

Zabuto Calendar 日历插件demo翻译 日历插件需要依赖于JQuery和Twitter的bootstrap来让函数正确的运行:在引入javascript和css样式表后就可以使用这个插件和库,然后通过定义一个DOM元素和初始化插件来观察日历插件: 案例1:<!-- include jQuery / Bootstrap -->...<!-- include the calendar js and css files --><script src="../

Android DataPickerDialog组建只显示年月或月日

最近几天再做一个App开发,开发时需要使用DatePickerDialog来只显示年月,在网上参考了不少的例子,有的自己琢磨不透,所幸看到了(这里请参考http://whb198900.blog.163.com/blog/static/766453542012108111920879)这位朋友的文章以及http://download.csdn.net/detail/u010372772/6027761这里边的代码,自己又进行了总结,总之,完成了自己的任务. 1 public class Seco

wpf 时间控件只显示年月

最近的项目,查询时只需要年和月,不需要日,因此需要对原有的DatePicker进行修改,查询了网上的内容,最终从一篇帖子里看到了添加附加属性的方法,地址是http://stackoverflow.com/questions/1798513/wpf-toolkit-datepicker-month-year-only 原文是用了两个类,其中一个是为了让DatePicker下的Calendar只显示年月,不显示日,另一个类是为了让DatePicker格式化为yyyy-MM格式,但是从文章中可以看出,

extjs 时间控件只显示年月

调用代码一: [javascript] view plain copy print ? var monthField = new Ext.ux.MonthField({ id:'month', fieldLabel: '月份', allowBlank:false, readOnly : true, format:'Y年m月', listeners:{"blur":function(){ alert() }} ); 调用代码二(部分): [javascript] view plain c

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

zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jquery-1.11.3.min.js"></script> <script src="~/res/zui-1.9.1-dist/dist/js/zui.min.js"></script> <script src="~/res

easyui datebox只显示年月隐藏日期的实现

工作中两次遇到需要实现只实现年月的时间控件效果,特地把网上查到的实现方法记录下来,以备再次需要时用到.上代码 var dateobj=function(obj){ var need_obj={ onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层 span.trigger('click'); //触发click事件弹出月份层 if (!tds) setTimeout(function () {//延时触发获取月份对象,因为上面的