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>
<!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>
<!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>
実行結果
テキストボックスをクリックすると、カレンダーが表示されます。