Web アプリケーションの人気が高まるにつれ、多くの開発者は、ユーザーが日付を選択できるように Web サイトまたはアプリケーションにカレンダーを実装する必要があります。 JavaScript を使用すると、シンプルかつ強力なカレンダーを簡単に作成できます。この記事では、JavaScript を使用してカレンダーを実装する基本的な手順を説明し、サンプル コードを示します。
まず、カレンダーをホストするための HTML フレームワークが必要です。 JavaScript では、Date オブジェクトを使用して現在の日付を取得します。 getDate() メソッドを使用して現在の月の日付を取得し、getFull Year() メソッドを使用して現在の年を取得できます。 次に、カレンダーを構築する必要があります。 table 要素を使用して単純なカレンダーを作成できます。 for ループを使用して、日付を含むテーブル セルを生成できます。注意すべき点の 1 つは、各月の最初の日が必ずしも日曜日であるとは限らないため、最初のセルのインデックス値を使用して、どの日付から開始するかを決定する必要があることです。 ユーザーが日付を選択できるようにするには、JavaScript を使用して入力ボックスのイベントをリッスンし、新しい日付が入力されたときにカレンダーを更新します。日付が選択されています。 Date オブジェクトを使用して 2 つの日付を比較し、それらの間の日数を取得できます。選択した日付が現在の日付より大きい場合は、カレンダーを前方にスクロールできます。そうでない場合は、カレンダーを後方にスクロールできます。 最後に、ユーザーがボタンをクリックしたときにカレンダーを表示または非表示にする機能をドロップダウン ボタンに追加する必要があります。 CSS スタイルを使用し、ボタンにイベント リスナーを追加して表示/非表示を切り替えることで、カレンダーを非表示または表示できます。 いくつかの追加機能は次のとおりです: コードサンプル: HTML: CSS: JavaScript: 以上がJavaScriptを使用してカレンダーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
#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; }