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. Java翻转数组的方法

    java的api没用翻转数组的工具类,只能自己写了. int [] testIntArr = {1,2,3}; //翻转数组 for (int i = 0; i < testIntArr.len ...

  2. 关于矩阵A*b=A*c 中b是否等于c

    注意如果A各列线性无关那么b=c,反之b!=c, 针对最小二乘中的   p=A * roof_x        A' ( b-p)=0  =>   A'b =A' p 如果  两边同乘以A  , ...

  3. VMware14 安装CentOS7及其配置;CentOS7配置网桥,做远程连接;

    1.VMware14安装        进入百度链接,按照图形安装就好了.https://jingyan.baidu.com/article/9f7e7ec09da5906f281554d6.html ...

  4. HDU 1404 Digital Deletions (暴力博弈)

    题意:给定一个数字串,最长是6,然后有两种操作. 第一种是,把该串中的一个数字换成一个比该数字小的数,比如 5 可以换成 0,1,2,3,4.   e.g. 12345 --> 12341 第二 ...

  5. java术语（PO/POJO/VO/BO/DAO/DTO）

    PO(persistant object) 持久对象在o/r 映射的时候出现的概念,如果没有o/r映射,就没有这个概念存在了.通常对应数据模型(数据库),本身还有部分业务逻辑的处理.可以看成是与数据库 ...

  6. embeded_2_separate_sync

    //如果是8位的话,只选择低8位传输 //因为同步码也是可以自己设置,所以把同步码设置成parameter最好 module embeded_2_separate_sync( input clk, : ...

  7. webService之helloword(java)

    webservice 远程数据交互技术 1.导入jar包(如果是 maven项目导入项目坐标) 2.创建服务 3.测试服务 我们使用maven来做测试服务 pom.xml文件 <project ...

  8. day35(servlet 3.0)

    servlet3.0的问题 Servlet3.0与Servlet2.5提供了三个新特性: * 注解开发   :方便 * 文件上传   :有些API不是特别全. * 异步请求   :多线程的实现 注解开 ...

  9. (spfa) Highway Project (zoj 3946 )

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5718   Highway Project Time Limit: 2 Seco ...

  10. Codeforces Round #540 (Div. 3)--1118D2 - Coffee and Coursework (Hard Version)

    https://codeforces.com/contest/1118/problem/D2 和easy version的主要区别是,数据增加了. easy version采用的是线性查找,效率低 在 ...