javascript 日期聯動選擇器 [其中的一些代碼值得學習]

2019-11-21 00:54:19

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> DateSelector </title> <style>     body {         margin: 0px;         padding: 0px;         font-size: 12px;     }     #year, #month, #date{         width: 60px;         margin-right: 3px;     } </style> <script>     var $ = function(id) { return 'string' == typeof id ? document.getElementById(id) : id; };     var Extend = function(destination, source) {         for(var pro in source) {             destination[pro] = source[pro];         }         return destination;     }     var addEvent = function(obj, type, fn) {         if(obj.addEventListener) {             obj.addEventListener(type, fn, false);             return true;         }else if(obj.attachEvent) {             obj['e'+type+fn] = fn;             obj[type+fn] = function(){                 obj['e'+type+fn](window.event);             }             obj.attachEvent('on'+type, obj[type+fn]);             return true;         }         return false;     }     /*!      *    DateSelector      *      * Copyright (c) 2009 GoodNess2010      * Date: 2009-12-15 (星期二)      */     function DateSelector(idYear, idMonth, idDate, options) {         var D = new Date();         this.year = $(idYear);         this.month = $(idMonth);         this.date = $(idDate);         this.nowYear = D.getFullYear();         this.nowMonth = D.getMonth() + 1;         this.nowDate = D.getDate();         Extend(this, this.setOptions(options));     };     DateSelector.prototype = {         setOptions: function(options){             // 默認項             this.options = {                 floorYear: 5,            // 距當前年份前5年                 ceilYear: 7,            // 距當前年份后7年                 onStart: function(){}, // 前置事件                 onEnd: function(){}        // 結束事件             };             return Extend(this.options, options || {});         },         createOption: function(container, start, end, sign){             sign = sign || start;             var _num = parseInt(end-start+1, 10); container.options.length = _num;             for(var i = 0; i < _num; i++) {                 container.options[i].text = container.options[i].value = start + i;             }             container.selectedIndex = (sign-start >= _num ? _num-1 : sign-start);         },         getDate: function(y, m){             return new Date(y, m, 0).getDate();         },         getSelText: function(sel) {             return sel.options[sel.selectedIndex].text;         },         changeDate: function(bindO){             var _this = this;             addEvent(bindO, 'change', function(){                 var y = _this.getSelText(_this.year), m = _this.getSelText(_this.month), d = _this.getSelText(_this.date);                 _this.createOption(_this.date, 1, _this.getDate(y, m), d);                 _this.onEnd();             });         },         bindEvents: function(){             var _this = this;             this.changeDate(this.year); this.changeDate(this.month);             addEvent(this.date, 'change', function(){ _this.onEnd(); });         },         init: function(){             var _startYear = parseInt(this.nowYear - this.floorYear, 10);             var _endYear = parseInt(this.nowYear + this.ceilYear, 10);             var _endDate = this.getDate(this.nowYear, this.nowMonth, 0);             this.createOption(this.year, _startYear, _endYear, this.nowYear);             this.createOption(this.month, 1, 12, this.nowMonth);             this.createOption(this.date, 1, _endDate, this.nowDate);             this.bindEvents();             this.onStart();         }     }; </script> </head> <body>     <select id="year"></select><select id="month"></select><select id="date"></select>     <span id="info"></span>     <script>         var dateSelector = new DateSelector('year', 'month', 'date', {floorYear: 1});                 dateSelector.onStart = dateSelector.onEnd = function(){             $('info').innerHTML = this.getSelText(this.year) + '年' +                                  ('0' + this.getSelText(this.month)).slice(-2) + '月' +                                  ('0' + this.getSelText(this.date)).slice(-2) + '日';         }         dateSelector.init();     </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

[參數說明]

復制代碼代碼如下:

 
var dateSelector = new DateSelector(年下拉ID, 月下拉ID, 日下拉ID, {floorYear: 向前幾年, ceilYear: 向后幾年}); 
dateSelector.onStart = dateSelector.onEnd = function(){ // 自定義開始結束事件 
$('info').innerHTML = this.getSelText(this.year) + '年' + 
('0' + this.getSelText(this.month)).slice(-2) + '月' + 
('0' + this.getSelText(this.date)).slice(-2) + '日'; 
} 
dateSelector.init(); // 初始化開始 

[說明文字]

這里生成option的方法選擇了中規中矩的options[i].text = options[i].value = i;

期間用過一個這個方法:

container.options[container.options.length] = new Option(i, i, false, (i == sign ? true : false))
這個new Option有4個參數可用(text, value, defaultSelected, selected); 最后一個參數可以設置選中.

但一直沒有查到官方資料. 在IE6中也遇到了BUG.大家有用過的請指正.

BUG演示

這個在IE7,IE8,FF3等都沒問題.但在IE6就會選中的是前一個.現在還未知原因. (經過確認好像是IE Tester的問題.那么下面這個方案也是個簡潔的生成option方案)

測試代碼:

復制代碼代碼如下:

 
<select id="year"></select> 
<script type="text/javascript"> 
<!-- 
var osel = document.getElementById('year'); 
var sign = 2008; 
for(var i = 2001; i < 2010; i++) { 
osel.options[osel.options.length] = new Option(i, i, false, (i == sign ? true : false)); 
} 
//--> 
</script> 