0

我正在使用 jQuery UI 日期选择器来显示我的移动应用程序的日期选择器。我正在使用来自http://jqueryui.com/datepicker/的 CSS 和 JS 文件。我的要求是，当日期选择器弹出时它应该隐藏背景屏幕，并且用户不应该对主屏幕进行任何控制，直到他/她选择日期。它应该适用于所有移动设备。任何人都可以为此提供解决方案吗？

这是我为测试类似功能而创建的示例 HTML 页面。

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Default functionality</title>




  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <script>


  function focusTextBox(){
  var a=2;
 var tb = document.getElementById('datepicker');
 if(a==2){
 $(document).ready(function() {
    $( "#datepicker" ).datepicker({ minDate: 0, maxDate: "+18M +0D", showOtherMonths: true,
      selectOtherMonths: true, dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],showButtonPanel: true });
  });
}else{

 $(document).ready(function() {
    $( "#datepicker" ).datepicker({ minDate: 1, maxDate: "+18M +0D" });
  });

}
 tb.focus();



}
  </script>


</head>
<body>
</br>
</br>

  <input type="radio" id="myradio" name="radiobt" onClick="javascript:focusTextBox();">

<p>Date: <input type="text" id="datepicker" readonly="readonly" /></p>


</body>
</html>
4

1 回答 1

0

你应该考虑使用别的东西。我在我的一个项目中使用了 mobiscroll。它的目标是移动设备。它有很多功能。您想要的是在 mobiscroll 上称为模态显示。在这里查看http://demo.mobiscroll.com/datetime/time

在“显示”选择器上选择“模式”并向下滚动以查看现场演示。

更新

Date & Time Scroller、Select、Image & Text 和 Treelist Scroller 都在 MIT 许可下，可以免费使用

从这里

更新 2

Jquery mobile 和 jquery ui 通常不能很好地工作。由于您想使用 jquery ui 中的 datepicker 解决此问题，因此您要么必须找到一种方法将动态 datepicker div 放入对话框中，要么在显示 datepicker 时，通过将 div 设置为将吸收的页面大小来禁用页面日期选择器外部的所有点击，并禁用在日期选择器外部点击时退出日期选择器的功能。我认为这是很多工作。

于 2013-06-11T07:21:06.140 回答