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

Question

我尝试添加一个日期范围选择器，例如 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 + ")");
});

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

Answer 1

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

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