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

Web アプリケーションの人気が高まるにつれ、多くの開発者は、ユーザーが日付を選択できるように Web サイトまたはアプリケーションにカレンダーを実装する必要があります。 JavaScript を使用すると、シンプルかつ強力なカレンダーを簡単に作成できます。この記事では、JavaScript を使用してカレンダーを実装する基本的な手順を説明し、サンプル コードを示します。

1. HTML スケルトン

まず、カレンダーをホストするための HTML フレームワークが必要です。 <div> 要素を作成し、JavaScript で操作できるように一意の ID を割り当てる必要があります。この <div> 要素には 2 つの入力ボックスとボタンを含める必要があります。1 つの入力ボックスは選択した日付を表示するために使用され、もう 1 つは新しい日付の入力を受け取るために使用されます。

2. 現在の日付の取得

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

3. カレンダーの構築

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

4. 日付選択の処理

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

5. ボタン機能の追加

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

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

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

コードサンプル:

HTML:

<div id="calendar">
  <input type="text" id="selectedDate" placeholder="Select date">
  <input type="text" id="newDate" placeholder="Enter date">
  <button id="calBtn">V</button>
  <table id="calendarTable"></table>
</div>

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 サイトの他の関連記事を参照してください。