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()+');"

效果图:

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

使用范例如下:

<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>