发布首款支持Shift/Ctrl多选的国产日历控件，界面仿Twitter风格，支持中文日期类型，支持SImpleDateFormat格式，支持change等自定义事件，全中文注释和API，欢迎支持
发布首款支持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.jsAPI
方法 说明 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();
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;}
标签: Javascript combox select美
http://www.cnblogs.com/xueduanyang/archive/2009/01/11/1373575.html
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于发布首款支持Shift/Ctrl多选的国产日历控件，界面仿Twitter风格，支持中文日期类型，支持的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did49389