用于选择开始和结束日期的数据范围选择器答案

【问题标题】：Data range picker to select start and end dates用于选择开始和结束日期的数据范围选择器
【发布时间】：2019-08-22 05:00:54
【问题描述】：

我正在寻找一个日期范围选择器，其中第一次单击是选择开始日期，然后刷新日历，第二次单击是选择结束日期。我发现的所有日期范围选择器都有两个日历，可以同时选择开始日期和结束日期。

有没有人做过类似的事情。

任何建议或帮助将不胜感激。

提前致谢

【问题讨论】：

嗨@Owais，你可以使用jQuery Picker aspsnippets.com/Demos/917试试这个链接。谢谢
谢谢，但我需要一个日期选择器来选择开始日期并刷新以选择结束日期
npmjs.com/package/angular-moment-picker 看看这里
发布类似问题并提供一些不错的解决方案。 Javascript Date Range Picker - Single Calendar for Range Selection
使用简单的angular-ui.github.io/bootstrap ui-bootstrap-tpls datepicker 1. 当您选择第一个日期时，将其保存在与您的模型不同的变量中。 2. 使用gist.github.com/cgmartin/3daa01f910601ced9cd3 的帮助刷新日历 3. 使用提供的customneClass 方法使用保存的日期突出显示日历 4. 选择新日期并将其用作结束日期。

标签： javascript jquery angularjs datepicker angular-ui-bootstrap

【解决方案1】：

我想你正在寻找这个。

 $( function() {
       $( "#fromDate" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
       
        onClose: function( selectedDate ) {
            $("#toDate").datepicker("option", "minDate", selectedDate);
        }
    });
    $( "#toDate" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onClose: function( selectedDate ) {
            $( "#fromDate" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
  } );

<!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>
</head>
<body>
 
<p>From: <input type="text" id="fromDate"></p>
<p>To: <input type="text" id="toDate"></p>
 
 
</body>
</html>

【讨论】：

【解决方案2】：

我正在使用 react-day-picker，它是高度可定制的。或者试试airbnb，它有点重，CPU消耗更高

【讨论】：

【解决方案3】：

请检查一下，我想其中一种方法会对您有所帮助，

注意：我不知道是否禁止在 stackoverflow 上发布第三方链接，如果是，请告诉我删除下面的链接，

http://www.daterangepicker.com/#examples

【讨论】：

谢谢，但我需要一个日期选择器来选择开始日期并刷新以选择结束日期