【问题标题】:How to check if a disabled date is in the selected range如何检查禁用日期是否在所选范围内
【发布时间】:2019-11-21 15:31:11
【问题描述】:

我想检查所选日期范围内是否有禁用日期

我可以禁用特定日期,我可以有多个日期。

但不知道如何限制用户选择其中包含禁用日期的范围。

如果 2019 年 7 月 4 日被禁用,则限制用户选择 2019 年 7 月 3 日至 2019 年 7 月 9 日

$(document).ready(function() {
  $('.date_rangepicker').daterangepicker({
    timePicker: false,
    locale: {
      format: 'YYYY/MM/DD'
    },
    isInvalidDate: function(date) {
      if(date.format('YYYY/MM/DD') == '2019/07/04') {
        return true;
      }else{
        return false; 
      }
    }
  }, function(start, end, label) {
    console.log(start.toISOString(), end.toISOString(), label);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

 <input type="text" class="date_rangepicker"/>

【问题讨论】:

  • 有点难。我认为没有用于检测何时选择数据的内置事件,我看到有人提到修改 js 文件来做到这一点。似乎您必须检测用户何时选择日期,然后更新/重绘日历以将最近的先前涂黑日期之前的所有日期和最近的以下涂黑日期(包括在内)之后的所有日期涂黑。功能(开始,结束,标签)的问题似乎是它只用应用按钮触发?这可能会有所帮助。 github.com/dangrossman/daterangepicker/issues/800

标签: jquery bootstrap-daterangepicker jquerydatetimepicker


【解决方案1】:

我已经扩展了 daterangepicker 的功能。 你可以从这里检查扩展的 daterangepicker 插件 https://pastebin.com/4SKPTT7P

您可以通过以下代码使用它 通过这个,您可以使多个日期禁用/无效,并且用户无法选择其中包含无效日期的日期范围。

        $(document).ready(function() {
            $('.date_rangepicker').daterangepicker({
                timePicker: false,
                locale: {
                    format: 'YYYY/MM/DD'
                },
                invalidDates: ['2019/07/01', '2019/07/02', '2019/07/03'],
            }
            );
        });

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-01-28
    • 1970-01-01
    • 1970-01-01
    • 2010-11-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多