87,924
社区成员
发帖
与我相关
我的任务
分享[菜鸟自学一]日期联动选择器
摆脱菜鸟.努力实践.现在代码还很菜.但抱着一份请教的心态.和大家一起分享进步.
希望大家多多指正.也希望斑竹能帮我小推荐一下.因为以后想做成和索引.自己督促
自己学习.
代码:
提出疑问:
这里生成option的方法选择了中规中矩的options[i].text = options[i].value = i;
期间用过一个这个方法:
这个new Option有4个参数可用(text, value, defaultSelected, selected); 最后一个参数可以设置选中.
但一直没有查到官方资料. 在IE6中也遇到了BUG.大家有用过的请指正.
测试代码:
希望大家多多指正.也希望斑竹能帮我小推荐一下.因为以后想做成和索引.自己督促
自己学习.
代码:
<!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
* http://www.cnblogs.com/goodness2010/
*
* 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;
},
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);
_this.createOption(_this.date, 1, _this.getDate(y, m));
_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>
提出疑问:
这里生成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.大家有用过的请指正.
测试代码:
<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>
这个在IE7,IE8,FF3等都没问题.但在IE6就会选中的是前一个.现在还未知原因.
...全文
请发表友善的回复…
发表回复
諾临風 2010-06-07
- 打赏
- 举报
不错，学习了。。。哈哈！
SIOSXIAOQIANG 2010-03-27
- 打赏
- 举报
一起学习，共同进步。
dh20156 2009-12-16
- 打赏
- 举报
支持一下 ^_^
GoodNess2010 2009-12-16
- 打赏
- 举报
GoodNess2010 2009-12-15
- 打赏
- 举报
[Quote=引用 7 楼 hookee 的回复:]
IE6 测下来也是选中2008
[/Quote]
hookee大哥 你说的是IE8测试我说的那个BUG么? 晕 为啥在我的IE6就有问题呢...
IE6 测下来也是选中2008
[/Quote]
hookee大哥 你说的是IE8测试我说的那个BUG么? 晕 为啥在我的IE6就有问题呢...
hookee 2009-12-15
- 打赏
- 举报
IE6 测下来也是选中2008
GoodNess2010 2009-12-15
- 打赏
- 举报
[Quote=引用 3 楼 zswang 的回复:]
firefox中选年份后又得重新选月份。
[/Quote]
清洁工.. 我在Firefox/3.5.5在测试没发现你的问题
你是说选中年份 月份被重置了么?
firefox中选年份后又得重新选月份。
[/Quote]
清洁工.. 我在Firefox/3.5.5在测试没发现你的问题
你是说选中年份 月份被重置了么?
jol_boy 2009-12-15
- 打赏
- 举报
IE6的bug吧~~
chrome_ 2009-12-15
- 打赏
- 举报
jf
王集鹄 2009-12-15
- 打赏
- 举报
firefox中选年份后又得重新选月份。
王集鹄 2009-12-15
- 打赏
- 举报
GoodNess2010 2009-12-15
- 打赏
- 举报
GoodNess2010 2009-12-15
- 打赏
- 举报
我提出的BUG 貌似是ietester的问题. 大家谁有IE6也给测下 谢谢
GoodNess2010 2009-12-15
- 打赏
- 举报
谢谢 伴水兄的意见 现在已经改为 日期不变了
http://dl.dropbox.com/u/3362522/DateSelector.html
http://dl.dropbox.com/u/3362522/DateSelector.html
GoodNess2010 2009-12-15
- 打赏
- 举报
[Quote=引用 9 楼 zswang 的回复:]
口我原来是号数都要重新选，这样不好哇。
[/Quote]
呃... 这个合理性 我当时也想了. 如果号数不重选
如果月份是3月31日 我切换到2月 就让它显示28号?
口我原来是号数都要重新选，这样不好哇。
[/Quote]
呃... 这个合理性 我当时也想了. 如果号数不重选
如果月份是3月31日 我切换到2月 就让它显示28号?
王集鹄 2009-12-15
- 打赏
- 举报
口我原来是号数都要重新选，这样不好哇。
