https://service.hbrtaiwan.com/public/library/birthdaypicker/bday-picker.js

1/*!
2 * jQuery Birthday Picker: v1.4 - 10/16/2011
3 * http://abecoffman.com/stuff/birthdaypicker
4 *
5 * Copyright (c) 2010 Abe Coffman
6 * Dual licensed under the MIT and GPL licenses.
7 *
8 */
9
10(function( $ ){
11
12	// plugin variables
13	var months = {
14		"short": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
15		"long": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
16		"number": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"] },
17			todayDate = new Date(),
18			todayYear = todayDate.getFullYear(),
19			todayMonth = todayDate.getMonth() + 1,
20			todayDay = todayDate.getDate();
21
22
23	$.fn.birthdaypicker = function( options ) {
24
25		var settings = {
26			"maxAge"        : 120,
27			"minAge"        : 0,
28			"futureDates"   : false,
29			"maxYear"       : todayYear,
30			"dateFormat"    : "middleEndian",
31			"monthFormat"   : "short",
32			"placeholder"   : true,
33			"legend"        : "",
34			"defaultDate"   : false,
35			"fieldName"     : "birthdate",
36			"fieldId"       : "birthdate",
37			"hiddenDate"    : true,
38			"onChange"      : null,
39			"tabindex"      : null,
40			"yearStr"		:'',
41			"monthStr"		:'',
42			"dayStr"		:''
43		};
44
45		return this.each(function() {
46
47			if (options) { $.extend(settings, options); }
48
49			// Create the html picker skeleton
50			var $fieldset = $("<fieldset class='birthday-picker'></fieldset>"),
51					$year = $("<select class='birth-year' name='birth[year]'></select>"),
52					$month = $("<select class='birth-month' name='birth[month]'></select>"),
53					$day = $("<select class='birth-day' name='birth[day]'></select>");
54
55			var $yearStr = $(settings["yearStr"]);
56			var $monthStr = $(settings["monthStr"]);
57			var $dayStr = $(settings["dayStr"]);
58
59			if (settings["legend"]) { $("<legend>" + settings["legend"] + "</legend>").appendTo($fieldset); }
60
61			var tabindex = settings["tabindex"];
62
63			// Deal with the various Date Formats
64			if (settings["dateFormat"] == "bigEndian") {
65				$fieldset.append($year).append($yearStr).append($month).append($monthStr).append($day).append($dayStr);
66				if (tabindex != null) {
67					$year.attr('tabindex', tabindex);
68					$month.attr('tabindex', tabindex++);
69					$day.attr('tabindex', tabindex++);
70				}
71			} else if (settings["dateFormat"] == "littleEndian") {
72				$fieldset.append($day).append($dayStr).append($month).append($monthStr).append($year).append($yearStr);
73				if (tabindex != null) {
74					$day.attr('tabindex', tabindex);
75					$month.attr('tabindex', tabindex++);
76					$year.attr('tabindex', tabindex++);
77				}
78			} else {
79				$fieldset.append($month).append($monthStr).append($day).append($dayStr).append($year).append($yearStr);
80				if (tabindex != null) {
81					$month.attr('tabindex', tabindex);
82					$day.attr('tabindex', tabindex++);
83					$year.attr('tabindex', tabindex++);
84				}
85			}
86
87			// Add the option placeholders if specified
88			if (settings["placeholder"]) {
89				$("<option value='0000'>選擇年份</option>").appendTo($year);
90				$("<option value='00'>選擇月份</option>").appendTo($month);
91				$("<option value='00'>選擇日期</option>").appendTo($day);
92			}
93
94			var hiddenDate;
95			if (settings["defaultDate"]) {
96				var defDate = new Date(settings["defaultDate"] + "T00:00:00"),
97				defYear = defDate.getFullYear(),
98				defMonth = defDate.getMonth() + 1,
99				defDay = defDate.getDate();
100				if (defMonth<10) defMonth="0"+defMonth;
101				if (defDay<10) defDay="0"+defDay;
102				hiddenDate = defYear + "-" + defMonth + "-" + defDay;
103			}
104
105			// Create the hidden date markup
106			if (settings["hiddenDate"]) {
107				$("<input type='hidden' name='" + settings["fieldName"] + "'/>")
108						.attr("id", settings["fieldId"])
109						.val(hiddenDate)
110						.appendTo($fieldset);
111			}
112
113			// Build the initial option sets
114			var startYear = todayYear - settings["minAge"];
115			var endYear = todayYear - settings["maxAge"];
116			if (settings["futureDates"] && settings["maxYear"] != todayYear) {
117				if (settings["maxYear"] > 1000) { startYear = settings["maxYear"]; }
118				else { startYear = todayYear + settings["maxYear"]; }
119			}
120			for (var i=startYear; i>=endYear; i--) { $("<option></option>").attr("value", i).text(i).appendTo($year); }
121			for (var j=0; j<12; j++) { $("<option></option>").attr("value", j+1).text(months[settings["monthFormat"]][j]).appendTo($month); }
122			for (var k=1; k<32; k++) { $("<option></option>").attr("value", k).text(k).appendTo($day); }
123			$(this).append($fieldset);
124
125			// Set the default date if given
126			if (settings["defaultDate"]) {
127				var date = new Date(settings["defaultDate"] + "T00:00:00");
128				$year.val(date.getFullYear());
129				$month.val(date.getMonth() + 1);
130				$day.val(date.getDate());
131			}
132
133			// Update the option sets according to options and user selections
134			$fieldset.change(function() {
135						// todays date values
136				var todayDate = new Date(),
137						todayYear = todayDate.getFullYear(),
138						todayMonth = todayDate.getMonth() + 1,
139						todayDay = todayDate.getDate(),
140						// currently selected values
141						selectedYear = parseInt($year.val(), 10),
142						selectedMonth = parseInt($month.val(), 10),
143						selectedDay = parseInt($day.val(), 10),
144						// number of days in currently selected year/month
145						actMaxDay = (new Date(selectedYear, selectedMonth, 0)).getDate(),
146						// max values currently in the markup
147						curMaxMonth = parseInt($month.children(":last").val()),
148						curMaxDay = parseInt($day.children(":last").val());
149
150				// Dealing with the number of days in a month
151				// http://bugs.jquery.com/ticket/3041
152				if (curMaxDay > actMaxDay) {
153					while (curMaxDay > actMaxDay) {
154						$day.children(":last").remove();
155						curMaxDay--;
156					}
157				} else if (curMaxDay < actMaxDay) {
158					while (curMaxDay < actMaxDay) {
159						curMaxDay++;
160						$day.append("<option value=" + curMaxDay + ">

160" + curMaxDay + "</option>");
161					}
162				}
163
164				// Dealing with future months/days in current year
165				// or months/days that fall after the minimum age
166				if (!settings["futureDates"] && selectedYear == startYear) {
167					if (curMaxMonth > todayMonth) {
168						while (curMaxMonth > todayMonth) {
169							$month.children(":last").remove();
170							curMaxMonth--;
171						}
172						// reset the day selection
173						$day.children(":first").attr("selected", "selected");
174					}
175					if (selectedMonth === todayMonth) {
176							while (curMaxDay > todayDay) {
177									$day.children(":last").remove();
178									curMaxDay -= 1;
179							}
180					}
181				}
182
183				// Adding months back that may have been removed
184				// http://bugs.jquery.com/ticket/3041
185				if (selectedYear != startYear && curMaxMonth != 12) {
186					while (curMaxMonth < 12) {
187						$month.append("<option value=" + (curMaxMonth+1) + ">" + months[settings["monthFormat"]][curMaxMonth] + "</option>");
188						curMaxMonth++;
189					}
190				}
191
192				// update the hidden date
193				if ((selectedYear * selectedMonth * selectedDay) != 0) {
194					if (selectedMonth<10) selectedMonth="0"+selectedMonth;
195					if (selectedDay<10) selectedDay="0"+selectedDay;
196					hiddenDate = selectedYear + "-" + selectedMonth + "-" + selectedDay;
197					$(this).find('#'+settings["fieldId"]).val(hiddenDate);
198					if (settings["onChange"] != null) {
199						settings["onChange"](hiddenDate);
200					}
201				}
202			});
203		});
204	};
205})( jQuery );