十、jquery-ui datepicker实现选择一周的日期

html页面：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/jquery-ui.css">
    <script type="text/javascript" src="/static/js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="/static/js/jquery-ui.js"></script>
    <title>查看已上线需求</title>
</head>

<body>
    <div class='mycontainer'>
        <table>
            <tr>
                <td>日期
                    <input id="dateWeekRange" type="text" class="datePicker input-sm" placeholder="选择时间段" />
                </td>
            </tr>
        </table>
        <br/>
        <div id="showChart"></div>
    </div>
</body>
</html>

javascript：

<script type="text/javascript">  
$(document).ready(function(e) {  
    var date = new Date();  
    var mondayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
    var sundayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);

    var startDateStr = $.datepicker.formatDate('yy-mm-dd', mondayDate);
    var endDateStr = $.datepicker.formatDate('yy-mm-dd', sundayDate);
    $('#dateWeekRange').val(startDateStr + " ~ " + endDateStr);
});
var startDate;
var endDate;

jQuery(function($) {
    $.datepicker.regional['zh-CN'] = {
        firstDay: 1,
        initStatus: '请选择日期',
        isRTL: false
    };
    $.datepicker.setDefaults($.datepicker.regional['zh-CN']);

    var selectCurrentWeek = function() {
        window.setTimeout(function() {
            $('#dateWeekRange').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }
    $('#dateWeekRange').datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function(dateText, inst) {
            var date = $(this).datepicker('getDate');

            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

            var startDateStr = $.datepicker.formatDate('yy-mm-dd', startDate, inst.settings);
            var endDateStr = $.datepicker.formatDate('yy-mm-dd', endDate, inst.settings);

            $('#dateWeekRange').val(startDateStr + " ~ " + endDateStr);
            selectCurrentWeek();
        },
        beforeShowDay: function(date) {
            var cssClass = '';
            if (date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function(year, month, inst) {
            selectCurrentWeek();
        }
    });

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

效果如下：

jQuery 1.7之后live()就被废弃了，用.on()替代

// Live
$( ".bookList li" ).live( "click", function( e ) {} );
$( document ).on( "click", ".bookList li", function( e ) {} );

参考文章：
jQuery API中文文档
jquery .bind vs .live

更多相关文章

随机推荐