Bootstrap jQuery Datepicker将带有两个日历的第一个日历上的日期选择器限制为三天



我有两个Bootstrap Datepicker日历字段。在第一个日历上,人们只能从今天开始选择过去三天,在第二个日历上我想将startDateendDate设置为今天。如果选择时间超过三天,请发出错误警报。假设今天是11月3日。当人们在第一个日历上选择11月1日、2日或3日时,第二个日历将是11月3日。若有人试图选择10月31日,它会发出警报。

我有什么(更新):

<input type="text" id="startDate">
<input type="text" id="endDate">

    $("#dt1").datepicker({
        dateFormat: "dd-M-yy",
        maxDate: 0,
        minDate: -2,
        onSelect: function (date) {
            var date2 = $('#dt1').datepicker('getDate');
            date2.setDate(date2.getDate() + 2);
            $('#dt2').datepicker('setDate', date2);
            $('#dt2').datepicker('option', 'maxDate', date2);
            var dt3 = $('#dt1').datepicker('getDate');
            console.log(dt1);
            var dt4 = $('#dt2').datepicker('getDate');
            if (dt3 == dt4) {
                maxDate: 0;
                minDate: 0;
                var date3 = $('#dt1').datepicker('getDate');
                var date4 = $('#dt2').datepicker('getDate');
                date4.setDate(date3.getDate());
            }
        }
    });
    $('#dt2').datepicker({
        dateFormat: "dd-M-yy",
        minDate: 0,
        maxDate: 0,
        onClose: function () {
            var dt1 = $('#dt1').datepicker('getDate');
            console.log(dt1);
            var dt2 = $('#dt2').datepicker('getDate');
            if (dt2 <= dt1) {
                var minDate = $('#dt2').datepicker('option', 'minDate');
                $('#dt2').datepicker('setDate', minDate);
            }
        }
    });

所以我使用了Bootstrap Datepicker并提出了这个解决方案。到目前为止工作良好。

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
$('#datetimepicker6').datepicker({
    startDate: "-3d",
    endDate: today,
    format: 'yyyy-mm-dd',
    autoclose: true,
    todayHighlight: true
}).on('changeDate', function (e) {
    // Revalidate the date field
    $('#movieForm').formValidation('revalidateField', 'datetimepicker6');
});

$('#datetimepicker7').datepicker({
    startDate: today,
    endDate: today,
    format: 'yyyy-mm-dd',
    autoclose: true,
    todayHighlight: true
}).datepicker("setDate", today).on('changeDate', function (e) {
    // Revalidate the date field
    $('#movieForm').formValidation('revalidateField', 'datetimepicker7');
});

最新更新