easyui calendar日历头部格式修改

2017-6-3:更新,直接修改jquery.easyui.min.js源代码,用下面的代码如果点击页头弹出月份选择层,点击层上的按钮还是会显示默认的月年格式,还的给月份层对象添加click事件。太麻烦还不如直接修改源代码。

easyui calendar日历头部格式修改

记事本打开jquery.easyui.min.js,查找 find(".calendar-title span").html,这个就是设置calendar头部内容,将参数值改为下面。

注意:jquery.easyui.min.js的存储编码是ANSI的,加了中文后,如果你的html编码meta指定utf-8,jquery.easyui.min.js的script需要增加charset="gb2312",要不加了年份会出现乱码。或者记事本打开jquery.easyui.min.js,存储为utf-8编码也行。或者将年编码为16进制'\u5e74'

find(".calendar-title span").html(opts.months[opts.month-1]+" "+opts.year);
//===>//注意html参数里面的代码,可能不一样,不过经测试找了1.4.4,1.4.3,1.3.3这3个版本的jquery.easyui.min.js内容都是一样的。
find(".calendar-title span").html(opts.year+'\u5e74'+opts.months[opts.month-1]);

 

  easyui calendar日历头部格式如何修改,默认是月 年格式,如何修改为年月格式。

easyui calendar日历头部格式修改
easyui calendar日历头部默认月年格式
easyui calendar日历头部格式修改
修改后easyui calendar日历头部年月格式

  本示例居于jquery-easyui-1.4.4修改,其他版本自己浏览器审查dom元素结构修改对应的选择器,源代码如下,示例代码居于/jquery-easyui-1.4.4/demo/calendar/basic.html修改

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>easyui calendar日历头部格式修改</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script src="../../locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <div id="myCalendar"><div class="easyui-calendar" style="width:250px;height:250px;"></div></div>
    <script>
        $(function () {
            //return;//取消注释这句看效果,其他版本注意修改下面的选择器,如果不是通过dom初始化easyui,通过代码,下面的代码要在你初始化后执行
            $('.calendar-nav').click(function () {
                var span = $(this).parent().find('span.calendar-text')
                setTimeout(function () { span.html(span.text().split(' ').reverse().join('年')); }, 10)
            });
            $('span.calendar-text').each(function () { this.innerHTML = this.innerHTML.split(' ').reverse().join('年') });
        })
    </script>
</body>
</html>

 


原创文章,转载请注明出处:easyui calendar日历头部格式修改

评论(0)Web开发网
阅读(353)喜欢(0)easyui开发技巧