Question

我正在开发简单的演示应用程序，使用jQuery mobile datepicker和jQuery mobile popup从用户那里获取开始日期和结束日期。我的问题是，popup正在成功打开但是当我试图点击“开始日期”文本框时，datepicker日历成功打开但接下来如果我点击“结束日期”它不起作用...什么是根本原因，我我没有......请帮助我。

以下是代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DatePicker Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="../public/js/jquery.js"></script>
<script type="text/javascript" src="../public/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../public/js/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript" src="../public/js/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../public/js/jquery.mobile-git.js"></script>
<script type="text/javascript" src="../public/js/jquery.mobile.datepicker.js"></script>
<link rel="stylesheet" href="../public/stylesheets/jquery.mobile-1.4.0.min.css">
<link rel="stylesheet" href="../public/stylesheets/jquery.mobile-git.css">
<link rel="stylesheet" href="../public/stylesheets/jquery.mobile.datepicker.css">
</head>

<body>
  <a href="#popupDemo" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Open Popup</a>
  <div data-role="popup" id="popupDemo" data-theme="a" class="ui-corner-all">
     <div data-role="content">
        <form>
           <div style="padding:10px 20px;">
              <h3>Date Picker</h3>
                 <input type="text" id="startdate" data-inline="false" data-role="date" placeholder="Start Date">   
                 <input type="text" id="enddate" data-inline="false" data-role="date" placeholder="End Date">
                 <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Save</button>
           </div>
         </form>
       </div>
     </div>
   </body>
</html>

Answer 1

你试过吗

$('#startdate, #enddate').on("click", function(this){
    $(this).datepicker("destroy");
    $(this).datepicker({
        changeMonth: true, 
        changeYear: true,
        minDate: new Date('2013','01', '01'), 
        maxDate: new Date(),
        //...and other setup lines you need
    });
$(this).datepicker("refresh");
});

Answer 2

您好，这里是日期选择器的工作代码，请注意，我们必须添加此js jquery.ui.datepicker.js

<!DOCTYPE html>
    <html>
       <head>
          <meta name = "viewport" content = "width = device-width, initial-scale = 1">
          <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
          <link rel = "stylesheet" href = "https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/master/jquery.mobile.datepicker.css" />
          <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
          <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
          <script src = "https://rawgithub.com/jquery/jquery-ui/1-10-stable/ui/jquery.ui.datepicker.js"></script>
          <script src = "https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/master/jquery.mobile.datepicker.js"></script>
       </head>

       <body>
          <h2>Vipul Datapicker Example</h2>
          <form>
             <input type = "text" data-role = "date">
          </form>
       </body>
    </html>

jsfiddle演示：-

https://jsfiddle.net/vipulg/g41eocs2/

jQuery mobile datepicker在弹出窗口上无法正常工作

2 个答案: