下载地址: https://www.helloweba.net/javascript/263.html
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>jQuery 年月日 (生日) 选择器</title>
- <style>
- </style>
- <script type="text/javascript" src="jquery.js"></script>
- </head>
- <body>
- <div class="demo">
- <p>
默认值:<br/>
- <label > 生日:</label>
- <select class="sel_year" rel="2000"></select > 年
- <select class="sel_month" rel="2"></select > 月
- <select class="sel_day" rel="14"></select > 日
- </p>
- </div>
- <script type="text/javascript" src="birthday.js"></script>
- <script>
- $(function() {
- $.ms_DatePicker({
- YearSelector: ".sel_year",
- MonthSelector: ".sel_month",
- DaySelector: ".sel_day"
- });
- $.ms_DatePicker();
- });
- </script>
- </body>
- </HTML>
birthday.JS 内容:(来自 GitHub)
- (function($){
- $.extend({
- ms_DatePicker: function (options) {
- var defaults = {
- YearSelector: "#sel_year",
- MonthSelector: "#sel_month",
- DaySelector: "#sel_day",
- FirstText: "--",
- FirstValue: 0
- };
- var opts = $.extend({}, defaults, options);
- var $YearSelector = $(opts.YearSelector);
- var $MonthSelector = $(opts.MonthSelector);
- var $DaySelector = $(opts.DaySelector);
- var FirstText = opts.FirstText;
- var FirstValue = opts.FirstValue;
- // 初始化
- var str = "<option value=\"" + FirstValue + "\">"+ FirstText +"</option>";
- $YearSelector.HTML(str);
- $MonthSelector.HTML(str);
- $DaySelector.HTML(str);
- // 年份列表
- var yearNow = new Date().getFullYear();
- var yearSel = $YearSelector.attr("rel");
- for (var i = yearNow; i>= 1900; i--) {
- var sed = yearSel==i?"selected":"";
- var yearStr = "<option value=\"" + i + "\" "+ sed+">"+ i +"</option>";
- $YearSelector.append(yearStr);
- }
- // 月份列表
- var monthSel = $MonthSelector.attr("rel");
- for (var i = 1; i <= 12; i++) {
- var sed = monthSel==i?"selected":"";
- var monthStr = "<option value=\"" + i + "\" "+sed+">"+ i +"</option>";
- $MonthSelector.append(monthStr);
- }
- // 日列表(仅当选择了年月)
- function BuildDay() {
- if ($YearSelector.val() == 0 || $MonthSelector.val() == 0) {
- // 未选择年份或者月份
- $DaySelector.HTML(str);
- } else {
- $DaySelector.HTML(str);
- var year = parseInt($YearSelector.val());
- var month = parseInt($MonthSelector.val());
- var dayCount = 0;
- switch (month) {
- case 1:
- case 3:
- case 5:
- case 7:
- case 8:
- case 10:
- case 12:
- dayCount = 31;
- break;
- case 4:
- case 6:
- case 9:
- case 11:
- dayCount = 30;
- break;
- case 2:
- dayCount = 28;
- if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) {
- dayCount = 29;
- }
- break;
- default:
- break;
- }
- var daySel = $DaySelector.attr("rel");
- for (var i = 1; i <= dayCount; i++) {
- var sed = daySel==i?"selected":"";
- var dayStr = "<option value=\"" + i + "\" "+sed+">"+ i +"</option>";
- $DaySelector.append(dayStr);
- }
- }
- }
- $MonthSelector.change(function () {
- BuildDay();
- });
- $YearSelector.change(function () {
- BuildDay();
- });
- if($DaySelector.attr("rel")!=""){
- BuildDay();
- }
- } // End ms_DatePicker
- });
- })(jQuery);
怎么得到选择的值?
- function getBirthday() {
- var date = "";
- date += $(".sel_year").val();
- date += "-";
- if (parseInt($(".sel_month").val()) < 10) {
- date += "0";
- date += $(".sel_month").val();
- } else {
- date += $(".sel_month").val();
- }
- date += "-";
- if (parseInt($(".sel_day").val()) < 10) {
- date += "0";
- date += $(".sel_day").val();
- } else {
- date += $(".sel_day").val();
- }
- return date;
- }
来源: http://www.jianshu.com/p/49f1444bf715