尝试向应用程序添加超过 1 个 jQuery ui-datepicker。当前代码只允许 1

Question

我正在尝试使用 jQuery ui-datepicker 插件添加多个日历弹出窗口。

目前只会显示 1 个日历，我希望在同一页面上显示第二个日历。

HTML /views/pages/index.html.erb

<label class="label_field" for="drop_off">Drop-Off</label>
<input id="datepicker" class="input_field" type="text" name="drop_off">

<label class="label_field" for="pick_up">Pick-Up</label>
<input id="datepicker" class="input_field" type="text" name="pick_up">

申请.html.erb

<!DOCTYPE html>
<html>
<head>
  <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">



<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">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <%= stylesheet_link_tag    'application'%>
  <%= csrf_meta_tags %>
</head>
<body>


<%= yield %>


  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <%= javascript_include_tag 'application'%>
</body>
</html>

JS pages.js

$(document).ready(function(){
  $( "#datepicker" ).datepicker();
});

Answer 1

更改您的输入元素 ID（它们必须是唯一的）

...
<input id="datepicker1" class="input_field" type="text" name="drop_off">

...
<input id="datepicker2" class="input_field" type="text" name="pick_up">

然后针对每个实例化日期选择器：

$(document).ready(function(){
  $( "#datepicker1" ).datepicker();
  $( "#datepicker2" ).datepicker();
});

Answer 2

试试这个：

<label class="label_field" for="drop_off">Drop-Off</label>
<input id="datepicker1" class="input_field datepicker" type="text" name="drop_off">

<label class="label_field" for="pick_up">Pick-Up</label>
<input id="datepicker2" class="input_field datepicker" type="text" name="pick_up">

$(document).ready(function(){
  $( ".datepicker" ).datepicker();
});

http://jsfiddle.net/y4db5aLw/

正如我之前在评论中提到的，我建议使用 css class 选择器而不是 ID。

尝试向应用程序添加超过 1 个 jQuery ui-datepicker。当前代码只允许 1

Trying to add more than 1 jQuery ui-datepicker to application. Only allows for 1 with current code

jquery

jquery-ui

ruby-on-rails

jquery-ui-datepicker