JS脚本的日历控件

最新推荐文章于 2018-12-11 11:25:52 发布
最新推荐文章于 2018-12-11 11:25:52 发布
阅读量3.3k 收藏 3
点赞数
分类专栏： Tips Js/VBScript 文章标签： 日历 脚本 date function dropdown html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/downmoon/article/details/400563
版权

<HEAD>
<title>联动案设置</title>

<script src="Calendar.js" type="text/javascript"></script>


< script  language ="javascript"  src ="Calendar.js" ></ script >


</HEAD>
调用方法



     < TD  style ="HEIGHT: 25px" >< FONT  face ="宋体" > 开业时间：
                                                     < asp:textbox  id ="dtOpenTime"  runat ="server"  Width ="133px"  visible ="True" ></ asp:textbox >< INPUT  class ="but"  id ="btndtOpenTimeDate"  style ="WIDTH: 25px; CURSOR: hand; HEIGHT: 24px"
                                                        onclick ="javascript:Cal_dropdown(dtOpenTime)"  type ="button"  value ="..."  name ="btndtOpenTimeDate" ></ FONT ></ TD >



    

脚本文件　Calendar.js

/* ------------------------------------------------------------------------
  日期控件
  function Cal_dropdown(edit,min,max)
    弹出日历，可不给参数min和max，参数edit必须有   

  function Cal_datevalid(edit,min,max)
    检查edit中值是否为大于等于min，小于等于max的有效日期格式字符串。
    是则返回 true，否则返回false
    可不给参数min和max(字符串格式)
    参数edit必须有，如果edit无，则必须是：edit为edit和img的父亲(如span、div)的第一个元素
    
 */

var  Cal_popup  =  window.createPopup();
 var  Cal_edit;
 var  Cal_editdate  =   new  Date();
 var  Cal_maxdate;
 var  Cal_mindate;

 function  Cal_clearTime(thedate)
 {
  thedate.setHours( 0 );
  thedate.setMinutes( 0 );
  thedate.setSeconds( 0 );
  thedate.setMilliseconds( 0 );
}

var  Cal_today  =   new  Date();
Cal_clearTime(Cal_today);

 // 检查日期//
// editctrl：日期控件输入框
//  false: 日期错误

function  ChkCZDate(editctrl)
 {
 if (editctrl.value == '' )
 { alert( ' 请输入日期！ ' )
  editctrl.select();
  editctrl.focus();
   return   false ;}
if ( ! Cal_datevalid(editctrl, ' 1910-1-1 ' , ' 3000-1-1 ' ))
 {
alert( ' 日期格式不正确,日期有效范围为1910年到3000年 ' );
editctrl.focus();
 return   false ;
}
else
  return   true ;
}
 
 

 

 function  Cal_decDay(thedate,days)
 {
   if  ( ! days) days  =   1 ;
  thedate.setTime(thedate  -  days * 24 * 60 * 60 * 1000 );
}

function  Cal_incMonth(year,month)
 {
   if  (month  ==   11 )  {
    month  =   0 ;
    year ++ ;
  }   else  month ++ ;
  Cal_writeHTML(year,month);
}

function  Cal_decMonth(year,month)
 {
   if  (month  ==   0 )  {
    month  =   11 ;
    year -- ;
  }   else  month -- ;
  Cal_writeHTML(year,month);
}

function  Cal_decYear(year,month)
 {
  Cal_writeHTML(year - 1 ,month);
}

function  Cal_incYear(year,month)
 {
  Cal_writeHTML(year + 1 ,month);
}

function  Cal_writeHTML(theyear,themonth)
 {
   var  html =
     ' <div id="Cal_div1" style="width:231px;FONT-SIZE:9pt;background-color:#fffef5;border:black 1px solid"> ' +
     ' <TABLE style="border-bottom:black 1px solid;FONT-SIZE: 9pt;background-color:#0fa8c7;color:white; ' +
     ' padding-top:2px;font-weight:bold;text-align:center"  ' +
     ' cellSpacing="0" cellPadding="0" width="100%" border="0"> ' +
     ' <TR><TD style="cursor:hand" align="left" width=24 οnmοuseοver="this.style.background= '   +
     " '#ffb468'; "   +   ' " '   +   '  οnmοuseοut="this.style.background= '   +   " '#0fa8c7'; "   +   ' " '   +
     '  οnclick="parent.Cal_decYear( '   +  theyear  +   ' , '   +  themonth  +   ' );"  ' +
     ' ><年</TD> ' +
     ' <TD style="cursor:hand" align="left" width=24 οnmοuseοver="this.style.background= '   +
     " '#ffb468'; "   +   ' " '   +   '  οnmοuseοut="this.style.background= '   +   " '#0fa8c7'; "   +   ' " '   +
     '  οnclick="parent.Cal_decMonth( '   +  theyear  +   ' , '   +  themonth  +   ' );"  ' +
     ' ><月</TD> ' +
     ' <TD align="center"> ' ;
    
  html  +=  theyear  +   ' 年 '   +  (themonth  +   1 )  +   ' 月</TD> ' +
     ' <TD style="cursor:hand" align="right" width=24 οnmοuseοver="this.style.background= '   +
     " '#ffb468'; "   +   ' " '   +   '  οnmοuseοut="this.style.background= '   +   " '#0fa8c7'; "   +   ' " '   +
     '  οnclick="parent.Cal_incMonth( '   +  theyear  +   ' , '   +  themonth  +   ' );"  ' +
     ' >月></TD> ' +
     ' <TD style="cursor:hand" align="right" width=24 οnmοuseοver="this.style.background= '   +
     " '#ffb468'; "   +   ' " '   +   '  οnmοuseοut="this.style.background= '   +   " '#0fa8c7'; "   +   ' " '   +
     '  οnclick="parent.Cal_incYear( '   +  theyear  +   ' , '   +  themonth  +   ' );"  ' +
     ' >年></TD> ' ;
    
  html  +=
     ' </TR></TABLE> ' +
     ' <TABLE style="FONT-SIZE: 9pt;font-weight:bold;text-align:center;border-bottom:black 1px solid"  ' +
     ' cellSpacing="2" cellPadding="0" width="100%" border="0"> ' +
     ' <TR><TD>日</TD><TD>一</TD><TD>二< /TD><TD>三</TD><TD>四</TD><TD>五< /TD><TD>六</TD> ' +
     ' </TR></table> ' +
     ' <TABLE style="FONT-SIZE: 9pt;text-align:center;cursor:hand" cellSpacing="2"  ' +
     ' cellPadding="0" width="100%" border="0"> ' ;

   var  day1  =   new  Date(theyear,themonth, 1 );
   if  (day1.getDay() != 0 )
  Cal_decDay(day1,day1.getDay());  //  日历开始日
   for  ( var  i = 1 ;i <= 6 ;i ++ )  {
    html  +=   ' <TR> ' ;
     for  ( var  j = 1 ;j <= 7 ;j ++ )  {
      html  +=   ' <TD ' ;
       if  (day1.getTime() == Cal_today.getTime())
        html  +=   '  style="color:blue" ' ;
       else
       if  (day1.getTime() == Cal_editdate.getTime())
        html  +=   '  style="color:red" ' ;
       else
       if  (day1.getMonth()  !=  themonth)
        html  +=   '  style="color:#aaaaaa" ' ;
      html  +=   '  οnmοuseοver="this.style.background= '   +
               " '#ffb468'; "   +   ' " ' +
               '  οnmοuseοut="this.style.background= '   +
               " '#fffef5'; "   +   ' " ' ;
      html  +=   '  οnclick="parent.Cal_clickday( ' + day1.getTime()  +   ' );" ' ;
      html  += ' > '   +  day1.getDate()  +   ' </TD> ' ;
      Cal_decDay(day1, - 1 );
    }
    html  +=   ' </TR> ' ;
     if  (day1.getMonth()  !=  themonth)  break ;
  }
    
  html  +=
     ' </TABLE> ' +
     ' <div style="border-top:black 1px solid;text-align:center;padding:2px">今天是  ' +
     ' <span style="color:blue;cursor:hand;text-decoration:underline" οnclick="javascript:parent.Cal_clickday( ' +
    Cal_today.getTime()  +   ' );"> ' +
    Cal_today.getFullYear()  +   ' - '   +  (Cal_today.getMonth() + 1 )  +   ' - '   +  Cal_today.getDate()  +
     ' </span></div> ' +
     ' </div> ' ;
  Cal_popup.document.body.innerHTML  =  html;
   if  (Cal_popup.isOpen)  //  重新调整显示高度
    Cal_popup.show( 0 , Cal_edit.offsetHeight,  231 , Cal_popup.document.all( " Cal_div1 " ).offsetHeight,Cal_edit);
}

//  字符串转换为日期
function  Cal_strtodate(str)
 {
   var  date  =  Date.parse(str);
   if  (isNaN(date))  {
    date  =  Date.parse(str.replace( /-/ g, " / " ));  //  识别日期格式：YYYY-MM-DD
     if  (isNaN(date)) date  =   0 ;
  }
   return (date);
}

// 返回日期间相差的天数
function  Cal_DateDiff(Date1, Date2)
 {
     return  (Date2 - Date1) / ( 24 * 60 * 60 * 1000 );
}

// 返回日期间相差的月数(最大误差小于一个月)
function  Cal_MonthDiff(DateA, DateB)
 {
    Date1 = new  Date();
    Date2 = new  Date();
    Date1.setTime(DateA);
    Date2.setTime(DateB);
    months  =  (Date2.getFullYear()  -  Date1.getFullYear())  *   12 ;
    addmonths  =  Date2.getMonth()  -  Date1.getMonth();
    months  =  months  +  addmonths;
     if (Date2.getDate()  <  Date1.getDate())
        months -- ;
     return  months;
}

//  弹出日历，可不给参数min和max，参数edit必须有
function  Cal_dropdown(edit,min,max)  {
   if  ( ! edit)  {
    edit  =  window.event.srcElement.parentElement.children( 0 );
     if  (( ! edit.type)  ||  (edit.type.toLowerCase()  !=   " text " ))  return ;
  }
  Cal_edit  =  edit;
   var  date  =  Cal_strtodate(edit.value);
   if  (date  ==   0 ) date  =  Cal_today.getTime();
   if  (max) Cal_maxdate  =  Cal_strtodate(max);
   else  Cal_maxdate = 0 ;
   if  (min) Cal_mindate  =  Cal_strtodate(min);
   else  Cal_mindate  =   0 ;
  Cal_editdate.setTime(date);
  Cal_writeHTML(Cal_editdate.getFullYear(),Cal_editdate.getMonth());
  Cal_popup.show( 0 , edit.offsetHeight,  231 ,  149 ,edit);
  Cal_popup.show( 0 , edit.offsetHeight,  231 , Cal_popup.document.all( " Cal_div1 " ).offsetHeight,edit);
}

//  点击日期
function  Cal_clickday(day,edit)
 {
   if  (Cal_maxdate  !=   0 ) day  =  Math.min(day,Cal_maxdate);
  day  =  Math.max(day,Cal_mindate);
  Cal_editdate.setTime(day);
   var  im;
   var  id;
   if  ((Cal_editdate.getMonth() + 1 ) < 10 )
   {
   im  =  Cal_editdate.getMonth() + 1 ;
   im  =   ' 0 '   +  im;
  }
   else
   im  =  Cal_editdate.getMonth() + 1 ;
   if  ((Cal_editdate.getDate()) < 10 )
   id  =   " 0 " + Cal_editdate.getDate();
   else
   id  =  Cal_editdate.getDate();
  Cal_edit.value  =  Cal_editdate.getFullYear()  +   " - "   +  im  +   " - "
                    +  id;
  Cal_popup.hide();
  Cal_edit.fireEvent( " onkeydown " );
  Cal_edit.focus();
}

function  Cal_datevalid(edit,min,max)
 {
   //  检查edit中值是否为大于等于min，小于等于max的有效日期格式字符串。
 
   var  date  =  Cal_strtodate(edit.value);
   if  (date  ==   0 )  return   false ;
   if  (max)  {
     var  max  =  Cal_strtodate(max);
     if  ((max != 0 ) && (date > max))  return   false ;
  }
   if  (min)  {
     var  min  =  Cal_strtodate(min);
     if  ((min != 0 ) && (date < min))  return   false ;
  }
  date  =   new  Date(date);
  edit.value  =  date.getFullYear()  +   " - "   +  (date.getMonth() + 1 )  +
                " - "   +  date.getDate();
   return   true ;
}

 

                           
downmoon
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript脚本实现日历控件
何哲江的专栏
11-28 1331
js脚本实现日历控件
js 日历控件
weixin_43885818的博客
11-05 295
js 日历控件 当前日期选择计算周一到周五准确时间 <van-calendar v-model="show" type="single" :show-title="false" :show-mark="false" :lazy-rende="false" :max-date="maxDate" :min-date="minDate" :row-height="50" :formatter="fo
javascript日历控件脚本
fengyuanfa的专栏
06-04 1530
javascript日历控件脚本
html js脚本日历控件
05-11
基于javascript脚本的网页日历控件，格式为2013-01-01
js日历控件
tigerzq的专栏
01-05 474
/*------------------------------------------------------------------------  日期控件  function Cal_dropdown(edit,min,max)    弹出日历，可不给参数min和max，参数edit必须有     function Cal_datevalid(edit,min,max)
Delphi关于时间的函数
落叶飘香
01-28 1万+
         use DateUtils;（此单元里有许多关于时间的函数）。我今天就只看了这么多了，还有许多读者自己去看吧。里面有太多的关于时间的函数了，如：输入一个时间，可以提取date或time部分，此月有多少天，比较两个时间的’大小’,…..自己看帮助。function CompareDate(const A, B: TDateTime): TValueRelationship;
纯javascript版日历控件
10-21
【纯JavaScript日历控件详解】 在Web开发中，日历控件是一种常见的交互元素，用于用户选择日期。本文将详细介绍如何使用纯JavaScript创建一个简单的日历控件，无需依赖任何外部库，如jQuery或其他框架。 首先，...
JavaScript脚本 日历控件
04-10
JavaScript脚本日历控件是一种常见的前端交互元素，主要用于网页上的日期选择，为用户提供直观、易用的日历界面。在IE5.0及以上版本的浏览器中，这种控件可以正常运行，提供良好的兼容性，满足大部分网站的需求。...
js 简易的日历控件
06-06
JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页交互和动态效果的实现。在本案例中，我们讨论的是一个“js简易的日历控件”，它旨在提供类似于QQ邮箱中简洁版日历的功能，适合作为网页左下角或后台管理页面...
JS 日历控件源代码
03-18
4. **calendar-setup.js**：这可能是配置或初始化日历控件的脚本，用于设置初始状态和定制选项。开发者可以在此文件中调整控件的行为，如默认显示的月份、是否显示星期等。 5. **calendar-zh.js**：从文件名来看，...
calendar.js插件使用
热门推荐
lyf_ldh的博客
12-14 3万+
 jQuery日历插件编写(jquery.calendar.js)： 目前比较难解决的问题是： 1、皮肤问题，虽然可以自定义皮肤，但是使用起来还是有一定的困难。 样式预览： 默认皮肤1： 自定义皮肤2：(深蓝) 自定义皮肤3：(大红) 自定义皮肤4:炫酷黑 调用： [javascript] view plain copy
JS 时间控件
大蘑菇
01-27 124
[code="js"] var fixedX = -1 // x position (-1 if to appear below control) var fixedY = -1 // y position (-1 if to appear below control) var startAt = 1 // 0 - sunday ; 1 - monday var s...
二，日历控件
shibaozhao的专栏
10-08 394
/*------------------------------------------------------------------------  日期控件  function Cal_dropdown(edit,min,max)    弹出日历，可不给参数min和max，参数edit必须有     function Cal_datevalid(edit,min,m
日期插件原生js库Calendar.js （附demo下载）
测试
12-11 1590
附件为demo下载地址：提取码：mkrh 附件下载 ...
ASP.NET日历控件大全：经典款与农历显示
"asp.net日历控件大集合" 在ASP.NET开发中，日历控件是一种常见的用户界面元素，用于方便用户选择日期。本资源主要汇总了几款在ASP.NET环境中常用的日历控件，包括具有农历显示功能的选项，以满足不同的需求。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值