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

2020-11-27 来源：小侦探旅游网

<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> 
 
 <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方案)

测试代码:
代码如下:

显示全文

全部栏目

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