在日期选择器中选择开始日期时仅显示一个月日期

Question

我的项目有问题。我想在选择我的开始日期时只显示一个月的日期，假设我选择 2 月 1 日，那么结束日期将是 2 月 28 日，用户不能选择高于 2 月 28 日，但不知道该怎么做。 这是我的代码：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>

$("#checkin").datepicker({
    format: 'yyyy-mm-dd',
    todayHighlight: true,
    autoclose: true
})
.on('changeDate', function(ev){
    $("#checkout").datepicker({
        format: 'yyyy-mm-dd',
        todayHighlight: true,
        autoclose: true,
        minDate: ev.date.setDate(ev.date + 30)
    });
});

Answer 1

如果您使用的是 jQuery UI Datepicker，那么这段代码应该适合您：

$("#checkin").datepicker({
        format: 'yyyy-mm-dd',
        todayHighlight: true,
        autoclose: true,
        onSelect: function(ev) {
            var fromDate = $('#checkin').datepicker("getDate");
            var rangemindate = new Date(fromDate.getFullYear(), fromDate.getMonth(),fromDate.getDate() + 1);
            var rangemaxdate = new Date(fromDate.getFullYear(), fromDate.getMonth(),fromDate.getDate() + 30); 
            $("#checkout").datepicker({
                format: 'yyyy-mm-dd',
                todayHighlight: true,
                autoclose: true,
                minDate: rangemindate,
                maxDate: rangemaxdate
            });
        }
    });

希望对你有帮助。

Answer 2

要禁用任何超过 mindate 和 maxdate 的日期选择，您可以使用：

$( "#checkin" ).datepicker({ 
    minDate: minDate, 
    maxDate: maxDate 
});

在您的情况下，它是月份的开始日期和结束日期：

var currentTime = new Date();
var minDate = new Date(currentTime.getFullYear(), currentTime.getMonth(), 1);
var maxDate =  new Date(currentTime.getFullYear(), currentTime.getMonth() + 1, 0);
$( "#checkin" ).datepicker({ 
    minDate: minDate, 
    maxDate: maxDate 
});

如果你想根据用户选择拥有它：

$("#checkin").datepicker({
    format: 'Y-m-d',
    todayHighlight: true,
    autoclose: true
}).on('changeDate', function(ev){

    var selected = new Date(ev.format());
    var minDate = new Date(selected.getFullYear(), selected.getMonth(), 1);
    var maxDate =  new Date(selected.getFullYear(), selected.getMonth() + 1, 0);
     $('#checkout').datepicker('option', 'minDate', minDate);
     $('#checkout').datepicker('option', 'maxDate', maxDate);
});

请查看this了解更多信息。

检查我为此示例创建的fiddle。