/* * jQuery DateSelect Plugin v0.1 * * Date Select - create a set of month, day, year selects with the days appearing in the days select limited * by the month and year (i.e. handle days in month and leap years) and insert into the matched element(s). * * Any element can be used as the parent element. Fieldset is a semantically sound choice. * * Usage: * <fieldset id="dateOfBirth" /> * $("#dateOfBirth").dateselect(); * * Optionally specify the names (and ids = names) for each select: * $("#dateOfBirth").dateselect( * { * dateName: dateOfBirthDay * monthName: dateOfBirthMonth * yearName: dateOfBirthYear * }); * * Copyright (c) 2007 Justin Knoll * */jQuery.fn.dateselect = function(settings){ settings = jQuery.extend( { dateName: "date", monthName: "month", yearName: "year", minYear: 1900, maxYear: 2020 }, settings); var dateSelect = document.createElement("select"); var yearSelect = document.createElement("select"); var monthSelect = document.createElement("select"); var today = new Date(); return this.each(function() { var parentNode = this; monthSelect.name = settings["monthName"] for (var i=0; i <= 11; i++) { var option = document.createElement("option"); option.value=i; // The year and date in the call to Date's constructor below are arbitrary; // we're just getting the month label. var dateLabel = new Date(1900, i, 1).toString().split(" ")[1]; option.innerHTML = dateLabel; option.selected = (i == today.getMonth()); monthSelect.appendChild(option); } this.appendChild(monthSelect); appendSelect(dateSelect, settings["dateName"], 1, 31, today.getDate()); appendSelect(yearSelect, settings["yearName"], settings["minYear"], settings["maxYear"], today.getFullYear()); $([monthSelect, yearSelect]).change(setDateSelectOptions); function appendSelect(selectNode, name, min, max, selectedIndex) { selectNode.name = name; selectNode.id = name; optionFill(selectNode, min, max, selectedIndex); parentNode.appendChild(selectNode); }; function optionFill(selectNode, min, max, newSelectedValue) { var selectedValue = selectNode.selectedIndex == -1 ? newSelectedValue : selectNode.options[selectNode.selectedIndex].value; $(selectNode).empty(); for (var i=min; i <= max; i++) { var option = document.createElement("option"); option.value=i; option.innerHTML=i; option.selected = (i == selectedValue); selectNode.appendChild(option); } }; function getDaysInMonth(month, year) { month = parseInt(month) + 1; var date = new Date(year, month, 1); // Subtract one day's worth of milliseconds date -= 1000 * 60 * 60 * 24; return new Date(date).getDate(); }; function setDateSelectOptions() { optionFill(dateSelect, 1, getDaysInMonth(monthSelect.value, yearSelect.value)); }; });};