Question

我修改了日历以选择周，并在一个效果很好的文本框中显示。

我试图禁用当前周和未来的日期，但不知道如何，我尝试了这个但它不起作用

$("#selector").datepicker({
    maxDate: 0
});

我的小提琴在下面

＆＃13;

$(function() {
var startDate;
var endDate;

var selectCurrentWeek = function() {
    window.setTimeout(function () {
        $('.ui-datepicker-current-day a').addClass('ui-state-active')
    }, 1);
}

$('.week-picker').datepicker( {
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    onSelect: function(dateText, inst) { 
        var date = $(this).datepicker('getDate');
        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
        var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
        $("#txtWeekPicker").val($.datepicker.formatDate( dateFormat, startDate, inst.settings )+" - "+$.datepicker.formatDate( dateFormat, endDate, inst.settings ));
        
        selectCurrentWeek();
    },
    beforeShowDay: function(date) {
        var cssClass = '';
        if(date >= startDate && date <= endDate)
            cssClass = 'ui-datepicker-current-day';
        
        selectCurrentWeek();
        return [true, cssClass];
    },
    onChangeMonthYear: function(year, month, inst) {
        selectCurrentWeek();
    }
});

$('.ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});

＆＃13;

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>

<div class="week-picker"></div>
<br /><br />
 <input type="text" id="txtWeekPicker" class="week-picker" />

＆＃13;

Answer 1

您可以尝试新的HTML5周输入类型。

<input type="week" max="week number">

然而，风格很难，你还需要弄清楚计算当前周的JS。此外，没有Firefox支持或预IE 12。

禁用本周和未来日期Jquery

1 个答案: