以下が実装例となります。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
</head>
<body>
<h1>日時入力</h1>
<div>
<label for="startDateTime">開始日時:</label>
<input type="text" id="startDateTime" name="startDateTime" readonly>
</div>
<div>
<label for="endDateTime">終了日時:</label>
<input type="text" id="endDateTime" name="endDateTime" readonly>
</div>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
// flatpickrの初期化
flatpickr("#startDateTime", {
enableTime: true,
dateFormat: "Y-m-d H:i",
locale: "ja"
});
flatpickr("#endDateTime", {
enableTime: true,
dateFormat: "Y-m-d H:i",
locale: "ja"
});
</script>
</body>
</html>
ジョークを追加した場合の実装例：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
</head>
<body>
<h1>日時入力</h1>
<p>プロジェクトの開始日時と終了日時を入力しましょう。</p>
<div>
<label for="startDateTime">開始日時:</label>
<input type="text" id="startDateTime" name="startDateTime" readonly>
</div>
<div>
<label for="endDateTime">終了日時:</label>
<input type="text" id="endDateTime" name="endDateTime" readonly>
</div>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
// flatpickrの初期化
flatpickr("#startDateTime", {
enableTime: true,
dateFormat: "Y-m-d H:i",
locale: "ja"
});
flatpickr("#endDateTime", {
enableTime: true,
dateFormat: "Y-m-d H:i",
locale: "ja"
});
// ジョークを表示する関数
function tellJoke() {
const jokes = [
"Why don't scientists trust atoms? Because they make up everything!",
"I'm reading a book about anti-gravity. It's impossible to put down!",
"Did you hear about the mathematician who's afraid of negative numbers? He will stop at nothing to avoid them!",
"I used to be a baker, but I couldn't make enough dough.",
"Why did the scarecrow win an award? Because he was outstanding in his field!",
];
const randomIndex = Math.floor(Math.random() * jokes.length);
const joke = jokes[randomIndex];
alert(joke);
}
// ボタンがクリックされたときにジョークを表示
const jokeButton = document.getElementById("tellJokeButton");
jokeButton.addEventListener("click", tellJoke);
</script>
</body>
</html>
