创建一个日期选择器，其中包含选择月份或日期范围的选项答案

【问题标题】：Creating a datepicker with options to pick month or date range创建一个日期选择器，其中包含选择月份或日期范围的选项
【发布时间】：2018-12-13 22:21:20
【问题描述】：

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

请看下图。

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

有什么想法吗？

编辑：为了澄清，我问是否有任何可用的东西可以满足我的需求，还是我需要从头开始创建一个日期选择器？

【问题讨论】：

js中设置日期的代码是什么？告诉我们用于显示此屏幕截图的库。代码？
@phonemyatt 图片是我想做的一个例子，我无权访问代码。

标签： javascript html datepicker

【解决方案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 和 Date Range Picker 的文件，然后使用 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" />

【讨论】：