`

js时间获取插件

 
阅读更多
Calendar.js: 
/**
 *本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。
 *tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。
 *使用方法：
 * (1)只选择日期   
 * (2)选择日期和小时  
 * (3)选择日期和小时及分钟 
 *设置参数的方法
 * (1)设置日期分隔符    setDateSplit(strSplit);默认为"-"
 * (2)设置日期与时间之间的分隔符  setDateTimeSplit(strSplit);默认为" "
 * (3)设置时间分隔符    setTimeSplit(strSplit);默认为":"
 * (4)设置(1),(2),(3)中的分隔符  setSplit(strDateSplit,strDateTimeSplit,strTimeSplit);
 * (5)设置开始和结束年份    setYearPeriod(intDateBeg,intDateEnd)
 *说明：
 * 默认返回的日期时间格式如同：2005-02-02 08:08
 */
//------------------ 样式定义 ---------------------------//
//功能按钮同样样式
var s_tiannet_turn_base = "height:16px;font-size:9pt;color:white;border:0 solid #CCCCCC;cursor:hand;background-color:#2650A6;";
//翻年、月等的按钮
var s_tiannet_turn = "width:28px;" + s_tiannet_turn_base;
//关闭、清空等按钮样式
var s_tiannet_turn2 = "width:22px;" + s_tiannet_turn_base;
//年选择下拉框
var s_tiannet_select = "width:64px;display:none;";
//月、时、分选择下拉框
var s_tiannet_select2 = "width:46px;display:none;";
//日期选择控件体的样式
var s_tiannet_body = "width:150;background-color:#2650A6;display:none;z-index:9998;position:absolute;" +
  "border-left:1 solid #CCCCCC;border-top:1 solid #CCCCCC;border-right:1 solid #999999;border-bottom:1 solid #999999;";
//显示日的td的样式
var s_tiannet_day = "width:21px;height:20px;background-color:#D8F0FC;font-size:10pt;";
//字体样式
var s_tiannet_font = "color:#FFCC00;font-size:9pt;cursor:hand;";
//链接的样式
var s_tiannet_link = "text-decoration:none;font-size:9pt;color:#2650A6;";
//横线
var s_tiannet_line = "border-bottom:1 solid #6699CC";
//------------------ 变量定义 ---------------------------//
var tiannetYearSt = 1950;//可选择的开始年份
var tiannetYearEnd = 2010;//可选择的结束年份
var tiannetDateNow = new Date();
var tiannetYear = tiannetDateNow.getFullYear(); //定义年的变量的初始值
var tiannetMonth = tiannetDateNow.getMonth()+1; //定义月的变量的初始值
var tiannetDay = tiannetDateNow.getDate();
var tiannetHour = 8;//tiannetDateNow.getHours();
var tiannetMinute = 0;//tiannetDateNow.getMinutes();
var tiannetArrDay=new Array(42);          //定义写日期的数组
var tiannetDateSplit = "-";     //日期的分隔符号
var tiannetDateTimeSplit = " ";    //日期与时间之间的分隔符
var tiannetTimeSplit = ":";     //时间的分隔符号
var tiannetOutObject;      //接收日期时间的对象
var arrTiannetHide = new Array();//被强制隐藏的标签
var m_bolShowHour = false;//是否显示小时
var m_bolShowMinute = false;//是否显示分钟

var m_aMonHead = new Array(12);         //定义阳历中每个月的最大天数
    m_aMonHead[0] = 31; m_aMonHead[1] = 28; m_aMonHead[2] = 31; m_aMonHead[3] = 30; m_aMonHead[4]  = 31; m_aMonHead[5]  = 30;
    m_aMonHead[6] = 31; m_aMonHead[7] = 31; m_aMonHead[8] = 30; m_aMonHead[9] = 31; m_aMonHead[10] = 30; m_aMonHead[11] = 31;
// ---------------------- 用户可调用的函数 -----------------------------//
//用户主调函数－只选择日期
function setDay(obj){
 tiannetOutObject = obj;
 //如果标签中有值，则将日期初始化为当前值
 var strValue = tiannetTrim(tiannetOutObject.value);
 if( strValue != "" ){
  tiannetInitDate(strValue);
 }
 tiannetPopCalendar();
}
//用户主调函数－选择日期和小时
function setDayH(obj){
 tiannetOutObject = obj;
 m_bolShowHour = true;
 //如果标签中有值，则将日期和小时初始化为当前值
 var strValue = tiannetTrim(tiannetOutObject.value);
 if( strValue != "" ){
  tiannetInitDate(strValue.substring(0,10));
  var hour = strValue.substring(11,13);
  if( hour ');
document.write('');
document.write(' 年');
document.write('');
for(var i=tiannetYearSt;i ' + i + '年');
}
document.write('');
document.write('  月');
document.write('');
for(var i=1;i ' + i + '月');
}
document.write('');
//document.write('');
//document.write('');
document.write(' 时');
document.write('');
for(var i=0;i ' + i + '时');
}
document.write('');
document.write('  分');
document.write('');
for(var i=0;i ' + i + '分');
}
document.write('');
document.write('');
//输出一条横线
document.write('');
document.write('');
document.write('');
document.write(' ');
document.write('');
document.write('');
document.write('');
//输出一条横线
document.write('');
document.write('');
document.write(' ');
for(var i =0;i ' + weekName[i] + '');
}
document.write(' ');
document.write('');
//输出天的选择
document.write('');
var n = 0;
for (var i=0;i');
 for (var j=0;j ');
  n ++;
 }
 document.write (' ');
}
document.write (' ');
document.write(' ');
document.write(' ');
document.write('清空'+
    ' 关闭' +
    ' 确定 ' +
    '');
document.write (' ');
document.write('');
document.write('');
//------------------ end 页面显示部分 ---------------------------//
//------------------ 显示日期时间的span标签响应事件 ---------------------------//
//单击年份span标签响应
function spanYearCEvent(){
 hideElementsById(new Array("selTianYear","tiannetMonthHead"),false);
 if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
 if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
 hideElementsById(new Array("tiannetYearHead","selTianMonth","selTianHour","selTianMinute"),true);
}
//单击月份span标签响应
function spanMonthCEvent(){
 hideElementsById(new Array("selTianMonth","tiannetYearHead"),false);
 if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
 if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
 hideElementsById(new Array("tiannetMonthHead","selTianYear","selTianHour","selTianMinute"),true);
}
//单击小时span标签响应
function spanHourCEvent(){
 hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false);
 if(m_bolShowHour) hideElementsById(new Array("selTianHour"),false);
 if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
 hideElementsById(new Array("tiannetHourHead","selTianYear","selTianMonth","selTianMinute"),true);
}
//单击分钟span标签响应
function spanMinuteCEvent(){
 hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false);
 if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
 if(m_bolShowMinute) hideElementsById(new Array("selTianMinute"),false);
 hideElementsById(new Array("tiannetMinuteHead","selTianYear","selTianMonth","selTianHour"),true);
}
//根据标签id隐藏或显示标签
function hideElementsById(arrId,bolHide){
 var strDisplay = "";
 if(bolHide) strDisplay = "none";
 for(var i = 0;i  getMonthCount(tiannetYear,tiannetMonth) ) {
  //如果当前的日大于当月的最大日，则取当月最大日
  tiannetDay = getMonthCount(tiannetYear,tiannetMonth);
 }
}
//在个位数前加零
function addZero(value){
 if(value  999 && tiannetYear  999 && tiannetYear  tiannetYearEnd ) {
  tiannetYearEnd = tiannetYear;
  createOption(document.all.selTianYear,tiannetYear,tiannetYear + "年");
 }
 checkSelect(document.all.selTianYear,tiannetYear);
 tiannetWriteHead();
}
//选择今天
function tiannetToday() {
 tiannetYear = tiannetDateNow.getFullYear();
 tiannetMonth = tiannetDateNow.getMonth()+1;
 tiannetDay = tiannetDateNow.getDate();
 tiannetSetValue(true);
 //tiannetSetDay(tiannetYear,tiannetMonth);
 //selectObject();
}
//往前翻月份
function tiannetPrevMonth() {
 if(tiannetMonth>1){tiannetMonth--}else{tiannetYear--;tiannetMonth=12;}
 tiannetSetDay(tiannetYear,tiannetMonth);
 checkSelect(document.all.selTianMonth,tiannetMonth);
 tiannetWriteHead();
}
//往后翻月份
function tiannetNextMonth() {
 if(tiannetMonth==12){tiannetYear++;tiannetMonth=1}else{tiannetMonth++}
 tiannetSetDay(tiannetYear,tiannetMonth);
 checkSelect(document.all.selTianMonth,tiannetMonth);
 tiannetWriteHead();
}
//向span标签中写入年、月、时、分等数据
function tiannetWriteHead(){
 document.all.tiannetYearHead.innerText = tiannetYear + "年";
 document.all.tiannetMonthHead.innerText = tiannetMonth + "月";
 if( m_bolShowHour )  document.all.tiannetHourHead.innerText = " "+tiannetHour + "时";
 if( m_bolShowMinute ) document.all.tiannetMinuteHead.innerText = tiannetMinute + "分";
 tiannetSetValue(false);//给文本框赋值，但不隐藏本控件
}
//设置显示天
function tiannetSetDay(yy,mm) {
  
 setRealDayCount();//设置当月真实的日
 tiannetWriteHead();
 var strDateFont1 = "", strDateFont2 = "" //处理日期显示的风格
 for (var i = 0; i "
   strDateFont2 = ""
   } else {
    strDateFont1 = "";
    strDateFont2 = ""
   }
   da.innerHTML = strDateFont1 + tiannetArrDay[i] + strDateFont2;
   //如果是当前选择的天，则改变颜色
   if(tiannetArrDay[i] == tiannetDay ) {
    da.style.backgroundColor = "#CCCCCC";
   } else {
    da.style.backgroundColor = "#EFEFEF";
   }
   da.style.cursor="hand"
  } else {
   da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"
  }
 }//end for
 tiannetSetValue(false);//给文本框赋值，但不隐藏本控件
}//end function tiannetSetDay
//根据option的值选中option
function checkSelect(objSelect,selectValue) {
 var count = parseInt(objSelect.length);
 if( selectValue  tiannetYearEnd ) {
  for( var i = tiannetYearEnd+1;i  document.body.offsetWidth - 10    )
  iX = window.event.x - h - 5 ;
 else
  iX = window.event.x + 5;  
 if (iX  document.body.offsetHeight - 10   )
  iY = document.body.scrollTop + document.body.offsetHeight - w - 5 ;
 else
  iY = document.body.scrollTop +window.event.y + 5;  
 if (iY  x && (y + h + 20) > objTop && (objTop+objHeight) >  y && objLeft


a.html: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
        <meta name="ProgId" content="VisualStudio.HTML">
        <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
        <script src="./Calendar.js"></script>
    </head>
    <body>
        (1)只选择日期   <input type="text" name="date"   readOnly onClick="setDay(this);"><br/>
(2)选择日期和小时  <input type="text" name="dateh"  readOnly onClick="setDayH(this);"><br/>
(3)选择日期和小时及分钟 <input type="text" name="datehm" readOnly onClick="setDayHM(this);">

    </body>
</html>
分享到：
| 删除文件目录
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js 时间插件（带时分秒）

    JavaScript时间插件是一种用于网页应用中的工具，它能够帮助开发者创建和管理与时间相关的功能，如显示当前时间、倒计时、计时器等。在网页设计中，尤其是在需要实时更新时间或者创建交互式时间元素的场景下，这类...

    JS 时间插件集合，收集一些比较好的时间插件

    JS时间插件可以帮助开发者更便捷、高效地处理日期和时间展示，提高用户体验。本资源集合包含了多种高质量的时间插件，适用于不同的场景需求，如显示年月日、小时分钟、分钟秒等格式。下面将详细介绍这些插件及其可能...

    js 时间插件

    JavaScript时间插件是一种在网页应用中用于处理时间显示、计算和交互的工具，它使得开发者能够轻松地在前端实现各种时间相关的功能。在JavaScript中，虽然内置了Date对象来处理日期和时间，但有时需要更复杂的操作...

    js原生时间插件（带时分秒）

    总的来说，这个"js原生时间插件（带时分秒）"项目涵盖了JavaScript的基本知识，如DOM操作、事件处理、日期对象的使用，以及CSS样式和布局的设计。通过实践这样的项目，开发者可以深化对JavaScript的理解，提高创建...

    Eclipse的JavaScript插件 JSEditor

    JSEditor是Eclipse中的一个JavaScript开发插件，旨在提升JavaScript开发者的工作效率和代码质量。这个插件提供了丰富的功能，包括语法高亮、自动完成、错误检查和调试工具等。 1. **语法高亮**：JSEditor为...

Magicbox
Global site tag (gtag.js) - Google Analytics