JavaScriptを使用してカレンダーを作成する方法

2. 現在の日付の取得

JavaScript では、Date オブジェクトを使用して現在の日付を取得します。 getDate() メソッドを使用して現在の月の日付を取得し、getFull Year() メソッドを使用して現在の年を取得できます。

3. カレンダーの構築

次に、カレンダーを構築する必要があります。 table 要素を使用して単純なカレンダーを作成できます。 for ループを使用して、日付を含むテーブル セルを生成できます。注意すべき点の 1 つは、各月の最初の日が必ずしも日曜日であるとは限らないため、最初のセルのインデックス値を使用して、どの日付から開始するかを決定する必要があることです。

4. 日付選択の処理

ユーザーが日付を選択できるようにするには、JavaScript を使用して入力ボックスのイベントをリッスンし、新しい日付が入力されたときにカレンダーを更新します。日付が選択されています。 Date オブジェクトを使用して 2 つの日付を比較し、それらの間の日数を取得できます。選択した日付が現在の日付より大きい場合は、カレンダーを前方にスクロールできます。そうでない場合は、カレンダーを後方にスクロールできます。

5. ボタン機能の追加

最後に、ユーザーがボタンをクリックしたときにカレンダーを表示または非表示にする機能をドロップダウン ボタンに追加する必要があります。 CSS スタイルを使用し、ボタンにイベント リスナーを追加して表示/非表示を切り替えることで、カレンダーを非表示または表示できます。

いくつかの追加機能は次のとおりです:

• クラスを追加して、現在選択されている日付とホバーされた日付を強調表示します
• 週末と平日を区別します
• 年/月をまたぐ問題を解決する

コードサンプル:

HTML:

   V  

CSS:

#calendar { position: relative; } #calendar input[type="text"] { padding: 5px; border: 1px solid #ccc; font-size: 16px; } #calendar table { display: none; position: absolute; top: 30px; left: 0; border-collapse: collapse; } #calendar td { padding: 5px; text-align: center; cursor: pointer; } #calendar .currentDay { background-color: #B6D9FA; } #calendar .hoverDay { background-color: #EAEAEA; } #calendar .weekend { color: red; }

JavaScript:

以上がJavaScriptを使用してカレンダーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。