jQuery Datepickerをカレンダーの状態で表示する

2023年1月22日

環境
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>

実行結果
テキストボックスをクリックすると、カレンダーが表示されます。

jQuery

Posted by arkgame

関連記事: