两个Datepicker在同一页上

时间:2015-07-16 08:41:54

标签: javascript jquery jquery-ui datepicker

我在同一页面上有两个日期选择器的问题,他们只是不想一起工作。

我找到了与我相关的主题,但它们没有解决我的问题:

Conflict with two jquery datepickers on same page

Javascript two datepicker conflict

我的字段看起来像这样:

        <div class="row">
            <div class="col-xs-6 filter-from">
                <input id="date-filter-from" type="text" class="form-control filter-value datepicker-field" data-filter-value="from">
            </div>
            <div class="col-xs-6 filter-to">
                <input id="date-filter-to" type="text" class="form-control filter-value datepicker-field" data-filter-value="to">
            </div>
        </div>

初始化看起来像这样:

$(document).ready( function() {
    $(document).find('#date-filter-from').datepicker();
    $(document).find('#date-filter-to').datepicker();
});

现在发生了什么。第一个datepicker我点击工作okey。然后当我点击第二个它完全不起作用或当我选择一个日期时它在控制台中显示错误:

Uncaught TypeError: Cannot set property 'currentDay' of undefined

我将不胜感激任何帮助或想法。

1 个答案:

答案 0 :(得分:-1)

使用JQuery选择器而不是$(document).find

$(document).ready(function() {
  $('#date-filter-from').datepicker();
  $('#date-filter-to').datepicker();
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="row">
  <div class="col-xs-6 filter-from">
    <input id="date-filter-from" type="text" class="form-control filter-value datepicker-field" data-filter-value="from">
  </div>
  <div class="col-xs-6 filter-to">
    <input id="date-filter-to" type="text" class="form-control filter-value datepicker-field" data-filter-value="to">
  </div>
</div>