JQuery UI datepicker和滑块冲突

时间:2014-12-08 14:18:09

标签: jquery-ui datepicker slider

我在同一页面上使用JQuery UI datepicker和JQuery UI滑块,但它只显示了datepicker:

<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/kickstart.css" media="all" /> <!-- KICKSTART -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<style type="text/css"></style>
<script src="js/main.js"></script>
<script src="js/ajax.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
    var startDay;
    var endDay;

    var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }

    $('.week-picker').datepicker( {
        dateFormat: 'yy-mm-dd',
        firstDay: 1,
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function(dateText, inst) { 
            var date = $(this).datepicker('getDate');
            startDay = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() +1);
            endDay = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
            var startDate = date.getFullYear() + "-" + (date.getMonth() + 1 < 10 ? '0' +  (date.getMonth() + 1) : (date.getMonth() +1)) + "-" + ((date.getDate() - date.getDay() +1) < 10 ? '0' +  (date.getDate() - date.getDay() +1) : (date.getDate() - date.getDay() +1));
            var endDate = date.getFullYear() + "-" + (date.getMonth() + 1 < 10 ? '0' +  (date.getMonth() + 1) : (date.getMonth() + 1)) + "-" + ((date.getDate() - date.getDay() +7) < 10 ? '0' +  (date.getDate() - date.getDay() +7) : (date.getDate() - date.getDay() +7));
            window.location.href = "?startDate=" + startDate + "&endDate=" + endDate;
            selectCurrentWeek();            
        },
        beforeShowDay: function(date) {
            var cssClass = '';
            if(date >= startDay && date <= endDay)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function(year, month, inst) {
            selectCurrentWeek();
        }
    });

    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>

对于滑块:

<script>
$(function() {
    var start = "<?php echo $wishtimes[$weekdays[$i]]['TIME_TO_SEC(starttime)']?>";
    var end = "<?php echo $wishtimes[$weekdays[$i]]['TIME_TO_SEC(endtime)']?>";
    start = start / 60;
    end = end / 60;
    start = parseInt(start); 
    end = parseInt(end);
    $("#slider<?php echo $i?>").slider({
        range: true,
        min: 0,
        max: 1440, /* Hour * 60 from 0:00 to 24:00 */
        step: 15,
        values: [ start, end ],
        slide: function(e, ui) {
            var hours = Math.floor(ui.value / 60);
            var minutes = ui.value - (hours * 60);

            if(hours.length == 1) hours = '0' + hours;
            if(minutes.length == 1) minutes = '0' + minutes;

            $('#something').html(hours+':'+minutes);
        }
    });
});
</script>

如果我删除了datepicker的脚本,则显示滑块,但是当我实现了两个脚本时,没有滑块。有没有想过这两者可能会相互冲突?

0 个答案:

没有答案