JavaScript Date, Month and Year Dropdowns

This project creates separate day, month, and year dropdowns with JavaScript and preselects today's values. The same pattern is useful for date-of-birth forms, historical dates, and interfaces where separate select controls are required.

const today = new Date();
const currentDay = today.getDate();
const currentMonth = today.getMonth() + 1;
const currentYear = today.getFullYear();

Create Select Options with JavaScript Top ↑

The Option constructor is a concise way to create an option and add it to a select element. document.createElement("option") is equally valid when you need more control.

function addOption(select, text, value, selected = false) {
  const option = new Option(text, value, false, selected);
  select.add(option);
}

Preselect the Current Date Top ↑

getMonth() is zero-based, so January is 0 and December is 11. When option values are 1–12, add 1 to the month number; when comparing against an array index, compare directly with getMonth().

months.forEach((name, index) => {
  addOption(monthSelect, name, index + 1, index === today.getMonth());
});

Use the Correct Number of Days for the Selected Month Top ↑

A simple 1–31 list matches the original project, but a polished form should update the day list when the month or year changes. The last day of any month is available with day 0 of the next month.

function daysInMonth(year, monthNumber) {
  return new Date(year, monthNumber, 0).getDate();
}
console.log(daysInMonth(2028, 2)); // 29

Submission and Validation Top ↑

The selects include name attributes because form submission uses names, not IDs. Client-side JavaScript improves the interface, but the receiving script date-projects2ck.php must still validate the submitted values.

When input type="date" Is Better Top ↑

For many modern forms, <input type="date"> provides a simpler and more accessible date picker. Separate selects are still useful when the UI specifically requires day/month/year controls or when you are teaching dynamic option creation.

See also splitting date strings and the Date reference.

← Date Reference All Date Projects →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: