JQuery日期选择器在IE 7上不起作用

JQuery Datepicker does not work on IE 7

本文关键字:不起作用 IE 日期 选择器 JQuery      更新时间:2023-09-26

我使用的是Jquery Datetimepicker。日期时间选取器的详细信息可以在以下位置找到:DateTimePicker详细信息

此日期选择器设置为在单击时显示,并链接到输入框。Asp代码如下所述:

<link type="text/css" href="css/jquery.datetimepicker.css" rel="stylesheet" />  
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> 
    <script src="js/jquery.datetimepicker.js" type="text/javascript"></script>  
     <script type="text/javascript">
   
            $(document).ready(function () {
                
                /*DatePicker initializations*/
                var DATEPICKER_FORMAT = 'm/d/Y';
                var DATETIMEPICKER_FORMAT = 'm-d-Y H:i:s';
                var TIMEPICKER_FORMAT = 'g:ia';
                $(function () {
                    $(".datepickerwithicon").datetimepicker({
                        format: DATEPICKER_FORMAT,
                        datepicker: true,
                        timepicker: false,
                        step: 1,
                        allowBlank: true,
                        closeOnDateSelect: true,
                        validateOnBlur: false
                    });
                    $(".datetimepickerwithicon").datetimepicker({
                        format: DATETIMEPICKER_FORMAT,
                        datepicker: true,
                        timepicker: true,
                        step: 5,
                        allowBlank: true,
                        closeOnDateSelect: true,
                        validateOnBlur: false
                    });
                    /* Append calendar icon image. */
                    $('.datepickerwithicon, .datetimepickerwithicon').each(function () {
                        var dateInput = $(this);
                        var newImgId = dateInput.attr('id') + '_icon';
                        $("<img/>", {
                            "src": "Images/calendar-icon.png",
                            "class": "ui-datepicker-trigger",
                            "id": newImgId
                        }).insertAfter(dateInput);
                        $('#' + newImgId).on('click', function () {
                            dateInput.datetimepicker('show');
                        });
                        dateInput.click(function (event) {
                            $('.xdsoft_datepicker.active .xdsoft_calendar').focus();
                        });
                    });
                  
                });
            });
        </script>
   
</head>
<body>
    <form id="form1" runat="server">
        <table>
            <tr>
                <td>
                    <asp:Label ID="lbStart" runat="server" Text="Start :" ForeColor="Black"></asp:Label>&nbsp;
        <input type="text" id="StartDate" name="StartDate" runat="server" class="datetimepickerwithicon" />&nbsp;
                    </td>
                <td>`
                    <asp:Label ID="lbEnd" runat="server" Text="End :" ForeColor="Black"></asp:Label>&nbsp;
        <input type="text" id="EndDate" name="EndDate" runat="server" class="datetimepickerwithicon"/>&nbsp;
                    </td>
                </tr>
            </table>
    </form>
</body>

问题:日期时间选择器不会出现在IE 7上的单击事件中。然而,它在所有其他版本的IE、Chrome和Firefox上都能很好地工作。

关于如何在IE 7上运行有什么想法吗?

很抱歉回复延迟,但我在这里尝试了同样的操作,唯一更改的是CSS和JS文件的路径。它对我来说很好。你能给我提供你在IE中收到的错误消息吗?我可以解决这个问题,并很快为您提供解决方案。:)

更新2:嗨,这是我用来测试的代码。我已经从你在问题中提供的源代码下载了插件,并将其作为HTML文件运行。你能做同样的事情,并告诉我它在你的浏览器中是否有效吗?如果我在这件事上占用了你很多时间,真的很抱歉。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="css/jquery.datetimepicker.css" rel="stylesheet" />  
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> 
    <script src="js/jquery.datetimepicker.js" type="text/javascript"></script>  
     <script type="text/javascript">
            $(document).ready(function () {
                /*DatePicker initializations*/
                var DATEPICKER_FORMAT = 'm/d/Y';
                var DATETIMEPICKER_FORMAT = 'm-d-Y H:i:s';
                var TIMEPICKER_FORMAT = 'g:ia';
                $(function () {
                    $(".datepickerwithicon").datetimepicker({
                        format: DATEPICKER_FORMAT,
                        datepicker: true,
                        timepicker: false,
                        step: 1,
                        allowBlank: true,
                        closeOnDateSelect: true,
                        validateOnBlur: false
                    });
                    $(".datetimepickerwithicon").datetimepicker({
                        format: DATETIMEPICKER_FORMAT,
                        datepicker: true,
                        timepicker: true,
                        step: 5,
                        allowBlank: true,
                        closeOnDateSelect: true,
                        validateOnBlur: false
                    });
                    /* Append calendar icon image. */
                    $('.datepickerwithicon, .datetimepickerwithicon').each(function () {
                        var dateInput = $(this);
                        var newImgId = dateInput.attr('id') + '_icon';
                        $("<img/>", {
                            "src": "Images/calendar-icon.png",
                            "class": "ui-datepicker-trigger",
                            "id": newImgId
                        }).insertAfter(dateInput);
                        $('#' + newImgId).on('click', function () {
                            dateInput.datetimepicker('show');
                        });
                        dateInput.click(function (event) {
                            $('.xdsoft_datepicker.active .xdsoft_calendar').focus();
                        });
                    });

                });
            });
        </script>
</head>
<body>
    <form id="form1" runat="server">
        <table>
            <tr>
                <td>
                    <asp:Label ID="lbStart" runat="server" Text="Start :" ForeColor="Black"></asp:Label>&nbsp;
        <input type="text" id="StartDate" name="StartDate" runat="server" class="datetimepickerwithicon" />&nbsp;
                    </td>
                <td>`
                    <asp:Label ID="lbEnd" runat="server" Text="End :" ForeColor="Black"></asp:Label>&nbsp;
        <input type="text" id="EndDate" name="EndDate" runat="server" class="datetimepickerwithicon"/>&nbsp;
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

问题似乎与环境有关,并且无法使用环境中可用的浏览器实例。该问题在修补程序更新后得到解决,此后可以看到日期时间选择器。