JQuery UI datepicker 经验

最新推荐文章于 2025-08-07 21:29:52 发布

转载最新推荐文章于 2025-08-07 21:29:52 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/juhualang/p/4022053.html

文章标签：

#ui #javascript #ViewUI

本文详细介绍了如何使用jQuery和JavaScript实现日期范围选择器功能，包括全局日期设置、日期选择阈值设定以及日期选择联动机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

范围时间选择 range date picker

$(function(datepicker) {
    function datePicker(){
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() +1;
        var day = date.getDate();
        var dateStr = '';

        // 全局设置 datePicker;
        $.datepicker.setDefaults({
            monthNames : ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            dayNamesMin : ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
            dateFormat: 'yy-mm-dd',
            minDate: date,
            maxDate: '+1w'
        });

        $( "#date_from" ).datepicker({
            defaultDate: "+1",
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function( selectedDate ) {
                if ( selectedDate){ // 如果用户选择日期，才更改日期选择阈值;
                    $( "#date_to" ).datepicker( "option", "minDate", selectedDate );
                }
            }
        });
        $( "#date_to" ).datepicker({
            defaultDate: "+1",
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function( selectedDate ) {
                if ( selectedDate){ // 如果用户选择日期，才更改日期选择阈值;
                    $( "#date_from" ).datepicker( "option", "maxDate", selectedDate );
                }
            }
        });
    }
    datePicker();
});