html日期选择器小日历样式,超漂亮的网页 日期 时间选择器
action="">
name="textfield" onFocus="CalendarWebControl.show(this,true,this.value);">
请输入日期：
onFocus="CalendarWebControl.show(this,false,this.value);">
请输入日期：
function atCalendarControl(){
var calendar=this;
this.calendarPad=null;
this.prevMonth=null;
this.nextMonth=null;
this.prevYear=null;
this.nextYear=null;
this.goToday=null;
this.calendarClose=null;
this.calendarAbout=null;
this.head=null;
this.body=null;
this.today=[];
this.currentDate=[];
this.sltDate;
this.target;
this.source;
this.addCalendarPad=function(){
document.write("
style='position:absolute;top:100;left:0;width:255;height:187;display:none;'>");
document.write("
width=250>
");
document.write("
style='position:absolute;top:2;left:2;width:250;height:187;background-color:#336699;'>
");
document.write("
");
calendar.calendarPad=document.all.divCalendarpad;
}
this.addCalendarBoard=function(){
var BOARD=this;
var
divBoard=document.createElement_x("div");
calendar.calendarPad.insertAdjacentElement("beforeEnd",divBoard);
divBoard.style.cssText="position:absolute;top:0;left:0;width:250;height:187;border:0
outset;background-color:buttonface;";
var
tbBoard=document.createElement_x("table");
divBoard.insertAdjacentElement("beforeEnd",tbBoard);
tbBoard.style.cssText="position:absolute;top:2;left:2;width:248;height:10;font-size:9pt;";
tbBoard.cellPadding=0;
tbBoard.cellSpacing=1;
trRow =
tbBoard.insertRow(0);
calendar.calendarAbout=calendar.insertTbCell(trRow,0,"-","center");
calendar.calendarAbout.title="帮助 快捷键:H";
calendar.calendarAbout.οnclick=function(){calendar.about();}
tbCell=trRow.insertCell(1);
tbCell.colSpan=5;
tbCell.bgColor="#99CCFF";
tbCell.align="center";
tbCell.style.cssText =
"cursor:default";
calendar.head=tbCell;
tbCell=trRow.insertCell(2);
calendar.calendarClose =
calendar.insertTbCell(trRow,2,"x","center");
calendar.calendarClose.title="关闭 快捷键:ESC或X";
calendar.calendarClose.οnclick=function(){calendar.hide();}
trRow =
tbBoard.insertRow(1);
calendar.prevYear =
calendar.insertTbCell(trRow,0,"<
calendar.prevYear.title="上一年
快捷键:↑";
calendar.prevYear.οnmοusedοwn=function(){
calendar.currentDate[0]--;
calendar.show(calendar.target,calendar.returnTime,calendar.currentDate[0]+"-"+calendar.formatTime(calendar.currentDate[1])+"-"+calendar.formatTime(calendar.currentDate[2]),calendar.source);
}
calendar.prevMonth =
calendar.insertTbCell(trRow,1,"
calendar.prevMonth.title="上一月
快捷键:←";
calendar.prevMonth.οnmοusedοwn=function(){
calendar.currentDate[1]--;
if(calendar.currentDate[1]==0){
calendar.currentDate[1]=12;
calendar.currentDate[0]--;
}
calendar.show(calendar.target,calendar.returnTime,calendar.currentDate[0]+"-"+calendar.formatTime(calendar.currentDate[1])+"-"+calendar.formatTime(calendar.currentDate[2]),calendar.source);
}
calendar.goToday =
calendar.insertTbCell(trRow,2,"今天","center",3);
calendar.goToday.title="选择今天
快捷键:T";
calendar.goToday.οnclick=function(){
if(calendar.returnTime) calendar.sltDate=calendar.today[0]+"-"+calendar.formatTime(calendar.today[1])+"-"+calendar.formatTime(calendar.today[2])+"
"+calendar.formatTime(calendar.today[3])+":"+calendar.formatTime(calendar.today[4])
else
calendar.sltDate=calendar.today[0]+"-"+calendar.formatTime(calendar.today[1])+"-"+calendar.formatTime(calendar.today[2]);
calendar.target.value=calendar.sltDate;
calendar.hide();
//calendar.show(calendar.target,calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2],calendar.source);
}
calendar.nextMonth =
calendar.insertTbCell(trRow,3,">","center");
calendar.nextMonth.title="下一月
快捷键:→";
calendar.nextMonth.οnmοusedοwn=function(){
calendar.currentDate[1]++;
if(calendar.currentDate[1]==13){
calendar.currentDate[1]=1;
calendar.currentDate[0]++;
}
calendar.show(calendar.target,calendar.returnTime,calendar.currentDate[0]+"-"+calendar.formatTime(calendar.currentDate[1])+"-"+calendar.formatTime(calendar.currentDate[2]),calendar.source);
}
calendar.nextYear =
calendar.insertTbCell(trRow,4,">>","center");
calendar.nextYear.title="下一年
快捷键:↓";
calendar.nextYear.οnmοusedοwn=function(){
calendar.currentDate[0]++;
calendar.show(calendar.target,calendar.returnTime,calendar.currentDate[0]+"-"+calendar.formatTime(calendar.currentDate[1])+"-"+calendar.formatTime(calendar.currentDate[2]),calendar.source);
}
trRow =
tbBoard.insertRow(2);
var cnDateName = new
Array("日","一","二","三","四","五","六");
for (var i = 0; i
< 7; i++) {
tbCell=trRow.insertCell(i)
tbCell.innerText=cnDateName[i];
tbCell.align="center";
tbCell.width=35;
// http://www.codefans.net
tbCell.style.cssText="cursor:default;border:1 solid
#99CCCC;background-color:#99CCCC;";
}
trRow =
tbBoard.insertRow(3);
tbCell=trRow.insertCell(0);
tbCell.colSpan=7;
tbCell.height=97;
tbCell.vAlign="top";
tbCell.bgColor="#F0F0F0";
var
tbBody=document.createElement_x("table");
tbCell.insertAdjacentElement("beforeEnd",tbBody);
tbBody.style.cssText="position:relative;top:0;left:0;width:245;height:103;font-size:9pt;"
tbBody.cellPadding=0;
tbBody.cellSpacing=1;
calendar.body=tbBody;
trRow =
tbBoard.insertRow(4);
tbCell=trRow.insertCell(0);
calendar.prevHours =
calendar.insertTbCell(trRow,0,"-","center");
calendar.prevHours.title="小时调整
快捷键:Home";
calendar.prevHours.οnmοusedοwn=function(){
calendar.currentDate[3]--;
if(calendar.currentDate[3]==-1)
calendar.currentDate[3]=23;
calendar.bottom.innerText=calendar.formatTime(calendar.currentDate[3])+":"+calendar.formatTime(calendar.currentDate[4]);
}
tbCell=trRow.insertCell(1);
calendar.nextHours =
calendar.insertTbCell(trRow,1,"+","center");
calendar.nextHours.title="小时调整
快捷键:End";
calendar.nextHours.οnmοusedοwn=function(){
calendar.currentDate[3]++;
if(calendar.currentDate[3]==24)
calendar.currentDate[3]=0;
calendar.bottom.innerText=calendar.formatTime(calendar.currentDate[3])+":"+calendar.formatTime(calendar.currentDate[4]);
}
tbCell=trRow.insertCell(2);
tbCell.colSpan=3;
tbCell.bgColor="#99CCFF";
tbCell.align="center";
tbCell.style.cssText =
"cursor:default";
calendar.bottom=tbCell;
tbCell=trRow.insertCell(3);
calendar.prevMinutes =
calendar.insertTbCell(trRow,3,"-","center");
calendar.prevMinutes.title="分钟调整 快捷键:PageUp";
calendar.prevMinutes.οnmοusedοwn=function(){
calendar.currentDate[4]--;
if(calendar.currentDate[4]==-1)
calendar.currentDate[4]=59;
calendar.bottom.innerText=calendar.formatTime(calendar.currentDate[3])+":"+calendar.formatTime(calendar.currentDate[4]);
}
tbCell=trRow.insertCell(4);
calendar.nextMinutes =
calendar.insertTbCell(trRow,4,"+","center");
calendar.nextMinutes.title="分钟调整 快捷键:PageDown";
calendar.nextMinutes.οnmοusedοwn=function(){
calendar.currentDate[4]++;
if(calendar.currentDate[4]==60)
calendar.currentDate[4]=0;
calendar.bottom.innerText=calendar.formatTime(calendar.currentDate[3])+":"+calendar.formatTime(calendar.currentDate[4]);
}
}
this.insertTbCell=function(trRow,cellIndex,TXT,trAlign,tbColSpan){
var
tbCell=trRow.insertCell(cellIndex);
if(tbColSpan!=undefined)
tbCell.colSpan=tbColSpan;
var
btnCell=document.createElement_x("button");
tbCell.insertAdjacentElement("beforeEnd",btnCell);
btnCell.value=TXT;
btnCell.style.cssText="width:100%;border:1
outset;background-color:buttonface;";
btnCell.οnmοuseοver=function(){
btnCell.style.cssText="width:100%;border:1
outset;background-color:#F0F0F0;";
}
btnCell.οnmοuseοut=function(){
btnCell.style.cssText="width:100%;border:1
outset;background-color:buttonface;";
}
// btnCell.οnmοusedοwn=function(){
// btnCell.style.cssText="width:100%;border:1
inset;background-color:#F0F0F0;";
// }
btnCell.οnmοuseup=function(){
btnCell.style.cssText="width:100%;border:1
outset;background-color:#F0F0F0;";
}
btnCell.οnclick=function(){
btnCell.blur();
}
return btnCell;
}
this.setDefaultDate=function(){
var dftDate=new Date();
calendar.today[0]=dftDate.getYear();
calendar.today[1]=dftDate.getMonth()+1;
calendar.today[2]=dftDate.getDate();
calendar.today[3]=dftDate.getHours();
calendar.today[4]=dftDate.getMinutes();
}
this.show=function(targetObject,returnTime,defaultDate,sourceObject){
if(targetObject==undefined)
{
alert("未设置目标对象. \n方法: ATCALENDAR.show(obj 目标对象,boolean
是否返回时间,string 默认日期,obj
点击对象);\n\n目标对象:接受日期返回值的对象.\n默认日期:格式为\"yyyy-mm-dd\",缺省为当前日期.\n点击对象:点击这个对象
弹出calendar,默认为目标对象.\n");
return
false;
}
else
calendar.target=targetObject;
if(sourceObject==undefined)
calendar.source=calendar.target;
else
calendar.source=sourceObject;
if(returnTime)
calendar.returnTime=true;
else
calendar.returnTime=false;
var firstDay;
var Cells=new Array();
if((defaultDate==undefined) ||
(defaultDate=="")){
var
theDate=new Array();
calendar.head.innerText =
calendar.today[0]+"-"+calendar.formatTime(calendar.today[1])+"-"+calendar.formatTime(calendar.today[2]);
calendar.bottom.innerText =
calendar.formatTime(calendar.today[3])+":"+calendar.formatTime(calendar.today[4]);
theDate[0]=calendar.today[0]; theDate[1]=calendar.today[1];
theDate[2]=calendar.today[2];
theDate[3]=calendar.today[3];
theDate[4]=calendar.today[4];
}
else{
var
Datereg=/^\d{4}-\d{1,2}-\d{2}$/
var
DateTimereg=/^(\d{1,4})-(\d{1,2})-(\d{1,2})
(\d{1,2}):(\d{1,2})$/
if((!defaultDate.match(Datereg)) &&
(!defaultDate.match(DateTimereg))){
alert("默认日期(时间)的格式不正确！\t\n\n默认可接受格式为:\n1、yyyy-mm-dd \n2、yyyy-mm-dd
hh:mm\n3、(空)");
calendar.setDefaultDate();
return;
}
if(defaultDate.match(Datereg))
defaultDate=defaultDate+"
"+calendar.today[3]+":"+calendar.today[4];
var
strDateTime=defaultDate.match(DateTimereg);
var theDate=new Array(4)
theDate[0]=strDateTime[1];
theDate[1]=strDateTime[2];
theDate[2]=strDateTime[3];
theDate[3]=strDateTime[4];
theDate[4]=strDateTime[5];
calendar.head.innerText =
theDate[0]+"-"+calendar.formatTime(theDate[1])+"-"+calendar.formatTime(theDate[2]);
calendar.bottom.innerText =
calendar.formatTime(theDate[3])+":"+calendar.formatTime(theDate[4]);
}
calendar.currentDate[0]=theDate[0];
calendar.currentDate[1]=theDate[1];
calendar.currentDate[2]=theDate[2];
calendar.currentDate[3]=theDate[3];
calendar.currentDate[4]=theDate[4];
theFirstDay=calendar.getFirstDay(theDate[0],theDate[1]);
theMonthLen=theFirstDay+calendar.getMonthLen(theDate[0],theDate[1]);
//calendar.setEventKey();
calendar.calendarPad.style.display="";
var theRows =
Math.ceil((theMonthLen)/7);
//清除旧的日历;
while
(calendar.body.rows.length > 0) {
calendar.body.deleteRow(0)
}
//建立新的日历;
var n=0;day=0;
for(i=0;i
theRow=calendar.body.insertRow(i);
for(j=0;j<7;j++){
n++;
if(n>theFirstDay &&
n<=theMonthLen){
day=n-theFirstDay;
calendar.insertBodyCell(theRow,j,day);
}
else{
var theCell=theRow.insertCell(j);
theCell.style.cssText="background-color:#F0F0F0;cursor:default;";
}
}
}
//
var
offsetPos=calendar.getAbsolutePos(calendar.source);//计算对象的位置;
if((document.body.offsetHeight-(offsetPos.y+calendar.source.offsetHeight-document.body.scrollTop))
var
calTop=offsetPos.y-calendar.calendarPad.style.pixelHeight;
}
else{
var
calTop=offsetPos.y+calendar.source.offsetHeight;
}
if((document.body.offsetWidth-(offsetPos.x+calendar.source.offsetWidth-document.body.scrollLeft))>calendar.calendarPad.style.pixelWidth){
var
calLeft=offsetPos.x;
}
else{
var
calLeft=calendar.source.offsetLeft+calendar.source.offsetWidth;
}
//alert(offsetPos.x);
calendar.calendarPad.style.pixelLeft=calLeft;
calendar.calendarPad.style.pixelTop=calTop;
}
this.getAbsolutePos = function(el) {
var r = { x: el.offsetLeft, y:
el.offsetTop };
if (el.offsetParent) {
var tmp =
calendar.getAbsolutePos(el.offsetParent);
r.x +=
tmp.x;
r.y +=
tmp.y;
}
return r;
};
/
this.insertBodyCell=function(theRow,j,day,targetObject){
var
theCell=theRow.insertCell(j);
if(j==0) var
theBgColor="#FF9999";
else var
theBgColor="#FFFFFF";
if(day==calendar.currentDate[2]) var theBgColor="#CCCCCC";
if(day==calendar.today[2]) var
theBgColor="#99FFCC";
theCell.bgColor=theBgColor;
theCell.innerText=day;
theCell.align="center";
theCell.width=35;
theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";
theCell.οnmοuseοver=function(){
theCell.bgColor="#FFFFCC";
theCell.style.cssText="border:1 outset;cursor:hand;";
}
theCell.οnmοuseοut=function(){
theCell.bgColor=theBgColor;
theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";
}
theCell.οnmοusedοwn=function(){
theCell.bgColor="#FFFFCC";
theCell.style.cssText="border:1 inset;cursor:hand;";
}
theCell.οnclick=function(){
if(calendar.returnTime) calendar.sltDate=calendar.currentDate[0]+"-"+calendar.formatTime(calendar.currentDate[1])+"-"+calendar.formatTime(day)+"
"+calendar.formatTime(calendar.currentDate[3])+":"+calendar.formatTime(calendar.currentDate[4])
else
calendar.sltDate=calendar.currentDate[0]+"-"+calendar.formatTime(calendar.currentDate[1])+"-"+calendar.formatTime(day);
calendar.target.value=calendar.sltDate;
calendar.hide();
}
}
this.getFirstDay=function(theYear,
theMonth){
var firstDate = new
Date(theYear,theMonth-1,1);
return
firstDate.getDay();
}
this.getMonthLen=function(theYear, theMonth)
{
theMonth--;
var oneDay = 1000 * 60 * 60 *
24;
var thisMonth = new
Date(theYear, theMonth, 1);
var nextMonth = new
Date(theYear, theMonth + 1, 1);
var len =
Math.ceil((nextMonth.getTime() -
thisMonth.getTime())/oneDay);
return len;
}
this.hide=function(){
//calendar.clearEventKey();
calendar.calendarPad.style.display="none";
}
this.setup=function(defaultDate){
calendar.addCalendarPad();
calendar.addCalendarBoard();
calendar.setDefaultDate();
}
this.formatTime = function(str) {
str = ("00"+str);
return str.substr(str.length-2);
}
this.about=function(){
var strAbout = "\nWeb
日历选择输入控件操作说明:\n\n";
strAbout+="-\t: 关于\n";
strAbout+="x\t: 隐藏\n";
strAbout+="<
strAbout+="
上一月\n";
strAbout+="今日\t:
返回当天日期\n";
strAbout+=">\t:
下一月\n";
strAbout+="<
strAbout+="\nWeb日历选择输入控件\tVer:v1.0\t\nDesigned By:wxb
\t\t2004.11.22\t\n";
alert(strAbout);
}
document.οnkeydοwn=function(){
if(calendar.calendarPad.style.display=="none"){
window.event.returnValue=
true;
return true ;
}
switch(window.event.keyCode){
case 27 : calendar.hide();
break; //ESC
case 37 :
calendar.prevMonth.onmousedown(); break;//←
case 38 :
calendar.prevYear.onmousedown();break; //↑
case 39 :
calendar.nextMonth.onmousedown(); break;//→
case 40 :
calendar.nextYear.onmousedown(); break;//↓
case 84 :
calendar.goToday.onclick(); break;//T
case 88 : calendar.hide();
break; //X
case 72 : calendar.about();
break; //H case 36 :
calendar.prevHours.onmousedown(); break;//Home
case 35 :
calendar.nextHours.onmousedown(); break;//End
case 33 :
calendar.prevMinutes.onmousedown();break; //PageUp
case 34 :
calendar.nextMinutes.onmousedown(); break;//PageDown
}
window.event.keyCode = 0;
window.event.returnValue=
false;
}
calendar.setup();
}
var CalendarWebControl = new atCalendarControl();
html日期选择器小日历样式,超漂亮的网页 日期 时间选择器相关推荐
- 超漂亮的网页图文排版
博看文思 相信学习HTML5的小伙伴们一定明白网站首页第一屏排版的重要性,很多时候它能在第一时间内决定用户的去留,特别是目前的扁平化网站,对图文排版要求较高,因为没有花哨的质感特效,重点以展示内容为主 ...
- 微信小程序日期与时间选择器
最近在开发一款微信小程序,需要用到里面的时间选择器(picker),根据它本身的特点以及需要开发的内容,我对时间选择器做了一个简单的demo,大家可以看一下效果图. 效果图: 在微信小程序中,文件按照 ...
- mui日期选择器html,MUI 移动端时间选择器
MUI 移动端时间选择器 MUI 移动端时间选择器 MUI 时间段的选择 1.效果展示 2.html 部分 按钮部分html 选择时间 开始时间 结束时间 3.js 部分 开始时间选择器的js,结束时 ...
- 时间选择器timePicker实现根据当前选择日期(当天/非当天)禁用时间段
文章目录 需求描述 解决 日期选择器datePicker实现只能选择当天及之后的日期 时间选择器timePicker实现根据datePicker选择的日期动态变化开始时间 小结 需求描述 最近在做 ...
- 两种时间选择器的三种使用场景(带效果图)
前言,顺便看一下效果图 在Android 开发中时间选择器的使用场景还是很多的,我这边也是常用的有两种方法,根据不同是使用需求和场景来使用,大家如果在开发中有这种需求的可以看一下本篇 一.DatePi ...
- VantUI时间选择器
前言: 由于页面所需的时间选择器较多,所以我只写了一个弹出层,选择器全部放弹出层里,通过 v-if 控制显示与隐藏. 主要代码: 1.需求主要是实现年月日的选择,type="date&quo ...
- 小程序日期（日历）时间 选择器组件
封装一个小程序日期(日历)时间 选择器组件 简要说明: 一共两个版本 ,date-time-picker 和 date-time-picker-plus. date-time-picker 弹窗层是 ...
- antd 日期时间选择_【UI设计】日期选择器的常见样式总结
来源:海盐社(haiyans7) 作者:青山 在使用各种 APP 的过程中,我们经常会遇到选择日期的场景,比如记账的时候.安排行程的时候.购买车票以及预订酒店的时候.有时我们需要选择一个日期,有时则需 ...
- 使用pyqt5的日期控件做一个小日历方便查看
日历的制作比较简单,因为pyqt5已经自带了相关的日期控件,只需要明白如何调用再加上比较个性化的功能,这个日历的小控件就制作完成了. [阅读全文] 日历实现代码量不多,需要可直接执行的源码在文末获取下 ...
最新文章
- Shell脚本中的并发
- Linux下的iwpriv（iwlist、iwconfig）的简单应用
- Zookeeper_watch机制核心讲解
- python寻路_【Python】 Numpy极简寻路
- 武汉理工计算机学院分数线,武汉理工今年计算机分数线
- nginx 负载均衡 404_Nginx+.Net Core实现项目负载均衡
- WINDOWS2016故障转移群集
- Java编程入门基础知识合集
- 【Python全栈测试开发实战1】搭建测试开发环境
- c语言sqar是double,C语言怎么编写正弦波
- Oracle数据字典表
- TVS 管 和TSS管
- velocity笔记（一）什么是velocity，我们什么时候会使用到这个,基本语法,利用模板生成实体类的各层代码
- 计算机考研全国统一卷子吗,考研是统一考吗?全国同专业试卷是一样的吗?
- 用python tkinter组件实现扫雷游戏
- 智慧路灯杆在智慧科技园的应用方案
- Xmind 8 pro 软件破解教程
- blastn 用于比对短序列
- 通过调用Exiftool可以提取文件名的信息, 设置媒体文件的TagInfo相关信息
- 如何强制删除文件夹？这样操作就能搞定！