web-dev-qa-db-ja.com

HTMLのテキストボックスクリックでカレンダーを表示する方法

Htmlでcalendarを表示したいときにテキストボックスをクリックしますを選択し、そのカレンダーから日付を選択してからselected dateを表示しますthatテキストボックスに表示されます。

javascriptjqueryhtmlhtml5
13
Vinoth

HTML5以降、<input type="date" />は問題ありません。

デモ： http://jsfiddle.net/8N6KH/

20
Silviu Burcea

jQueryUI Datepicker を参照してください。

関連するjQuery UIライブラリを含めると、次のように簡単になります。

スクリプト：

$(function() {
    $( "#datepicker" ).datepicker();
});

HTML：

<input type="text" id="datepicker" />

長所：

  • x-browserの互換性について徹底的にテストされているため、問題はありません。
  • 個別のcssファイル。お好みに応じてカスタマイズできます。
5
ta-run

jquery-uiを使用してみてください

<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

<script>   
    $(function() {
         $( "#calendar" ).datepicker();   
    }); 
</script>

<p>Calendar: <input type="text" id="calendar" /></p>

詳細

3
D.clixer

ええ、HTML5のdatepickerを使用してさまざまな問題に遭遇します。私は同じ問題に直面しました。これを確認してください DatePicker Demo 、このプラグインで問題を解決しました。完全なデモを備えた非常に優れた柔軟な日付ピッカープラグイン。モバイルブラウザとも完全に互換性があり、jquery mobileと統合することもできます。

1
ajitksharma

必要なのは jQuery UI Datepicker

demo とソースコードを確認してください。

1
Victor

Javascript htmlカレンダーウィジェットを使用する必要があります。

これを試してみてください カレンダービューウィジェット .

ここにJquery Mobile日付ボックスへのリンクがあります- JQM datebox

1
Maulik Vora

HTML日付ピッカー this を参照できます。

0
nikinup

jQuery Mobileには日付ピッカーもあります。 ソース

次のファイルを含めるだけで、

  <script src="jQuery.ui.datepicker.js"></script>
  <script src="jquery.ui.datepicker.mobile.js"></script>
0
Starx