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. mongoDB的安装与连接

    1.安装mongoDB 官网下载安装: https://www.mongodb.com/download-center/community 安装时选择自定义设置,安装到C盘program Files文 ...

  2. C# Bitmap长宽参数构造的图片对象的每个像素ARGB都是0

    var img = new Bitmap(100 , 100); for (int i = 0; i < img.Width; i++) {   for (int j = 0; j < i ...

  3. 解决python代码中含有中文报错

    python中写入中文时报错如下图所示: 依照网上解决方法:在py文件中加入:#encoding=utf-8 然后继续报错如下图所示: 解决方法: 在py文件中加入: import sysreload ...

  4. shell常见命令

    awk awk是个很好用的东西,大量使用在linux系统分析的结果展示处理上.并且可以使用管道, input | awk ''  | output 1.首先要知道形式 awk 'command' fi ...

  5. 实习番外篇：解决C语言使用Makefile无法实现更好的持续集成问题

    工作中遇见的一个问题,提供项目源代码的情况下,希望对项目进行持续集成,达到一个C项目增量编译的效果.原本第一天是想通过模拟Makefile执行步骤来实现整个过程的,但是事实上发现整个Makefile显 ...

  6. php,合并数组,合并一维数组,合并二维数组,合并多维数组

    合并数组 例子1: <?php $msg = [ "code" => "0", "msg" => "" ...

  7. 如何悄悄地提升MySQL用户权限

    温馨提示: 一次成功的非法提权,需要的必备条件是:1.对mysql权限表的查.改权限: 2.一次不经意的数据库服务器重启: 此次测试版本:5.6.25 准备邪恶用户: grant update on ...

  8. 自己写一个chrome扩展程序 - 右键菜单扩展

    最近在学习Spring,心想dotnet如何实现类似形式呢.于是想认真学习Casetle组件,发现没有书籍!而spring的书多得很.于是只好找网上教程了.发现系统的文章不多.Terrylee好多文章 ...

  9. 笔记：CSS hack的学习与了解…

    更新时间:2015.05.12 兼容范围: IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome 参考资料: 各游览器常用兼容标记一览表: 标记  I ...

  10. 从晶体管到web浏览器

    几年前写了这个,想放到网上,招聘很困难,很多现代计算机科学教育真的很糟,很难找到懂得现代计算机堆栈的第一(基本)原理的人. 如果我曾经再次得到了12周的自由,我会提供这个作为课余学习的play,我也想 ...