はじめに
自宅の趣味管理システムで日付入力をしたく。
カレンダー入力を簡単に実装できないものかと調べて、jQuery-uiに辿り着きました。
その後、HTML5の type="date" の存在も知ったので記事に残そうと思います。
同じようにカレンダー入力を実装したい方の参考になれば幸いです。
その１ jquery-ui
バージョン
jquery-3.7.1
jquery-ui-1.14.1
サンプル
※ Geminiにサンプルを作ってもらいました。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker サンプル</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
<script>
$(function() {
$("#jsiDatepicker").datepicker({
dateFormat: "yy-mm-dd"
});
$('#jsiDatepicker').datepicker('setDate', new Date());
});
</script>
</head>
<body>
<p>日付を選択してください: <input type="text" id="jsiDatepicker"></p>
</body>
</html>
入力イメージ
その２ HTML5のtype="date"
サンプル
※ Geminiにサンプルを作ってもらいました。
<!DOCTYPE html>
<html>
<head>
<title>日付入力のサンプル</title>
</head>
<body>
<form>
<label for="date">日付を選択してください:</label>
<input type="date" id="date" name="date">
<input type="submit" value="送信">
</form>
<script>
// 現在の日付を取得し、YYYY-MM-DD形式に変換する関数
function getToday() {
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0'); // 月は0から始まるため+1、2桁になるように0埋め
const day = String(today.getDate()).padStart(2, '0'); // 日を2桁になるように0埋め
return `${year}-${month}-${day}`;
}
// input要素に現在の日付を設定
document.getElementById('date').value = getToday();
</script>
</body>
</html>
入力イメージ
