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

Posted 2023-05-07

技术标签:

【中文标题】用于选择开始和结束日期的数据范围选择器【英文标题】：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. 选择新日期并将其用作结束日期。 【参考方案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】：

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

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

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

【讨论】：

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

以上是关于用于选择开始和结束日期的数据范围选择器的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Twitter 引导日期选择器中禁用结束日期范围？