发布首款支持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	在选中日期时触发

标签: javascript, kitjs, 日历, css, html

纯JS转换Select为Combox，完美实现原select所有功能

纯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();

}

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();

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();

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();

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;}

标签: Javascript combox select美

http://www.cnblogs.com/xueduanyang/archive/2009/01/11/1373575.html