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. RabbitMQ c#版实现（转）

    出处:https://www.cnblogs.com/hanfan/p/9842301.html 网上很多人已经总结的很好了,比如今天看到的这个.https://www.cnblogs.com/Lip ...

  2. 定时调度系列之Quartz.Net详解（转）

    出处:https://www.cnblogs.com/yaopengfei/p/9216229.html 一. 背景 我们在日常开发中,可能你会遇到这样的需求:"每个月的3号给用户发信息,提 ...

  3. Win7命令行编译cuda及设置Windows显卡响应时间

    在开始菜单中找到Visual Studio 2013 >> Visual Studio Tools 选择86或64版本的VC命令提示符环境,我用的 VS2013 x86 Native To ...

  4. java常用设计模式十二：命令模式

    一.概述 定义:命令(Command)模式又叫作动作(Action)模式或事务(Transaction)模式,是一种对象的行为模式.将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对 ...

  5. word粘贴图片+的editor

    公司做的项目需要用到文本上传功能. Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本 ...

  6. 模块import,from ..import...

    首次导入模块发生3件事 1.创建一个模块的名称空间 2.执行文件spam.py,将执行过程中产生的名字都放到模块的名称空间中 3.在当前执行文件中直接拿到一个名字,该名字就是执行模块中相对应的名字 f ...

  7. （贪心）School Marks -- codefor -- 540B

    http://codeforces.com/problemset/problem/540/B School Marks Little Vova studies programming in an el ...

  8. java基础-day29

    第06天 MySQL数据库 今日内容介绍 u MySQL单表查询 u SQL约束 u 多表操作 第1章   MySQL单表查询 1.1  SQL单表查询--排序 1.1.1 排序格式 通过order ...

  9. Windows 95 输入法编辑器

    Windows 95 输入法编辑器 翻译:戴石麟译自微软的MSDN DDK 关于Windows 95的多语言IME(输入法编辑器) 在Windows 95中,IME以动态连接库(DLL)的形式提供,与 ...

  10. day05_雷神_函数进阶

    #day05 1.迭代器 1.1可迭代对象 str,list,tuple,dict,set,range,文件句柄 等都是可迭代对象 第一种方法:在该对象中,含有__iter__方法的就是可迭代对象,遵 ...