发布首款支持Shift/Ctrl多选的国产日历控件,界面仿Twitter风格,支持中文日期类型,支持SImpleDateFormat格式,支持change等自定义事件,全中文注释和API,欢迎支持
![image image](https://images.cnblogs.com/cnblogs_com/xueduanyang/201204/201204122143571553.png)
demo地址:http://xueduany.github.com/KitJs/KitJs/index.html#datepicker
本日历,支持多语言本地化,且中文支持非常好
![image image](https://images.cnblogs.com/cnblogs_com/xueduanyang/201204/201204122143583996.png)
独家支持日历日期多选操作,按住shift键,多选,和按住ctrl键多选,
shift选择效果
ctrl选择效果
支持开始日期和结束日期限制
![image image](https://images.cnblogs.com/cnblogs_com/xueduanyang/201204/201204122144001846.png)
支持自定义事件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 |
注册事件 |
纯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];
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
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';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
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() {
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
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;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
<!-- */
<!--.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;}