更正easyui datebox年月面板年份输入框bug

  bug1)easyui datebox年月面板年份输入框更改值并且失去焦点后,第一行显示的年份并不会更改,并且此时点击第一行的年份切换切换或者年份输入框同一行的年份切换按钮,会被还原为第一行的年份值+/-1。

 

  bug2)easyui datebox点击年月面板第一行的月份切换按钮,如果换年后(往前或者往后都一样),年份输入框的年份值不会更改。如下图所示

更正easyui datebox年月面板年份输入框bug
准备换年
更正easyui datebox年月面板年份输入框bug
切换到2018年,但是年份输入框还是2017年

  解决这2个bug源代码如下,1.3.3及1.4.5的easyui版本测试通过,其他版本自己检查对应的选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>更正easyui datebox年月面板年份输入框bug</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<input id="db" />
<script>
    $(function () {
        var db = $('#db');
        db.datebox();
        var p = db.datebox('panel'), //日期选择对象
            yearIpt = p.find('input.calendar-menu-year'),//年份输入框
            yearDisplay = p.find('div.calendar-title span'),//第一行年份显示容器
            preNextMth = p.find('.calendar-prevmonth,.calendar-nextmonth');//年月面板第一行的上、下个月箭头按钮
       //年份输入框值改变,更改第一行年份
        yearIpt.change(function () {
            if (/^\d{4}$/.test(this.value)) {
                yearDisplay.html(yearDisplay.html().replace(/\d{4}$/, this.value));
                //同时更新datebox对应的calendar配置的year值,要不点击上下年的箭头按钮会还原为上一次的日期的年份,并不是当前input输入的年份
                db.datebox('calendar').calendar('options').year = parseInt(this.value);
            }
        });
        //修正第一行上一下月份箭头点击后,如果换年,年份输入框年份不变bug
        preNextMth.click(function () { yearIpt.val(yearDisplay.html().match(/\d{4}$/));});
    });
</script>
</body>
</html>

 

  



原创文章,转载请注明出处:更正easyui datebox年月面板年份输入框bug
评论(0)Web开发网
阅读(37)喜欢(0)不喜欢(0)easyui