0

我尝试在一个简单的 Web 应用程序上添加这样的日期范围选择器。我只有一个 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 + ")");
});

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

4

1 回答 1

1

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

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

于 2017-05-18T15:12:19.087 回答