时间戳

首页 > 解决方案 > 内联引导日期选择器日期范围

jquery - 内联引导日期选择器日期范围

问题描述

早上好 ！:)

我已经包含了一个这样的引导日期选择器：

在此处输入图像描述

如果用户点击一个日期，我会得到选定的日期。

$('.date-inline').on('changeDate', function (ev) {
    alert( $(".date-inline").data('datepicker') )
});

现在我想意识到用户可以选择一个日期范围。用户应该选择开始和结束日期>日期选择器突出显示开始日期和结束日期之间的日期，结果我得到了范围。

这可能吗？如果是，如何？:)

更新

用户点击 4 月 13 日（第一个日期）和 4 月 19 日（第二个日期）日期选择器现在应该将所选日期之间的日期显示为“已选择”（已选择 = 背景颜色蓝色，如上面屏幕截图中的“19” )

我想知道，选择了哪些日期（例如在数组中）这个例子的值是：

2020-04-13, 2020-04-14, 2020-04-15, 2020-04-16, 2020-04-17, 2020-04-18, 2020-04-19

标签： jquerydatepicker

解决方案

拿着这个：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
    $("#datepicker2").datepicker({
    onSelect: function() {
    var currentDate1 =new Date($( "#datepicker" ).datepicker( "getDate" ));
  var currentDate2 = new Date($( "#datepicker2" ).datepicker( "getDate" ));
    $( "#datepicker3" ).datepicker({
      minDate:new Date(currentDate1),
      maxDate:new Date(currentDate2)
      });
    }
});


  } );

  </script>
</head>
<body>

<p>Date1: <input type="text" id="datepicker"></p>
<p>Date2: <input type="text" id="datepicker2" ></p>
<p>Date3: <input type="text" id="datepicker3"></p> 
</body>
</html>

看看它的运行情况：https ://jsfiddle.net/sugandhnikhil/ow20pzdk/127/

谢谢！！！！:-)

推荐阅读