javascript 日期联动选择器 [其中的一些代码值得学习]

<!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>

频道导航

javascript 日期联动选择器 [其中的一些代码值得学习]

您可能感兴趣的文章: