可以选择时间的年历控件js
日期：2014-05-16 浏览次数：20329 次
可以选择时间的日历控件js
<!--
/**//*
* 本日历选择控件由“丁伟峰”(ddwwff@gmail.com)于2008.11.14，根据梅花雨日期控件，和前人经验完善而得。
* 修改的源码来源于“水边”(youbl@126.com)在2007.11.14发布的修改版，
* 在他的基础上，我增加了小时和分钟的选择，另外适当调整了界面效果
* 使用方法：
* (1)只选择日期
* <input onfocus="calendar()" type="text" id="s2"/>
* (2)选择日期和小时及分钟
* <input onfocus="calendarEx()" type="text" id="s2"/>
*/
var cal_Width = 150;//定义日历显示的宽度，至少140
document.write("<div id='meizzCalendarLayer' style='position: absolute; z-index: 9999; width: " + (cal_Width+4).toString() + "px; display: none'>");
document.write("<iframe name='meizzCalendarIframe' scrolling='no' frameborder='0' width='100%' height='100%'></iframe></div>");
function calendarEx()
{
WebCalendar.timeShow = true;
window.meizzCalendarLayer.style.height="218px";//定义日历显示的高度，如果有时间，建议是218
baseCalendar();
}
function calendar()
{
WebCalendar.timeShow = false;
window.meizzCalendarLayer.style.height="193px";//定义日历显示的高度，如果只有日期，建议是195
baseCalendar();
}
function WebCalendar() //初始化日历的设置
{
this.regInfo = "梅花雨日期控件(ver3.5) 关闭的快捷键：[Esc]";
this.dayShow = 38; //定义页面上要显示的天数,不能小于35,或大于39
this.daysMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
this.day = new Array(this.dayShow); //定义日历展示用的数组
this.dayObj = new Array(this.dayShow); //定义日期展示控件数组
this.dateStyle = null; //保存格式化后日期数组
this.objExport = null; //日历回传的显示控件
this.eventSrc = null; //日历显示的触发控件
this.inputDate = null; //转化外的输入的日期(d/m/yyyy)
this.thisYear = new Date().getFullYear(); //定义年的变量的初始值
this.thisMonth = new Date().getMonth()+ 1; //定义月的变量的初始值
this.thisDay = new Date().getDate(); //定义日的变量的初始值
this.thisHour = new Date().getHours();
this.thisMinute = new Date().getMinutes();
this.today = this.thisDay +"/"+ this.thisMonth +"/"+ this.thisYear; //今天(d/m/yyyy)
this.iframe = window.frames("meizzCalendarIframe"); //日历的 iframe 载体
this.calendar = getObjectById("meizzCalendarLayer"); //日历的层
this.dateReg = ""; //日历格式验证的正则式
this.yearFall = 50; //定义显示的年份下拉框的年差值，如果今年是2000年，这里设置为50，就显示1950－2050
this.format = "yyyy-mm-dd"; //回传日期的格式
this.timeShow = false; //是否返回时间
this.drag = true; //是否允许拖动
this.darkColor = "#95B7F3"; //控件的暗色
this.lightColor = "#FFFFFF"; //控件的亮色
this.btnBgColor = "#E6E6FA"; //控件的按钮背景色
this.wordColor = "#000080"; //控件的文字颜色
this.wordDark = "#DCDCDC"; //控件的暗文字颜色
this.dayBgColor = "#F5F5FA"; //日期数字背景色
this.todayColor = "#FF0000"; //今天在日历上的标示背景色
this.DarkBorder = "#D4D0C8"; //日期显示的立体表达色
this.yearOption = "";
var yearNow = new Date().getFullYear();
yearNow = (yearNow <= 1000)? 1000 : ((yearNow >= 9999)? 9999 : yearNow);
var yearMin = (yearNow - this.yearFall >= 1000) ? yearNow - this.yearFall : 1000;
var yearMax = (yearNow + this.yearFall <= 9999) ? yearNow + this.yearFall : 9999;
yearMin = (yearMax == 9999) ? yearMax-this.yearFall*2 : yearMin;
yearMax = (yearMin == 1000) ? yearMin+this.yearFall*2 : yearMax;
for (var i=yearMin; i<=yearMax; i++) this.yearOption += "<option value='"+i+"'>"+i+"年</option>";
}
var WebCalendar = new WebCalendar();
function document.onclick()
{
if(WebCalendar.eventSrc != window.event.srcElement) hiddenCalendar();
}
function writeIframe()
{
var strIframe = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312'><style>"+
"*{font-size: 12px; font-family: 宋体}"+
".bg{ color: "+ WebCalendar.lightColor +"; cursor: default; background-color: "+ WebCalendar.darkColor +";}"+
"table#tableMain{ width: "+ (cal_Width+2).toString() +"px; hei
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
