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

时间：2020-04-19 06:47:27

标签： jquery datepicker

早上好！ ：）

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

enter image description here

如果用户单击一个日期，我将获得所选的日期。

$('.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

1 个答案:

答案 0 :(得分：0)

接受此：

<!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/

谢谢！！！ ：-）

相关问题
最新问题