0

I am using the jQuery UI datepicker to display the datepicker for my mobile application. I am re using the CSS and JS files from http://jqueryui.com/datepicker/. My requirement is, when the datepicker popup it should hide the background screen and user should not have any control over the main screen until he/she chooses the date. It should work on all mobile devices. Can anybody provide the solution for this?

This is my sample HTML page that have created to test the similar functionality.

<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 に答える