easyui datebox 只选择月份的方法

效果如下图：

代码如下：

<html >

<head>

    <meta charset="utf-8">

    <title>ECharts · Example</title>

    <link href="../easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />

    <link href="../easyui/themes/icon.css" rel="stylesheet" type="text/css" />

    <script src="../js/jquery.min.js" type="text/javascript"></script>

    <script src="../easyui/jquery.easyui.min.js" type="text/javascript"></script>

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

</head>

<body>

<input id="date1"/>

<input id="date2" style="display: none"/>

<button id="kk" style="width: 120px;height: 30px;">点击切换成月份</button>

<script>

    $(function () {

        dateboxDate('date1');

        $("#kk").on("click",function(){

            $('#date1').hide();

            $('#date1').next().hide();

            dateboxMonth('date2');

        });

    });

    function dateboxDate(id){

        var bb = $('#' + id);

        bb.datebox({

            value : '2017/04/23',

            editable : false

        });

    }

    dateboxMonth = 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);/*getMonth返回的是0开始的，忘记了。。已修正*/ }

        });

        var p = db.datebox('panel'), //日期选择对象

                tds = false, //日期选择对象中月份

                aToday = p.find('a.datebox-current'),

                yearIpt = p.find('input.calendar-menu-year'),//年份输入框

        //显示月份层的触发控件

                span = aToday.length ? p.find('div.calendar-title span') ://1.3.x版本

                        p.find('span.calendar-text'); //1.4.x版本

        p.find('div.calendar-header').hide();

        if (aToday.length) {//1.3.x版本，取消Today按钮的click事件，重新绑定新事件设置日期框为今天，防止弹出日期选择面板

            aToday.unbind('click').click(function () {

                var now=new Date();

                db.datebox('hidePanel').datebox('setValue', now.getFullYear() + '-' + (now.getMonth() + 1));

            });

        }

    }

</script>

</body>

</html>

easyui datebox 只选择月份的方法的更多相关文章

  1. easyui datebox 只选择年月

    //将日期输入框变为年月的函数方法    var month=0;      $('#effectiveDate').datebox({        onShowPanel: function () ...

  2. EasyUI Combotree只选择叶子节点

    EasyUI Combotree的方法拓展自Combo和Tree.而Tree有一个onBeforSelect事件来帮助我们实现只选择叶子节点的功能. Tree事件需要 'node' 参数,它包括下列属 ...

  3. easyui datebox 只显示日期，本文为转载，稍加改动

    var DateBoxHandler = {}; DateBoxHandler.onlyShowMonth = function(id) { function padding(v) {if (v &l ...

  4. bootstrap的datetimepicker只选择月份

    本文转载自:http://blog.csdn.net/feng1603/article/details/41869523 直接上代码: //选择年月日的 startView: 2, minView: ...

  5. bootstrap中datetimepicker只选择月份显示1899问题

    直接修改bootstrap-datetimepicker.js中 update: function () { var date, fromArgs = false; if (arguments &am ...

  6. easyUI日期框返回到月份，选择日期也只到月份

    easyUI日期框返回到月份,选择日期也只到月份,不是原创,引用了园友的一篇文章,自己写下来,以便不时之需,谢谢. 1 $(function () { $('#date').datebox({ onS ...

  7. easyui datebox时间控件如何只显示年月

    easyui datebox控件,只显示年月,不显示年月日 需要的效果图如下: 具体的js代码: <script> $(function(){ intiMonthBox('costTime ...

  8. jquery easyUI 日期格式化，DateBox只显示年

    jquery easyUI 日期格式化,DateBox只显示年 >>>>>>>>>>>>>>>>> ...

  9. easyui datebox定位到某一个日期， easyui datebox直接定位到具体的日期， easyui datebox MoveTo方法使用

    easyui datebox定位到某一个日期, easyui datebox直接定位到具体的日期, easyui datebox MoveTo方法使用 >>>>>> ...

随机推荐

  1. asp.net core跨平台开发从入门到实战文摘

    第1章 .NET Core 第2章 dotnet命令 第3章 VS Code安装及介绍 第4章 VS2015开发.NET Core 第5章 ASP.NET Core 第6章 EF Core 第7章 A ...

  2. Win7 VS2013环境编译Squirrel 3.0.7

    Squirrel是一个类似Lua,但是更面向对象的脚本语言. 国内这个介绍很少,环境配置更是没有任何文章提到,花了点时间搞定了,备忘记录下过程. 首先是下载,写本文时Squirrel最新版本为3.0. ...

  3. 安卓hid驱动触摸屏

    在kernel/drivers/hid/ 目录下三个文件中添加usbtouch的pid vid, 文件分别是hid-multitouch.c .hid-ids.h.hid-core.c 具体如何添加可 ...

  4. VMware Workstation “以独占方式锁定此配置文件失败。可能其它正在运行VMware进程在使用此配置文件”

    VMware Workstation客户机异常关闭之后,再启动时提示“以独占方式锁定此配置文件失败...”. 解决方法: 进入客户机的安装目录(注意,非VMware的安装目录),删除所有后缀为lck的 ...

  5. 基于脚本的nodemanager管理器

    Step 6: Configure Node Manager on the Managed Servers虚拟机环境: 管理服务器IP:192.168.227.10  AdminServer 受管服务 ...

  6. Java类、超类、包

    定义和实例化与C#相同   特殊变量     super当前对象的父类,用于调用父类的变量和方法     this当前类对象                存取限制有3个     没有C#的inter ...

  7. 关于MVC视图传参

    转自:http://q.cnblogs.com/q/48477/

  8. day32(表单校验js和jquery表单校验)

    校验用户名.密码.密码一直性. <style> .error { color: red } .success { color: green } </style> <scr ...

  9. Jmeter-连接 MySQL数据库

    一.下载mysql驱动包,mysql各个版本驱动包如下: http://central.maven.org/maven2/mysql/mysql-connector-java/ (上面链接的信息来源于 ...

  10. 基于canvas+ajax+zui.js的蓄电池监控系统

    今天抽空做的,仪表盘用canvas做的,数据采用ajax刷新,左边菜单用zui.js做的