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">

application.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（它们必须是唯一的）

然后针对每个实例化datepickers：

#!/usr/bin/env python

import ssl
import BaseHTTPServer, SimpleHTTPServer
from BaseHTTPServer import BaseHTTPRequestHandler

class HttpHandler(BaseHTTPRequestHandler):
    def do_POST(self):
        print "got POST message"
        # how do I get the file here?
        print self.request.FILES


httpd = BaseHTTPServer.HTTPServer(('localhost', 4443), HttpHandler)
httpd.socket = ssl.wrap_socket(httpd.socket, certfile='./server.pem', server_side=True)
httpd.serve_forever()    



$curl -X POST -d @../some.file https://localhost:4443/resource --insecure

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类选择器而不是ID。

试图在应用程序中添加1个以上的jQuery ui-datepicker。仅允许使用当前代码的1

2 个答案: