javascript - jQuery/JavaScript 脚本不适用于 IE7

标签 javascript jquery internet-explorer datepicker

我在 Internet EXPLODER 7.0 上遇到 jquery/javascript 问题。在现代浏览器(包括 IE 8 和 9)上一切正常。 IE 7 不隐藏元素，不显示日期选择器 - 总体而言，该脚本不像在其他“正常”浏览器上那样工作。

这是我的jsfiddle:http://jsfiddle.net/W7NHK/

如果有任何帮助，我将不胜感激!

这是我的 html:

<fieldset>


<div class="type-text">

  <label for="date_from">Date1:</label>
  <input type="text" size="20" id="date_from" name="rent-a-car[date_from]" value="" readonly="readonly" />
</div>


<div class="type-select">

    <label for="time_from_hour">Hour1: </label>
    <select id="time_from_hour" name="rent-a-car[time_from_hour]" class="select">
        <option value="">---</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
    </select>
    <span> : </span>

    <label for="time_from_minute" style="display: none;">minute1: </label>
    <select id="time_from_minute" name="rent-a-car[time_from_minute]" class="select">
        <option value="">---</option>
        <option value="00">00</option>
        <option value="15">15</option>
        <option value="30">30</option>
        <option value="45">45</option>
    </select>

</div>

<div class="type-select">

    <label for="get_car">City1:</label>
    <select id="get_car" name="rent-a-car[get_car]" class="select">
        <option value="">---</option>
        <option value="Katowice">Katowice</option>
        <option value="Kraków">Kraków</option>
        <option value="Warszawa">Warszawa</option>
        <option value="Wrocław">Wrocław</option>
        <option value="Gdańsk">Gdańsk</option>
    </select>

</div>


<div class="type-select">

    <label for="get_city_district" style="display: none;">District </label>
  <select id="get_city_district" name="rent-a-car[get_city_district]" class="select">
        <option id="e1a" value="direction1">direction1</option>
        <option id="e1b" value="direction2">direction2</option>
        <option id="e2a" value="direction3">direction3</option>
        <option id="e2b" value="direction4">direction4</option>
        <option id="e3a" value="direction5">direction5</option>
        <option id="e3b" value="direction6">direction6</option>
        <option id="e4a" value="direction7">direction7</option>
        <option id="e4b" value="direction8">direction8</option>
        <option id="e5a" value="direction9">direction9</option>
        <option id="e5b" value="direction10">direction10</option>
        <option id="e6" value="direction11">direction11</option>
        <option id="e8" value="direction12">direction12</option>
  </select>

</div>

</fieldset>



<fieldset>


<div class="type-text">

  <label for="date_to">Date2:</label>
  <input type="text" size="20" id="date_to" name="rent-a-car[date_to]" value="" readonly="readonly" />
</div>


<div class="type-select">

    <label for="time_to_hour">Hour2: </label>
    <select id="time_to_hour" name="rent-a-car[time_to_hour]" class="select">
        <option value="">---</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
    </select>
    <span> : </span>

    <label for="time_to_minute" style="display: none;">minute: </label>
    <select id="time_to_minute" name="rent-a-car[time_to_minute]" class="select">
        <option value="">---</option>
        <option value="00">00</option>
        <option value="15">15</option>
        <option value="30">30</option>
        <option value="45">45</option>
    </select>

</div>


<div class="type-select">

    <label for="return_car">City2:</label>
    <select id="return_car" name="rent-a-car[return_car]" class="select">
        <option value="">---</option>
        <option value="Katowice">Katowice</option>
        <option value="Kraków">Kraków</option>
        <option value="Warszawa">Warszawa</option>
        <option value="Wrocław">Wrocław</option>
        <option value="Gdańsk">Gdańsk</option>
    </select>

</div>

    <div class="type-select">

    <label for="return_city_district" style="display: none;">Odstawienie samochodu: </label>
  <select id="return_city_district" name="rent-a-car[return_city_district]" class="select">
        <option id="d1a" value="direction1">direction1</option>
        <option id="d1b" value="direction2">direction2</option>
        <option id="d2a" value="direction3">direction3</option>
        <option id="d2b" value="direction4">direction4</option>
        <option id="d3a" value="direction5">direction5</option>
        <option id="d3b" value="direction6">direction6</option>
        <option id="d4a" value="direction7">direction7</option>
        <option id="d4b" value="direction8">direction8</option>
        <option id="d5a" value="direction9">direction9</option>
        <option id="d5b" value="direction10">direction10</option>
        <option id="d6" value="direction11">direction11</option>
        <option id="d7" value="direction12">direction12</option>
  </select>

</div>

</fieldset>



<fieldset>

  <div style="display:none;">

<div class="type-text">

  <label for="total_hour1"> </label>
  <input type="text" size="20" id="total_hour1" name="rent-a-car[total_hour1]" value="" readonly="readonly" />
</div>


<div class="type-text">

  <label for="total_hour2"> </label>
  <input type="text" size="20" id="total_hour2" name="rent-a-car[total_hour2]" value="" readonly="readonly" />
</div>

  </div>

<div class="type-text">

  <label for="finish_day">Total day: </label>
  <input type="text" size="20" id="finish_day" name="rent-a-car[finish_day]" value="" readonly="readonly" />
</div>

    <div id="three_day">Sample TXT</div>


</fieldset>

和我的js:

var today = new Date().getDay();
    var tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    tomorrow.setHours(0, 0, 0, 0);
var disabledDays = ['15/8/2012', '1/11/2012', '11/11/2012', '25/12/2012', '26/12/2012'];
function noWeekendsOrHolidays(date) {
     var noWeekends = $.datepicker.noWeekends(date);
     var holiday = $.inArray($.datepicker.formatDate('d/m/yy', date), disabledDays) > -1;
     var friSat = today >= 5 && date.getTime() == tomorrow.getTime();
     return [!friSat];
}

$(function () {

var disabledDays = ['15/8/2012', '01/11/2012', '11/11/2012', '25/12/2012', '26/12/2012'];

$.datepicker.setDefaults({
    dateFormat: 'dd/mm/yy', dayNamesMin: ['Nie', 'Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sob'],
    dayNames: ['Niedziela','Poniedzialek','Wtorek','Środa','Czwartek','Piątek','Sobota'],
    monthNamesShort: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],    
    changeMonth: true, changeYear: true, numberOfMonths: 1, constrainInput: true, firstDay: 1});

$('#date_from, #date_to').datepicker({
    beforeShowDay: noWeekendsOrHolidays,
    defaultDate: '+1d', minDate: '+1d',
    onSelect: function (dateText, inst) {        
        var dateMin = $('#date_from').datepicker('getDate');            
        var dateMax = $('#date_to').datepicker('getDate');            
        if (this.id == 'date_from') {            
            var rent_date_from = new Date(
                dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1);            
            var rent_date_to = new Date(
                dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 29);            
            $('#date_to').datepicker('option', {minDate: rent_date_from, maxDate: rent_date_to});        
        }        
        $('#day_of_week1').val($.datepicker.formatDate('DD', dateMin));        
        $('#day_of_week2').val($.datepicker.formatDate('DD', dateMax));

        // sprawdzenie czy dzien nalezy do swiat - odbior
        if( $.inArray($("#date_from").val(), disabledDays)>=0) {  
            var freeday_value = 'holiday';
            $('#weekend_day1').val(freeday_value);
        }else{
            $('#weekend_day1').val('');
        }
        // sprawdzenie czy dzien nalezy do swiat - zwrot
        if( $.inArray($("#date_to").val(), disabledDays)>=0) {  
            var freeday_value = 'holiday';
            $('#weekend_day2').val(freeday_value);
        }else{
            $('#weekend_day2').val('');
        }

        compute(); //Add compute    
    }
    });

    $.viewMap_get = { // pokazwywanie wartoci w zaleznosci od wybranego miasta
        '0': $([]),
        'Katowice': $('#e1a, #e1b, #e6, #e8'),
        'Kraków': $('#e2a, #e2b, #e6, #e8'),
        'Warszawa': $('#e3a, #e3b, #e6, #e8'),
        'Wrocław': $('#e4a, #e4b, #e6, #e8'),
        'Gdańsk': $('#e5a, #e5b, #e6, #e8')
    };

    $.each($.viewMap_get, function() { $(this).remove(); });
    $('#get_city_district').hide();

    $('#get_car').on('change', function() {
        // hide all
        $.each($.viewMap_get, function() { $(this).remove(); });
        $('#get_city_district').hide();
        // show current
        $('#get_city_district').append($.viewMap_get[$(this).val()]).show();

        var id = $.viewMap_get[$(this).val()].attr("id");   
        $('#'+id).attr('selected', 'selected');
    });

    $.viewMap_return = {
        '0' : $([]),
        'Katowice' : $('#d1a, #d1b, #d6, #d7'),
        'Kraków' : $('#d2a, #d2b, #d6, #d7'),
        'Warszawa' : $('#d3a, #d3b, #d6, #d7'),
        'Wrocław' : $('#d4a, #d4b, #d6, #d7'),
        'Gdańsk' : $('#d5a, #d5b, #d6, #d7')
    };

    $.each($.viewMap_return, function() { $(this).remove(); });
    $('#return_city_district').hide();

    $('#return_car').on('change', function() {

        $.each($.viewMap_return, function() { $(this).remove(); });
        $('#return_city_district').hide();
        // show current
        $.viewMap_return[$(this).val()].show();
        $('#return_city_district').append($.viewMap_return[$(this).val()]).show();

        var id = $.viewMap_return[$(this).val()].attr("id");
        $('#'+id).attr('selected', 'selected');
    });

    function compute() {
        var c = $('select#time_from_hour').val();
        var d = $('select#time_from_minute').val();
        var e = $('select#time_to_hour').val();
        var f = $('select#time_to_minute').val();
        var g = $('input#date_from').val();
        var h = $('input#date_to').val();
        date1= g.split("/");
        var timestamp = (new Date(date1[2],date1[1],date1[0],c,d).getTime()/1000) + 7200;
        $('#total_hour1').val(timestamp);

        date2= h.split("/");
        var timestamp = (new Date(date2[2],date2[1],date2[0],e,f).getTime()/1000) + 7200;
        $('#total_hour2').val(timestamp);

        var x = -$('input#total_hour1').val();
        var y = -$('input#total_hour2').val();
        var total_time = x - y;
        result = total_time / 86400;
        new_number = Math.ceil(result);

        if(isNaN(new_number)) {
          var new_number = 0;
        }
        $('#finish_day').val(new_number);

        if( parseInt($("#finish_day").val()) < 4 ) {
            $('#return_car').children('option[value=' + $('#get_car').val() + ']').prop('disabled', false).attr('selected', true).siblings().prop('disabled', true);

            if ($('#return_car').val()) $('#return_car').change();
        }
        else {
            $('#get_car > option, #return_car > option').prop('disabled', false);
            $('#three_day').hide(2000, function () {
                $(this).remove();
            });
        }

    }

    //$('#three_day').hide();

    // zaznaczanie tej samej godziny i minuty
    $('#time_from_hour').change(function () {
        $('#time_to_hour').val($(this).val());
    });

    $('#time_from_minute').change(function () {
        $('#time_to_minute').val($(this).val());
    });

    // linijki konieczne do wykonania funkji compute

    $('select#time_from_hour').change(compute);
    $('select#time_from_minute').change(compute);
    $('select#time_to_hour').change(compute);
    $('select#time_to_minute').change(compute);
    //$('select#return_car').change();
    $('select#get_car').change(compute);
    $('input#finish_day').change(compute);

    $("#birthday").datepicker({
        yearRange: '1950:2010',
    });

    // konkiguracja wywietlania bledu
    $(".error").mouseover(function () {
        $(this).hide(2000, function () {
            $(this).remove();
        });
    });


});

最佳答案

这里有一个语法错误:yearRange: '1950:2010',

问题出在尾随逗号。

请参阅此处的说明:Are trailing commas in arrays and objects part of the spec?

附注评论请使用英文

关于javascript - jQuery/JavaScript 脚本不适用于 IE7，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13025436/

上一篇：javascript - Datejs 获取一周中的一串天

下一篇：php - HTML 5 和 Javascript 拖放

相关文章：

html - 可滚动的div里面的内容，导致在IE中出现页面滚动条

html - IE Document Mode在不同的服务器上有不同的默认值

Angularjs vs IE 8 vs IE 11

javascript - D3JS V4 根据值停止追加 tspan

javascript - 如何检查/迭代 Node 中的对象？

javascript - 对抗移动设备上的触摸事件，劫持正常滚动

jquery - JS/jQ 处理大量 setTimeouts 的更有效方法

javascript - 附加 JQuery 的代码不会触发输入文件上的单击事件

jquery - 使用媒体查询和 JQuery 显示不同的菜单

javascript - 在另一个 ajax 成功中调用 jquery ajax 的问题

©2024 IT工具网  联系我们