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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 日期联动选择器 [其中的一些代码值得学习]

Javascript: 一个简单的收缩菜单效果; HTML-CSS群中单选引发的“事件”; 打开超链需要“确认”对话框的方法; 用js实现网页上模仿桌面右键菜单; 可以文本显示的公告栏的js代码; [原创]js与自动伸缩图片自动缩小图片的多浏览器兼容的方法总结; 极致之美：百行代码实现全新智能语言; 表单(FORM)的一些实用效果代码; [原创]提供复制本站内容时出现,该文章转自等字样的js代码; javascript中巧用“闭包”实现程序的暂停执行功能; 给网站上的广告“加速”显示的方法; [原创]jser必看的破解javascript各种加密的反向思维方法; 用javascript代替marquee的滚动字幕效果代码; 静态页面下用javascript操作ACCESS数据库(读增改删)的代码; [原创]由亿起发(eqifa.com)的页面发现顶部的http://16a.us/8.js想到的js解密; [原创]站长必须要知道的javascript广告代码; js defineSetter -给js的 "class"自动增加一个set的属性(方法); Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例; WordPress 插件：CoolCode使用方法与下载; 文档处理系列：随时更新

No. « ‹ 181 182 183 184 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 270 ::

收藏到网摘: n/a

js checkbox全选并将获取值放到input里边 javascript实现的仿51job地址多项选择方式效果

javascript 日期联动选择器，简单的看了下代码非常不错，都考虑到了标准，兼容性也不错。学习js的朋友有福了。

<!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 全选提示:你可先修改部分代码,再按运行]

[参数说明]

复制代码代码如下:

 
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> 

js checkbox全选并将获取值放到input里边 javascript实现的仿51job地址多项选择方式效果

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

评论 (0) All