[轉]jQuery UI Datepicker IE8 使用的基本解决方法

jQuery UI Datepicker IE8 使用的基本解决方法
版本：jquery-ui-1.8.6.min.js
解决：IE8无法响应其中jquery.ui.datepicker部分标签a(无href)的onclick事件，和td由于放入标签a href="#"，无法响应自身onclick事件，只验证了icon-trigger模式
方法：
509行解决选择日期总小一月:f.selectedDay=f.currentDay=d("a",e).html();
改为:if(e==e.toString()){f.selectedDay=f.currentDay=e;}else{f.selectedDay=f.currentDay=$('a',e).html();};

525行解决上一月无效:'<a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_'
改为:'<a class="ui-datepicker-prev ui-corner-all" href="javascript:DP_jQuery_'

526行解决下一月无效:'<a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_'
改为:'<a class="ui-datepicker-next ui-corner-all" href="javascript:DP_jQuery_'

532行去掉td响应click事件:+(J?"":' onclick="DP_jQuery_'+y+".datepicker._selectDay('#"+a.id+"',"+q.getMonth()+","+q.getFullYear()+', this);return false;"')
直接删除

533行给标签a加入href:(B?" ui-priority-secondary":"")+'" href="#">'+q.getDate()+"</a>")
把href="#"改为:href="javascript:DP_jQuery_'+y+'.datepicker._selectDay(\'#'+a.id+'\','+q.getMonth()+','+q.getFullYear()+','+q.getDate()+');"

效果图：

 ‍

使用范例如下：
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/jquery-ui-redmond-1.8.6.css" />
    <script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui-1.8.6.min.js" type="text/javascript"></script>
    <style>
        .ui-datepicker .ui-datepicker-title select
        {
            font-size: 1em;
            margin: 1px 0;
        }
        .ui-datepicker select.ui-datepicker-month-year
        {
            width: 100%;
        }
        .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year
        {
            width: 40%;
        }
        .ui-datepicker .ui-datepicker-title select.ui-datepicker-year
        {
            float: left;
        }
        .ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div
        {
            font-size: 0.7em;
        }
    </style>
    <script>
        $(function () {
            $.datepicker.regional['zh-CN'] = {
                closeText: '关闭',
                prevText: '&#x3c;上月',
                nextText: '下月&#x3e;',
                currentText: '今天',
                monthNames: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
                monthNamesShort: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
                dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
                dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
                dateFormat: 'yy-mm-dd', firstDay: 1,
                isRTL: false
            };
            $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
            $("#datepicker").datepicker({
                showOn: "button",
                buttonImage: "images/calendar.gif",
                buttonImageOnly: true
            });
            //$('#datepicker').datepicker('option', { dateFormat: "yy-mm-dd" });
        });
 </script>
</head>
<body>
    <input type="text" id="datepicker">
</body>
</html>

posted @ 2011-12-08 09:25  Athrun  阅读(1109)  评论(0)  编辑  收藏  举报