Question

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

这是我为测试类似功能而创建的示例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>

Answer 1

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

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

更新

日期＆amp; Time Scroller，Select，Image＆amp;文本和Treelist滚动条在MIT许可下，可以免费使用

来自here

更新2

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

如何在Jquery mobile中开发日期选择器，以便在弹出时覆盖整个手机屏幕

1 个答案: