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

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

1. HTML スケルトン

まず、カレンダーをホストするための HTML フレームワークが必要です。 <div> 要素を作成し、JavaScript で操作できるように一意の ID を割り当てる必要があります。この <code><div> 要素には 2 つの入力ボックスとボタンを含める必要があります。1 つの入力ボックスは選択した日付を表示するために使用され、もう 1 つは新しい日付の入力を受け取るために使用されます。 <ol start="2"><li>現在の日付の取得</li></ol> <p>JavaScript では、Date オブジェクトを使用して現在の日付を取得します。 getDate() メソッドを使用して現在の月の日付を取得し、getFull Year() メソッドを使用して現在の年を取得できます。 </p> <ol start="3"><li>カレンダーの構築</li></ol> <p>次に、カレンダーを構築する必要があります。 table 要素を使用して単純なカレンダーを作成できます。 for ループを使用して、日付を含むテーブル セルを生成できます。注意すべき点の 1 つは、各月の最初の日が必ずしも日曜日であるとは限らないため、最初のセルのインデックス値を使用して、どの日付から開始するかを決定する必要があることです。 </p> <ol start="4"><li>日付選択の処理</li></ol> <p>ユーザーが日付を選択できるようにするには、JavaScript を使用して入力ボックスのイベントをリッスンし、新しい日付が入力されたときにカレンダーを更新します。日付が選択されています。 Date オブジェクトを使用して 2 つの日付を比較し、それらの間の日数を取得できます。選択した日付が現在の日付より大きい場合は、カレンダーを前方にスクロールできます。そうでない場合は、カレンダーを後方にスクロールできます。 </p> <ol start="5"><li>ボタン機能の追加</li></ol> <p>最後に、ユーザーがボタンをクリックしたときにカレンダーを表示または非表示にする機能をドロップダウン ボタンに追加する必要があります。 CSS スタイルを使用し、ボタンにイベント リスナーを追加して表示/非表示を切り替えることで、カレンダーを非表示または表示できます。 </p> <p>いくつかの追加機能は次のとおりです: </p> <ul> <li>クラスを追加して、現在選択されている日付とホバーされた日付を強調表示します</li> <li>週末と平日を区別します</li> <li>年/月をまたぐ問題を解決する</li> </ul> <p>コードサンプル:</p> <p>HTML:</p> <pre class="brush:php;toolbar:false">&lt;div&gt;   &lt;input&gt;   &lt;input&gt;   &lt;button&gt;V&lt;/button&gt;   &lt;table&gt;&lt;/table&gt; &lt;/div&gt;</pre> <p>CSS:</p> <pre class="brush:php;toolbar:false">#calendar {   position: relative; } #calendar input[type=&quot;text&quot;] {   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; }</pre> <p>JavaScript:</p>リーリー</div>