引导日期范围选择器未显示答案

【问题标题】：Bootstrap Daterange Picker Not Showing引导日期范围选择器未显示
【发布时间】：2017-05-11 11:47:15
【问题描述】：

我正在尝试将日期范围选择器添加到我的 html 文件中，但是当我单击输入框时无法显示它。它适用于日期选择器，但我希望它提供点击日期范围。这几天我一直在努力解决这些问题，我真的需要一些帮助。提取的代码如下。我错过了什么？

`<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />

<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />


<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />

<script type="text/javascript">
$(function() {
    $('input[name="daterange"]').daterangepicker();
});
</script>`

【问题讨论】：

标签： javascript html twitter-bootstrap daterangepicker

【解决方案1】：

<input type="text" class="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$('.daterange').daterangepicker();
</script>

试试这个..可能会有所帮助

【讨论】：

没有帮助，仍然有同样的问题。但是谢谢:)

【解决方案2】：

实际上它按照您的代码工作。

$(function() {
    $('input[name="daterange"]').daterangepicker();
});

我为你创造了一个小提琴。请在此处查看

https://jsfiddle.net/nonh3gr7/

如果有任何脚本冲突或发生了什么，请检查您的 html 文件？

【讨论】：

它确实在小提琴中工作。但是，当我尝试在 Google Chrome 中打开 html 文件（正如我在问题中发布的那样，没有添加任何内容）时，它不会显示。只有当我双击输入字段时，它才会下降到与占位符值相同日期的一行中。
那么我认为您的互联网连接阻止了 js 文件远程使用。请下载并在本地参考。试试看。
我做了，但它仍然不起作用。奇怪的是我有一个类似的 datepicker 示例（没有范围，只是选择一个日期），并且没有任何问题。将继续努力解决这个问题。感谢毕比的想法：）

【解决方案3】：

代码没有错，检查下面的工作示例

这是一个有效的 JS fiddle https://jsfiddle.net/k956L4ep/

片段

$(function() {
    $('input[name="daterange"]').daterangepicker();
});

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />

<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />

【讨论】：

是的，小提琴可以工作，但是由于某种原因，当我在 Chrome 中运行这个 html 文件（因为它是发布的）时，它没有显示任何东西。
检查您的网页，检查您的控制台