时间戳

首页 > 解决方案 > 如何隐藏多个日期范围之间的日期

jquery - 如何隐藏多个日期范围之间的日期

问题描述

我想隐藏 2019 年 1 月 1 日至 2019 年 1 月 15 日和 2019 年 2 月 1 日至 2019 年 2 月 15 日之间的日期。

$('#from_date').on('change', function() {
    $('#to_date').val(''); $('#to_date').datepicker("destroy");
    var newStart = new Date($(this).val());
    newStart.setDate(newStart.getDate() + 1);
    $('#to_date').datepicker({
        format: 'dd MM, yyyy',
        autoclose: true,
        startDate: newStart
    });
})

HTML

<input type="text" id="from_date" class="form-control datepicker" name="from_date" value="">
<input type="text" id="to_date" class="form-control datepicker" name="to_date" value="">

标签： jquerydatepicker

解决方案

您可以自定义beforeShowDay功能并将逻辑禁用所选日期。见下面的例子

$(function(){
 $('#from_date').datepicker();
 var array = ["2019-01-01","2019-01-02","2019-01-03","2019-01-05","2019-01-06","2019-01-07","2019-01-08","2019-01-09","2019-01-10","2019-01-11","2019-01-12","2019-01-13","2019-01-14","2019-01-15","2019-02-01","2019-02-02","2019-02-03","2019-02-04","2019-02-05","2019-02-06","2019-02-07","2019-02-08","2019-02-09","2019-02-10","2019-02-11","2019-02-12","2019-02-13","2019-02-14","2019-02-15"]
$('#from_date').on('change', function() {
    $('#to_date').val(''); $('#to_date').datepicker("destroy");
    var newStart = new Date($(this).val());
    newStart.setDate(newStart.getDate() + 1);
    $('#to_date').datepicker({
        format: 'dd MM, yyyy',
        autoclose: true,
        startDate: newStart,
        beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
          return [ array.indexOf(string) == -1 ]
        }
    });
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<input id="from_date">
<br>
<input id="to_date">

编辑：使用日期范围禁用日期（您可以使用数组或其他方式放置日期范围）

$(function(){
    $('#from_date').datepicker();
    var dateRanges = ["2019-11-01 2019-11-15","2019-12-01 2019-12-15"];
    $('#from_date').on('change', function() {
        $('#to_date').val(''); $('#to_date').datepicker("destroy");
        var newStart = new Date($(this).val());
        newStart.setDate(newStart.getDate() + 1);
        $('#to_date').datepicker({
            format: 'dd MM, yyyy',
            autoclose: true,
            startDate: newStart,
            beforeShowDay: function(date){
            var enableDate = true;
            for(var i=0; i<dateRanges.length; i++) {
                var dates = dateRanges[i].split(" ");
                var start = new Date(dates[0]);
                var end = new Date(dates[1]);
                // set time factor to zero
                date.setHours(0,0,0,0);
                start.setHours(0,0,0,0);
                end.setHours(0,0,0,0);
                if(date.getTime() >= start.getTime() && date.getTime() <= end.getTime()) {
                  enableDate = false;
                  break;
                }
            }
              if(enableDate) {
                return [true, "","Available"];
              } else {
                 return [false,"","unAvailable"];
              }
            }
        });
    });
 });
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <input id="from_date">
    <br>
    <input id="to_date">

推荐阅读