日付ドロップダウンメニューの時刻と日付のjs実装コード

1. まずレンダリングを確認します:

2.js コード
year_month_day.js

コードをコピーします コードは次のとおりです:

year_month_day.js
function DateSelector(sel Year, selMonth, selDay) {
this .selyear = sel Year ;
this.selDay = selDay;
this.selMonth.Group = this;年と月を指定します。 onchange イベントを処理する関数をドロップダウン メニューに追加します。
if (window.document.all != null) // IE
{
this.selyear.attachEvent(" onchange", DateSelector.Onchange);
this.selMonth.attachEvent("onchange", DateSelector.Onchange);
}
else // Firefox
{
this.selyear.addEventListener( "change", DateSelector.Onchange, false);
this.selMonth.addEventListener("change", DateSelector.Onchange, false);
}
if (arguments.length == 4) // If渡されるパラメータの数は 4 で、最後のパラメータは Date オブジェクトである必要があります
this.InitSelector(arguments[3].getFull Year(), argument[3].getMonth() 1, argument[3].getDate( ));
else if (arguments.length = = 6) // 渡されるパラメータの数が 6 個の場合、最後の 3 つのパラメータは最初の年、月、日の値である必要があります
this.InitSelector (arguments[3], argument[4], argument[5]);
else // 現在の日付がデフォルトで使用されます
{
var dt = new Date(); InitSelector(dt.getFull Year(), dt.getMonth() 1, dt.getDate()) ;
}
}
// 最大年属性を追加します
DateSelector.prototype.Minyear = 1900 ;
// 最大年属性を追加します
DateSelector.prototype.Max Year = (new Date()).getFull Year();
// 年を初期化します
DateSelector.prototype.Init YearSelect = function ( ) {
// OPION 要素を年に追加するループ select object
for (var i = this.Max Year; i >= this.Min Year; i--) {
// 新しいオブジェクトを作成OPTION object
var op = window.document.createElement("OPTION");
// OPTION オブジェクトの値を設定します
op.value = i; OPTION object
op.innerHTML = i;
// 年選択オブジェクト
this.selyear.appendChild(op);
}
}
// 月を初期化します。
DateSelector.prototype.InitMonthSelect = function () {
// OPION 要素を月選択オブジェクトに追加するループ
for (var i = 1; i / / 新しい OPTION オブジェクトを作成します
var op = window.document.createElement("OPTION");
// OPTION を設定します
op.value = i; OPTION オブジェクトの内容
op.innerHTML = i;
// 月選択オブジェクトに追加
this.selMonth.appendChild(op);
}
}
/ / 年と月に基づいて現在の月の日数を取得します
DateSelector.DaysInMonth = function (year, month) {
var date = new Date(year, month , 0); date.getDate();
}
// 日数を初期化します
DateSelector.prototype.InitDaySelect = function () {
// parseInt 関数を使用して現在の年と月を取得します
var year = parseInt(this.selyear.value);
var month = parseInt(this.selMonth.value);
// 現在の月の日数を取得します
var daysInMonth = DateSelector .DaysInMonth (year, month);
// 元のオプションをクリアします
this.selDay.options.length = 0;
// OPION 要素を日選択オブジェクトに追加する
for ( var i = 1; i <= daysInMonth; i ) {
// 新しい OPTION オブジェクトを作成します
var op = window.document.createElement("OPTION"); OPTION オブジェクト
op.value = i;
// OPTION オブジェクトの内容を設定します
op.innerHTML = i;
// 日選択オブジェクトに追加します
this.selDay .appendChild(op);
}
}
// 年と月の onchange イベントを処理するメソッド。イベント ソース オブジェクト (つまり、selyear または selMonth) を取得します。
// そして、その Group オブジェクトを呼び出します。 (つまり、DateSelector インスタンス。関数によって提供されるコンストラクター InitDaySelect メソッドを参照) 日数を再初期化します
//パラメーター e はイベント オブジェクトです
DateSelector.Onchange = function (e) {
var selector = window.document.all != null ? e.srcElement: e.target;
selector.Group.InitDaySelect()
// パラメータに従ってドロップダウン メニュー オプションを初期化します。 DateSelector.prototype.InitSelector = function (year, month, day) {
// このメソッドは外部から呼び出すことができるため、ここで selyear および selMonth オプションもクリアする必要があります
// さらに、InitDaySelectメソッドにはすでに明確な日のドロップダウン メニューがあるため、ここで作業を繰り返す必要はありません
this.selMonth.options.length = 0;
/ /年と月を初期化します
this.Init YearSelect();
this.InitMonthSelect() ;
//年と月の初期値を設定します
this.selyear.selectedIndex = this.Maxyear - year;
this.selMonth.selectedIndex = month - 1;
//日数を初期化します
this.InitDaySelect()
//日の初期値を設定します
this .selDay.selectedIndex = 日 - 1
}


3.HTML代码
年月日.htm

复制代 代码如下:

年月日.htm

在線运行演示：

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> </title>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。