jQuery Datepickerをカレンダーの状態で表示する
環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit
jquery 3.6.1
構文
$(“#datepickerのID名").datepicker();
DatepickerはjQueryとjQuery UIの2つのライブラリを使用します。
使用例
<!DOCTYPE html> <html> <head> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.6.1.js"></script> <!-- jQuery UI --> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <style> #cft { width: 100%; padding: 18px; max-width: 550px; margin: 10px auto; border: 1px solid #ffffff; border-radius: 5px; } </style> <script> $(document).ready(function(){ $("#create").datepicker(); }); </script> </head> <body> <div id="cft"> 日付: <input id="create" placeholder="クリックください"> </div> </body> </html>
実行結果
テキストボックスをクリックすると、カレンダーが表示されます。