SoFunction
Updated on 2025-04-07

Pure JS realizes the effect of the drop-down menu of date of birth [year, month and day]

When creating a web page, you may need to provide the user with a registration account page. User registration design is a lot of information, including about the date of birth. For user experience, you do not want the user to enter it manually. However, many browsers currently do not support the date of HTML5, so you can use JS to realize the date selection of the three drop-down boxes of year, month and day. The specific code is as follows:

1. Create a new js file, such as;

function DateSelector(selYear, selMonth, selDay) {//Define the function   = selYear;
   = selMonth;
   = selDay;
   = this;
   = this;
// Add a function to the year and month drop-down menu to handle onchange events  if ( != null) // IE
  {
    ("onchange", );
    ("onchange", );
  }
  else // Firefox
  {
    ("change", , false);
    ("change", , false);
  }
  if ( == 4) // If the number of parameters passed is 4, the last parameter must be a Date object    (arguments[3].getFullYear(), arguments[3].getMonth() + 1, arguments[3].getDate());
  else if ( == 6) // If the number of parameters passed is 6, the last three parameters must be the initial year, month, and day values    (arguments[3], arguments[4], arguments[5]);
  else // Use the current date by default  {
    var dt = new Date();
    ((), () + 1, ());
  }
}
// Add an attribute of the smallest year - the oldest = 1960;
// Add the attribute of the largest year - the latest year, that is, the current period getFullYear() = (new Date()).getFullYear();
// Initialize year = function () {
// Loop to add OPION elements to the year select object  for (var i = ; i >= ; i--) {
// Create a new OPTION object    var op = ("OPTION");
// Set the value of the OPTION object     = i;
// Set the contents of the OPTION object     = i;
// Add to year select object    (op);
  }
}
// Initialize the month = function () {
// Loop to add OPION elements to month select object  for (var i = 1; i < 13; i++) {
// Create a new OPTION object    var op = ("OPTION");
// Set the value of the OPTION object     = i;
// Set the contents of the OPTION object     = i;
// Add to month select object    (op);
  }
}
// Get the number of days of the month based on year and month = function (year, month) {
  var date = new Date(year, month, 0);
  return ();
}
// Initialization days = function () {
// Use parseInt function to get the current year and month  var year = parseInt();
  var month = parseInt();
// Get the number of days in the month  var daysInMonth = (year, month);
// Clear the original options   = 0;
// Loop to add OPION elements to the day select object  for (var i = 1; i <= daysInMonth; i++) {
// Create a new OPTION object    var op = ("OPTION");
// Set the value of the OPTION object     = i;
// Set the contents of the OPTION object     = i;
// Add to the days select object    (op);
  }
}
// Method for handling year and month onchange events, which gets the event source object (i.e. selYear or selMonth)// and call its Group object (i.e. DateSelector instance, see constructor) to reinitialize the number of days// Parameter e is an event object = function (e) {
  var selector =  != null ?  : ;
  ();
}
// Initialize the drop-down menu option according to the parameters = function (year, month, day) {
// Since this method can be called externally, we also need to clear the options of selYear and selMonth here.// In addition, because the InitDaySelect method already has the clear number of days drop-down menu, there is no need to repeat the work here   = 0;
   = 0;
// Initialize year and month  ();
  ();
// Set the initial values ​​of year and month   =  - year;
   = month - 1;
// Initialization days  ();
// Set the initial value of the number of days   = day - 1;
}

2. In the page in the registration form, refer to the js I just wrote

<script type="text/javascript" src="/js/"></script>
<select ></select>Year
<select ></select>moon
<select ></select>day
<!--完成出生day期的选择--Need to be written in</body>forward-->
<script type="text/javascript">
var selYear = ("selYear");
var selMonth = ("selMonth");
var selDay = ("selDay");
// Create a new instance of the DateSelector class and pass three select objects into itnew DateSelector(selYear, selMonth, selDay, 1995, 1, 17);
</script>
</body>
</html>

Summarize

The above is the pure JS implementation of the drop-down menu effect of the date of birth [year, month, day] introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!