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

要禁用除思维和最大日期之外的任何日期选择，可以使用：

$( "#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。

Answer 2

如果您使用的是jQuery UI Datepicker，则此代码对您来说应该可以正常工作：

   id lab value start_date  stop_date
1   1   1     1 2019-01-01 2019-01-01
2   1   1     3 2019-01-02 2019-01-02
3   1   1     2 2019-01-03 2019-01-03
4   1   1     4 2019-01-04 2019-01-05
5   1   1     0 2019-01-06 2019-01-06
6   1   1     2 2019-01-07 2019-01-07
7   1   1     4 2019-01-08 2019-01-08
8   1   1     2 2019-01-09 2019-01-10
9   1   2     4 2019-01-11 2019-01-11
10  1   2     2 2019-01-12 2019-01-12
11  1   2     3 2019-01-13 2019-01-13
12  1   2     2 2019-01-14 2019-01-14
13  1   2     0 2019-01-15 2019-01-15
14  1   2     4 2019-01-16 2019-01-16
15  1   2     1 2019-01-17 2019-01-17
16  1   2     0 2019-01-18 2019-01-18
17  1   2     1 2019-01-19 2019-01-19
18  1   2     4 2019-01-20 2019-01-20
19  1   3     4 2019-01-21 2019-01-21
20  1   3     3 2019-01-22 2019-01-23
21  1   3     4 2019-01-24 2019-01-24
22  1   3     3 2019-01-25 2019-01-26
23  1   3     2 2019-01-27 2019-01-28
24  1   3     1 2019-01-29 2019-01-29
25  1   3     0 2019-01-30 2019-01-30

希望它对您有帮助。

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

2 个答案: