-1

jquery モバイル日付ピッカーを追加していますが、デフォルトで日付ピッカーが表示されます。代わりに、フォーカスがある場合にのみ表示し、フィールドがフォーカスを失ったときに非表示にしたい...方法はありますか?

追加したページヘッダーで

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet"  href="/css/jquery.ui.datepicker.mobile.css" /> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
  //reset type=date inputs to text
  $( document ).bind( "mobileinit", function(){
    $.mobile.page.prototype.options.degradeInputs.date = true;
  });   
</script>   
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="/js/jQuery.ui.datepicker.js"></script>
<script src="/js/jquery.ui.datepicker.mobile.js"></script>

それを機能させるための本文の日付フィールド：

<label for="date">Date Input:</label>
<input type="date" name="date" id="date" value=""  />
4

1 に答える 1

1

残念ながら、現在、自分で実装する意思がない限り、それを行うことはできません。jQuery Mobileのdatepickerは、ウィジェットとして正式にリリースされることを意図したものではありませんでした（多分いつか、正式に発表されることはありませんでした）。利用可能なコードは、jQueryUIのdatepickerのラッパーにすぎません。

自分で確認できます。pagecreateイベントで日付ピッカーを表示するコードスニペットは次のとおりです。

$( ".ui-page" ).live( "pagecreate", function(){     
    $( "input[type='date'], input:jqmData(type='date')" ).each(function(){
        $(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) );
    }); 
});

あなたはそれを自分で変えることができますが、要点は何ですか。カスタム実装の時間がない場合は、次のサードパーティのjQueryMobile日付ピッカーをご覧ください。

  1. 1つ目はMobiPickです：http：//mobipick.sustainablepace.net/demo.html。シンプル、簡単、そして堅牢。必要なものだけ。お気に入り。

  2. おそらく最良のものは：http：//mobiscroll.com/です。以前は私のお気に入りでした（それでも、優れたUIが必要な場合はそうです）。主な理由は、優れたUIを備えた堅牢なためです。

  3. また、優れたものはDateboxです：http：//dev.jtsage.com/jQM-DateBox2/。また、堅牢ですが少しバグがあります。

私の他の同様の記事も見てください：https ：//stackoverflow.com/a/13779992/1848600

于 2013-01-21T17:45:14.157 に答える