Question

我尝试在简单的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 + ")");
});

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

Answer 1

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

移动$('#config-demo').daterangepicker来电，使其位于$(document).ready()功能中。

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

1 个答案: