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. $.cookie is not a function的错误原因

    网上说的原因是:“手残导入2次jquery库文件 ” 是的,就是这个原因.引入了两次jquery.js

  2. react添加方法的两种形式

    1.使用bind <button onClick={this.test.bind(this)}>确定</button> 2.使用箭头函数 <button onClick= ...

  3. Win7 VS2015环境使用SDL2-2.0.4

    之前在VS中使用SDL2,如果只链接SDL2.lib,会提示 error LNK2019: unresolved external symbol _main referenced in functio ...

  4. top k问题

    1.top k问题 在海量数据处理中,经常会遇到的一类问题:在海量数据中找出出现频率最高的前k个数,或者从海量数据中找出最大的前k个数,这类问题通常被称为top K问题.例如,在搜索引擎中,统计搜索最 ...

  5. java se的那些细节

    局部变量:方法体内或语句块内,不能有修饰符 成员变量:与类的对象共存,可以有修饰符 类属性:与类共存,可以有修饰符 一.局部变量:必须先赋值,才能使用,如果不赋初值,则会报错,即没有默认的始使值,而基 ...

  6. shell实现linux回收站的功能

    shell实现linux回收站的功能 下载: https://gitee.com/LoongWang/shellrecycling/repository/archive/master.zip 代码: ...

  7. hdu 5050 大数

    http://acm.hdu.edu.cn/showproblem.php?pid=5050 大数模板最大公约数 信kuangbin,能AC #include <cstdio> #incl ...

  8. D3_book 11.2 stack

    <!-- book :interactive data visualization for the web 11.2 stack 一个堆叠图的例子 --> <!DOCTYPE htm ...

  9. SRM465

    250pt: 给定50个整数点,范围-500-500之间.然后在这些点上选2个点作为中心,画边长为整数的正方形,并且正方形不能重叠(可以不平行),而且而且边长不同为不同方案.求有多少种方案.. 思路: ...

  10. springMVC一个Controller处理所有用户请求的并发问题

    有状态和无状态的对象基本概念: 有状态对象(Stateful Bean),就是有实例变量的对象 ,可以保存数据,是非线程安全的.一般是prototype scope. 无状态对象(Stateless ...