Bootstrap jQuery Datepicker将datepicker限制在第一个日历上的三天,带有两个日历

时间:2015-11-03 08:02:26

标签: jquery twitter-bootstrap 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);
            }
        }
    });

1 个答案:

答案 0 :(得分:0)

所以我使用了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');
});