Question

我试图将日期范围选择器添加到我的html文件中，但是当我点击输入框时无法显示它。它适用于datepicker，但我希望它提供点击日期范围。我已经在这些日子里挣扎了几天，并且可以真正使用一些帮助。提取的代码如下。我错过了什么？

`<!-- 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>`

Answer 1

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

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

Answer 2

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

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

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

https://jsfiddle.net/nonh3gr7/

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

Answer 3

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

这是一个有效的JS小提琴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" />

Bootstrap Daterange Picker未显示

3 个答案: