Question

我正在使用Flask中的WebApp，并且正在使用HTML / JS创建前端模板。我需要一个日期选择器，该日期选择器将允许用户选择特定的日期范围，或者让用户选择月份范围。

请参见下图。

如果用户单击底部的“月”，则将为用户提供选择开始和结束月份的选项。但是，如果用户单击当前显示的“自定义范围”，则用户可以在两个特定日期之间进行选择并滚动查看月份。

有什么想法吗？

编辑：为澄清起见，我在问是否有满足我需求的可用商品，还是我需要从头开始创建日期选择器？

Answer 1

对于较新的浏览器，您可以使用HTML <input type="date">。它可能是最简单的，但不允许选择数据范围。

<label for="start">Start date:</label>

<input type="date" id="start" name="trip-start"
       value="2018-07-22"
       min="2018-01-01" max="2018-12-31">

有一些HTML / CSS / JS数据选择器：

还有other datapickers可用。

其中一些不允许使用日期范围，但可以将其中一些时间间隔为一周。根据所选的数据选择器，有一些指导如何执行此操作。

一个简单允许范围的是date range picker。您应该在网页中包含jQuery，Moment.js和日期范围选择器的文件，然后使用JavaScript对其进行配置。

$(function() {
  $('input[name="daterange"]').daterangepicker({
    opens: 'left'
  }, function(start, end, label) {
    console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  });
});

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/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" name="daterange" value="01/01/2018 - 01/15/2018" />

创建带有选择月份或日期范围的选项的日期选择器

1 个答案: