发布首款支持Shift/Ctrl多选的国产日历控件，界面仿Twitter风格，支持中文日期类型，支持SImpleDateFormat格式，支持change等自定义事件，全中文注释和API，欢迎支持
demo地址：http://xueduany.github.com/KitJs/KitJs/index.html#datepicker
本日历，支持多语言本地化，且中文支持非常好
独家支持日历日期多选操作，按住shift键，多选，和按住ctrl键多选，
shift选择效果 
ctrl选择效果
支持开始日期和结束日期限制
支持自定义事件change，可以方便2次编程
//默认日历
var picker = new $kit.ui.DatePicker();
picker.init();
$kit.el('#J_datePicker').appendChild(picker.picker);
picker.show();
picker.ev({
ev : 'change',
fn : function(e) {
alert(picker.getValue());
}
})
使用方法
var picker = new $kit.ui.DatePicker({
dateFormat : 'yyyy年mm月dd日', //接受和输出的日期格式
language : 'cn',//本地化语言
show : false, //默认是否显示
canMultipleChoose : true, //能否多选
dateStringSeparator : ',', //多选时候输出分隔符
shiftSelectOutType : 'full', //多选时候输出类型，full为将选中的日期全部输出，short为输出选中日期的开头和结尾
shiftSelectOutTypeShortSeparator : '~'//当输出类型为short时，比如选中了3月1日到3月10日，则输出"3月1日~3月10日",简短输出，只有开头+分隔符+结尾
});
picker.init();//执行初始化
更多参数请参考源码https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/widget/DatePicker/datepicker.js
API
| 方法 | 说明 |
| show | 显示 |
| hide | 隐藏 |
| getValue | 返回选中的日期 |
| init | 初始化日历 |
| ev | 注册事件 |
| 自定义事件 | 说明 |
| change | 在选中日期时触发 |
纯JS实现页面select转换为combox控制，支持键盘控制和联想
使用方法：
1.直接在select上添加combox样式
2.使用new combox(obj).transform()将obj转换为combox，obj必须要是select
注意事项：
转换过的combox可以通过原来select的relatedCombox关联找到，需要销毁转换的combox还原原来的select话使用obj.relatedCombox.destroy()，当combox值发生变化后，会激发原select的onchange事件
代码如下
/**
* combox控件 * * @author:xueduanyang
*/
<!-- /*/** * combox控件 xueduanyang 2009.1.5 使用方法，在页面引用combox.css和combox.js * 直接在页面的select元素上加上combox样式即可，不区分大小写，自动将页面的select转换成为combox * 支持键盘上下选择，下拉菜单滚动条自动适应，完美模拟select功能 支持联想 无JS污染，使用方便，功能便捷 * 适用范围，页面的select转换，对于小于1W条以下的select数据完全没有问题，对于数据量过大的select或者ajax远程读取的数据需要重构 */function combox(el) { // 保存select引用指针 this.select = el; el.relatedCombox = this; // 得到select的高度等 var t = el.offsetTop; var l = el.offsetLeft; var w = el.offsetWidth; var h = el.offsetHeight - 2;
while (el = el.offsetParent) { t += el.offsetTop; l += el.offsetLeft;
} this.top = t; this.left = l; this.width = w; this.height = h; this.selectRow = null; this.minWidth = 200; // 关联combox和select this.FnRelateComboxWithSelect = function() { }}
// 创建输入框combox.prototype.createTextBox = function() { var span = document.createElement('span'); this.inptContainer = span; var width = this.minWidth ? (this.width < this.minWidth ? this.width : this.minWidth) : this.width + "px"; span.className = 'combox_input'; span.style.height = this.height + "px"; span.style.width = width; var txtBox = document.createElement('input'); this.txtBox = txtBox; txtBox.type = 'text'; txtBox.setAttribute('autoComplete', 'off'); txtBox.id = 'combox_transform_select_' + (this.select.id ? this.select.id : this.select.name); txtBox.value = this.select.options[this.select.selectedIndex].text; txtBox.className = 'combox_text'; txtBox.style.width = width - 18 + "px"; txtBox.style.height = this.height - 2 + "px"; span.appendChild(txtBox); this.select.parentNode.insertBefore(span, this.select); var block = document.createElement('span'); this.block = block; block.style.width = "16px"; block.style.cursor = 'hand'; block.innerHTML = '◢'; this.dpListBtn = block; span.appendChild(block);}// 创建下拉框combox.prototype.createDpList = function() { var select = this.select; var txtBox = this.txtBox; var selectRow = this.selectRow; // var container = document.createElement("div"); this.dpListContainer = container; container.style.display = 'none'; container.style.position = "absolute"; container.style.width = this.width + "px"; container.style.top = (this.top + this.height) + 1 + "px"; container.style.left = this.left + "px"; container.className = 'combox_container'; container.innerHTML = '<iframe frameborder="0" src="about:blank"></iframe>'; // document.body.appendChild(container); // 列表 var dpList = document.createElement("ul"); this.dpListContainer.dpList = dpList; dpList.className = 'combox_dplist'; container.appendChild(dpList); // 列表每行 for (var i = 0; i < select.options.length; i++) { var row = document.createElement("li"); row.className = 'combox_row'; row.innerHTML = select.options[i].text; row.selectValue = select.options[i].value; row.index = i; // if (select.options[i].selected == true) { selectRow = row; } // dpList.appendChild(row); } if (selectRow == null) { selectRow = dpList.childNodes[0]; } container.onmouseover = function() { var el = document.all ? window.event.srcElement : arguments[0].target; if (el.tagName && el.tagName == 'LI') { selectRow.className = 'combox_row_mouseout'; el.className = 'combox_row_mouseover'; selectRow = el; } } container.onclick = function() { var el = document.all ? window.event.srcElement : arguments[0].target; if (el.tagName && el.tagName == 'LI') { selectRow = el; txtBox.value = el.innerHTML; if (select.value != el.selectValue) { if (el.selectValue == null || el.selectValue == '') { for (var i = 0; i > select.options.length; i++) { if (select.options[i].value == el.selectValue) { select.options[i].selected = true; break; } } select.options[0].selected = true; } else select.value = el.selectValue; if (select.onchange) select.onchange(select); } // 同时我们把下拉的关闭掉。 container.style.display = 'none'; stopEventPropagation(); } } this.txtBox.onkeydown = function() { var keyCode = window.event ? window.event.keyCode : arguments[0].keyCode; // down if (keyCode == 40 && container.style.display != 'none') { var selectRowHeight = 0; for (var i = 0; i < dpList.childNodes.length; i++) { var row = dpList.childNodes[i]; if (selectRow.index >= i) { if (row.style.display != 'none') { selectRowHeight += 20; } } else { if (row.style.display != 'none') { selectRow.className = 'combox_row_mouseout'; selectRow = row; row.className = 'combox_row_mouseover'; break; } } } keyDownMoveScrollTop(keyCode, selectRowHeight); }// up else if (keyCode == 38 && container.style.display != 'none') { if (selectRow.index > 0) { var selectRowHeight = 0; var find = false; for (var i = selectRow.index - 1; i >= 0; i--) { var row = dpList.childNodes[i]; if (row.style.display != 'none') { selectRowHeight += 20; if (!find) { selectRow.className = 'combox_row_mouseout'; selectRow = row; row.className = 'combox_row_mouseover'; find = true; } } } } keyDownMoveScrollTop(keyCode, selectRowHeight - 20); } } this.txtBox.onkeyup = function() { var keyCode = window.event ? window.event.keyCode : arguments[0].keyCode; if (keyCode == 40 || keyCode == 38) { if (selectRow != null) { selectRow.className = 'combox_row_mouseover'; if (container.style.display == 'none') { container.style.display = ''; resetContainerHeight(); resetContainerHeight(); } } return false; } // enter else if (keyCode == 13) { if (container.style.display != 'none') { txtBox.value = selectRow.innerHTML; if (select.value != selectRow.selectValue) { if (selectRow.selectValue == null || selectRow.selectValue == '') { for (var i = 0; i > select.options.length; i++) { if (select.options[i].value = selectRow.selectValue) { select.options[i].selected = true; break; } } } else select.value = selectRow.selectValue; if (select.onchange) select.onchange(select); } container.style.display = 'none'; stopEventPropagation(); return false; } else { for (var i = 0; i < dpList.childNodes.length; i++) { var row = dpList.childNodes[i]; row.style.display = ''; row.className = 'combox_row_mouseout'; } container.style.display = ''; selectRow.className = 'combox_row_mouseover'; resetContainerHeight(); resetContainerHeight(); stopEventPropagation(); return false; } }// esc else if (keyCode == 27) { if (container.style.display != 'none') { container.style.display = 'none'; return false; } else { return false; } }// page down else if (keyCode == 34) { for (var i = 0; i < dpList.childNodes.length; i++) { var row = dpList.childNodes[i]; row.style.display = ''; row.className = 'combox_row_mouseout'; } container.style.display = ''; selectRow.className = 'combox_row_mouseover'; resetContainerHeight(); resetContainerHeight(); return false; } else { var val = this.value; for (var i = 0, row; row = dpList.childNodes[i]; i++) { if (row.innerHTML.indexOf(val) > -1) { row.style.display = ''; } else { row.style.display = 'none'; } } resetContainerHeight(); } if (selectRow != null) selectRow.className = 'combox_row_mouseover'; container.style.display = ''; } // this.txtBox.onfocus = function() { // if (container.style.display != 'none') { // container.style.display = 'none'; // } // } // this.txtBox.onblur = function() { // var el = document.all ? window.event.srcElement : arguments[0].target; // if (el == container) { // return false; // } // finishComboxInput(); // // } this.txtBox.onclick = function() { stopEventPropagation(); } this.dpListBtn.onclick = function() { resetRowDisplay(); if (container.style.display == 'none') { container.style.display = ''; } else { for (var i = 0; i < select.options.length; i++) { if (select.options[i].text == txtBox.value) { if (select.options[i].selected != true) { select.options[i].selected = true; if (select.onchange) select.onchange(select); } break; } if (i == select.options.length - 1) txtBox.value = select.options[select.selectedIndex].text; } for (var i = 0; i < dpList.childNodes.length; i++) { var row = dpList.childNodes[i]; if (row.innerHTML == txtBox.value) { selectRow.className = 'combox_row_mouseout'; selectRow = row; row.className = 'combox_row_mouseover'; break; } } container.style.display = 'none' } resetContainerHeight(); resetContainerHeight(); stopEventPropagation(); } function finishComboxInput() { // 键盘或者鼠标选中的 try { if (txtBox.value == selectRow.innerHTML) { if (select.value != selectRow.selectValue) { if (selectRow.selectValue == null || selectRow.selectValue == '') { for (var i = 0; i > select.options.length; i++) { if (select.options[i].value = selectRow.selectValue) { select.options[i].selected = true; break; } } } else select.value = selectRow.selectValue; if (select.onchange) select.onchange(select); } } else { // 按键后，鼠标选中 if (select.value != selectRow.selectValue) { txtBox.value = selectRow.innerHTML; if (selectRow.selectValue == null || selectRow.selectValue == '') { for (var i = 0; i > select.options.length; i++) { if (select.options[i].value = selectRow.selectValue) { select.options[i].selected = true; break; } } } else select.value = selectRow.selectValue; if (select.onchange) select.onchange(select); } else {// 手输 for (var i = 0; i < select.options.length; i++) { if (select.options[i].text == txtBox.value) { if (select.options[i].selected != true) { select.value = select.options[i].value; if (select.onchange) select.onchange(select); } break; } if (i == (select.options.length - 1)) txtBox.value = select.options[select.selectedIndex].text; } for (var i = 0; i < dpList.childNodes.length; i++) { var row = dpList.childNodes[i]; if (row.innerHTML == txtBox.value) { if (selectRow != null) selectRow.className = 'combox_row_mouseout'; selectRow = row; row.className = 'combox_row_mouseover'; break; } } } } container.style.display = 'none'; } catch (e) { alert(e) } } if (document.addEventListener) { document.body.addEventListener('click', finishComboxInput, false); } else { document.body.attachEvent('onclick', finishComboxInput);// IE } function resetRowDisplay() { var f = true; for (var i = 0, row; row = dpList.childNodes[i]; i++) { row.style.display = ''; row.className = 'combox_row_mouseout'; selectRow.className = 'combox_row_mouseover'; } } // 控制容器的最大高度 function resetContainerHeight() { var minHeight = 0; var selectRowTop = 0; var curRowIsSelected = false; for (var i = 0; i < dpList.childNodes.length; i++) { var row = dpList.childNodes[i]; if (row.style.display != 'none') { minHeight += 20; if (!curRowIsSelected) { if (selectRow != row) { selectRowTop += 20; } else { curRowIsSelected = true; } } } } if (minHeight < 200) { container.style.height = minHeight == 0 ? 20 + 2 + "px" : minHeight + 2 + "px"; } else { container.style.height = 202 + "px"; if (container.style.display == 'none') { } if (selectRow != null && selectRow.style.display != 'none') { container.scrollTop += selectRowTop - container.scrollTop; } else { container.scrollTop = 0; } } } function keyDownMoveScrollTop(keyCode, selectRowHeight) { // down if (keyCode == 40 && container.style.display != 'none') { if (selectRowHeight - container.scrollTop > 180) container.scrollTop += 20; }// up else if (keyCode == 38 && container.style.display != 'none') { if (selectRowHeight < container.scrollTop) container.scrollTop -= 20; } } // 阻止事件传播 function stopEventPropagation() { var event = window.event ? window.event : arguments.callee.caller.arguments[0]; event.cancelBubble = true; event.returnValue = false; if (event.preventDefault) { event.preventDefault(); } if (event.stopPropagation) { event.stopPropagation(); } }}combox.prototype.correctErrData = function() { //}combox.prototype.hideDropList = function() { this.dpListContainer.style.display = 'none';}combox.prototype.transform = function() { // 将原select隐藏 this.FnRelateComboxWithSelect = function() { var key = document.all ? window.event.propertyName : arguments[0].attrName; if (key == 'value') { var el = document.all ? window.event.srcElement : arguments[0].target; if (el.tagName && el.tagName == 'SELECT' && el.relatedCombox != null) { el.relatedCombox.txtBox.value = el.options[el.selectedIndex].text; } } // document.getElementById('combox_transform_select_' // + (p.id ? p.id : p.name)).value = p.options[p.selectedIndex].text; } if (document.addEventListener) { this.select.addEventListener('DOMAttrModified', this.FnRelateComboxWithSelect, false); } else { this.select.attachEvent('onpropertychange', this.FnRelateComboxWithSelect);// IE } // 在原select前面新建一个span，里面套一个text this.createTextBox(); // 下拉列表容器 this.createDpList(); this.correctErrData(); this.select.style.display = 'none';}combox.prototype.isDataCorrect = function() { return this.txtBox.value == this.select.value;};// go go 初始化(function() { function select_transform() { var sel_ary = document.getElementsByTagName('select'); for (var i = 0; i < sel_ary.length; i++) { if (!sel_ary[i].multiple && sel_ary[i].style.display != 'none') { if (hasCss('combox', sel_ary[i].className)) (new combox(sel_ary[i])).transform(); } } } function hasCss(cssName, cssNameAry) { var cssAry = cssNameAry.split(/\s/); for (var i = 0, css; css = cssAry[i]; i++) { if (cssName.toLowerCase() == css.toLowerCase()) { return true; } } return false; } if (document.addEventListener) { window.addEventListener("load", select_transform, false);// FireFox } else { window.attachEvent("onload", select_transform);// IE }})();combox.prototype.destroy = function() { if (document.addEventListener) { this.select.removeEventListener('DOMAttrModified', this.FnRelateComboxWithSelect, false); } else { this.select.detachEvent('onpropertychange', this.FnRelateComboxWithSelect);// IE } if (document.all) { this.dpListContainer.removeNode(true); } else this.dpListContainer.parentNode.removeChild(this.dpListContainer); if (document.all) { this.inptContainer.removeNode(true); } else this.inptContainer.parentNode.removeChild(this.inptContainer); this.FnRelateComboxWithSelect = null; this.select.relatedCombox = null; this.top = null; this.left = null; this.height = null; this.width = null; this.selectRow = null; this.select.style.display = ''; this.select = null;}<!-- */<!--.combox_input{border:1px solid gray;background-color:white;}.combox_text{vertical-align:middle;position:relative;border:none;}<!--.combox_container{background:white;border:1px solid silver;overflow:auto}<!--.combox_dpList{list-style:none;margin:0;padding:0;background-color:#fff}<!--.combox_row{text-indent:4px;height:20px;line-height:20px;font-size:12px;margin:0;padding:0;}<!--.combox_row_mouseover{background-color:gray;color:white;text-indent:4px;height:20px;line-height:20px;font-size:12px;}<!--.combox_row_mouseout{background-color:white;color:black;text-indent:4px;height:20px;line-height:20px;font-size:12px;}