日期范围选择器不适用于简单的 Web 应用程序答案

【问题标题】：Date range picker doesn't work on simple web application日期范围选择器不适用于简单的 Web 应用程序
【发布时间】：2017-10-18 11:31:53
【问题描述】：

我尝试在一个简单的 Web 应用程序上添加一个日期范围选择器，例如 this。我只有一个 html 文件、一个 css 文件和一个 javascript 文件。

因此，在我的文件中，我的文件与 jsfiddle 中的内容相同，并且我有相同的依赖项，但在我的应用程序中，这不起作用。

在我的 html 文件中，我有：

<div class="row">
  <div class="col-md-4 col-md-offset-2 demo">
    <h4>Your Date Range Picker</h4>
    <input type="text" id="config-demo" class="form-control">
  </div>
</div>

在 javascript 文件中，我有：

$(document).ready(function(){
  var date_input=$('input[name="date"]'); //our date input has the name "date"
  var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
  var options={
    format: 'mm/dd/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
  };
  date_input.datepicker(options);
})

$('#config-demo').daterangepicker({
"locale": {
    "format": "MM/DD/YYYY",
    "separator": " - ",
    "applyLabel": "Apply",
    "cancelLabel": "Cancel",
    "fromLabel": "From",
    "toLabel": "To",
    "customRangeLabel": "Custom",
    "daysOfWeek": [
        "Su",
        "Mo",
        "Tu",
        "We",
        "Th",
        "Fr",
        "Sa"
    ],
    "monthNames": [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    "firstDay": 1
},
"linkedCalendars": false,
"startDate": "09/26/2015",
"endDate": "10/02/2015",
"opens": "center"
}, function(start, end, label) {
    console.log("New date range selected: " + start.format('MM-DD-YYYY') + " to " + end.format('MM-DD-YYYY') + " (predefined range: " + label + ")");
});

你知道为什么它不起作用吗？

【问题讨论】：

除非您出示相关的 Javascript 代码，否则我们无法为您提供帮助。
我添加了我的javascript文件！

标签： javascript jquery twitter-bootstrap bootstrap-daterangepicker

【解决方案1】：

您在$(document).ready() 函数之外调用$('#config-demo').daterangepicker，这可能意味着您正在尝试选择ID 为“config-demo”的div，然后它存在于DOM 中。

移动您的 $('#config-demo').daterangepicker 调用，使其位于 $(document).ready() 函数内。

【讨论】：

谢谢！就是这样！