生年月日ドロップダウンメニュー効果を実現する純JS

4823 ワード

Webページを作成する際、ユーザーに登録アカウントページを提供する必要がある場合があります.ユーザー登録設計には多くの情報があります.その中には生年月日に関するものがあります.ユーザー体験のため、ユーザーに手動で入力させたくありません.HTML 5のdateは、現在多くのブラウザでサポートされているわけではありません.そのため、JSで年、月、日の3つのドロップダウンボックスの日付選択を実現することができます.具体的なコードは以下の通りです.
1、birthdayなどのjsファイルを新規作成する.js;


function DateSelector(selYear, selMonth, selDay) {//    
  this.selYear = selYear;
  this.selMonth = selMonth;
  this.selDay = selDay;
  this.selYear.Group = this;
  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) //          4，         Date  
    this.InitSelector(arguments[3].getFullYear(), arguments[3].getMonth() + 1, arguments[3].getDate());
  else if (arguments.length == 6) //          6，                 
    this.InitSelector(arguments[3], arguments[4], arguments[5]);
  else //         
  {
    var dt = new Date();
    this.InitSelector(dt.getFullYear(), dt.getMonth() + 1, dt.getDate());
  }
}
//            --    
DateSelector.prototype.MinYear = 1960;
//            --    ，     getFullYear()
DateSelector.prototype.MaxYear = (new Date()).getFullYear();
//      
DateSelector.prototype.InitYearSelect = function () {
//     OPION     select   
  for (var i = this.MaxYear; i >= this.MinYear; i--) {
//     OPTION  
    var op = window.document.createElement("OPTION");
//   OPTION    
    op.value = i;
//   OPTION     
    op.innerHTML = i;
//      select  
    this.selYear.appendChild(op);
  }
}
//      
DateSelector.prototype.InitMonthSelect = function () {
//     OPION     select   
  for (var i = 1; i < 13; i++) {
//     OPTION  
    var op = window.document.createElement("OPTION");
//   OPTION    
    op.value = i;
//   OPTION     
    op.innerHTML = i;
//      select  
    this.selMonth.appendChild(op);
  }
}
//               
DateSelector.DaysInMonth = function (year, month) {
  var date = new Date(year, month, 0);
  return 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     select   
  for (var i = 1; i <= daysInMonth; i++) {
//     OPTION  
    var op = window.document.createElement("OPTION");
//   OPTION    
    op.value = i;
//   OPTION     
    op.innerHTML = i;
//      select  
    this.selDay.appendChild(op);
  }
}
//        onchange     ，         （ selYear selMonth）
//      Group  （ DateSelector  ，      ）   InitDaySelect         
//   e event  
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.selYear.options.length = 0;
  this.selMonth.options.length = 0;
//     、 
  this.InitYearSelect();
  this.InitMonthSelect();
//    、    
  this.selYear.selectedIndex = this.MaxYear - year;
  this.selMonth.selectedIndex = month - 1;
//      
  this.InitDaySelect();
//        
  this.selDay.selectedIndex = day - 1;
}

2、登録フォームのページで、先ほど書いたjsを引用する