日历控件

最新推荐文章于 2023-02-28 11:32:44 发布
最新推荐文章于 2023-02-28 11:32:44 发布
阅读量1.7k 收藏
点赞数
分类专栏： JAVASCRIPT 文章标签： 日历 function layer border date button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baby97/article/details/2199964
版权

index.html

<html>
<body>
<script src="Calendar.js"></script>
<script>
EnabledDate=new Date(CurrentYear,CurrentDate.getMonth(),CurrentDay-1);
showday(CurrentMonth.toString());
</script>
<input type="text" name="btime" readonly οnclick="getdate(this);" size="15" />
</body>
</html>

Calendar.js

// JScript 文件
window.iif=function(fstr){return typeof(fstr)=="string"?document.getElementById(fstr):fstr}
var StarDate=1900;
var EndDate=2099;
var EnabledDate=new Date(1900,0,1);
var CurrentDate=new Date();
var CurrentYear=CurrentDate.getFullYear();
var CurrentMonth=CurrentDate.getMonth()+1;
var CurrentDay=CurrentDate.getDate();
var OutObj;
//取控件坐标
function CPos(x, y)
{
    this.x = x;
    this.y = y;
}

function GetObjPos(ATarget)
{
    var target = ATarget;
    var pos = new CPos(target.offsetLeft, target.offsetTop);
   
    var target = target.offsetParent;
    while (target)
    {
        pos.x += target.offsetLeft;
        pos.y += target.offsetTop;
       
        target = target.offsetParent
    }
   
    return pos;
}
function getdate(obj){
 OutObj=obj;
 //var x=iif(obj)["offsetLeft"];
 //var y=iif(obj)["offsetTop"];
 var pos = GetObjPos(obj);
 var x=pos.x;
 var y=pos.y;
 Layer1.style.pixelLeft=x;
 Layer1.style.pixelTop=y+iif(obj)["offsetHeight"];
 Layer1.style.display=Layer1.style.display=='none'?'block':'none';
 
 Layer1_1.style.height=Layer1["offsetHeight"];
 Layer1_1.style.pixelLeft=x;
 Layer1_1.style.pixelTop=y+iif(obj)["offsetHeight"];
 Layer1_1.style.display=Layer1_1.style.display=='none'?'block':'none';
}

function outMonth(){
 for(var m=0;m<12;m++){
  iif("AllMonth").cells[m].innerHTML=(m+1).toString()+'月';
  iif("AllMonth").cells[m].style.border='';
  iif("AllMonth").cells[m].style.cursor='hand';
  if(m==(CurrentMonth-1)){
   iif("AllMonth").cells[m].style.border='1px solid #FFA64D';
  }
 }
}
function showday(val){
 var tempcell,tempdate;
 var currMonth=Math.floor(val.replace('月',''));
 CurrentMonth=currMonth;
 CurrentDate=new Date(CurrentYear,CurrentMonth-1,CurrentDay);
 StatDay=new Date(CurrentYear,CurrentMonth-1,1);
 EndDay=new Date(CurrentYear,CurrentMonth-1,MaxDay(StatDay));
 tempcell=6+StatDay.getDay()+1;
 for(var tempi=7;tempi<=48;tempi++){
  iif("AllDay").cells[tempi].innerHTML='';
 }
 for(var day=1;day<=EndDay.getDate();day++){
  tempdate=new Date(CurrentYear,CurrentMonth-1,day);
  if(EnabledDate<tempdate){
   iif("AllDay").cells[tempcell].innerHTML='<a href=javascript:; οnclick="dayclick(AllDay.cells['+tempcell+'],this.innerHTML);" style="text-decoration:none;color:#000000">'+day.toString()+'</a>';
  }
  else
   iif("AllDay").cells[tempcell].innerHTML=day;
  if(day==CurrentDay){
   setDayStyle(iif("AllDay").cells[tempcell]);
  }
  tempcell++;
 }
 if(CurrentDay>EndDay.getDate())
  setDayStyle(iif("AllDay").cells[tempcell-1]);
}
function dayclick(obj,txt){
 if(typeof(obj)=='object')
  setDayStyle(obj);
 CurrentDay=txt;
 OutObj.value=CurrentYear.toString()+'-'+CurrentMonth.toString()+'-'+CurrentDay.toString();
 divclose();
}
function setDayStyle(obj){
 for(var tempi=7;tempi<=48;tempi++){
  iif("AllDay").cells[tempi].style.fontstyle='';
  iif("AllDay").cells[tempi].style.background='';
  iif("AllDay").cells[tempi].style.fontweight='';
  iif("AllDay").cells[tempi].style.border='';
 }
 iif(obj).style.background='#F0F0F0';
 iif(obj).style.fontstyle='italic';
 iif(obj).style.fontweight='bold';
 iif(obj).style.border='1px solid #FFA64D';
}
function MaxDay(fDate){
 var newdate=new Date(fDate.getFullYear(),fDate.getMonth()+1,0)
 return newdate.getDate();
}
function NextYear(obj,fYear){
 var currYear=Math.floor(fYear.replace('年',''));
 if(currYear<EndDate){
  iif(obj).innerHTML=(currYear+1).toString()+'年';
  CurrentYear=currYear+1;
 }
 else{
  CurrentYear=EndDate;
  alert('已经到达系统支持的最大年份');
 }
 showday(CurrentMonth.toString());
}
function PrevYear(obj,fYear){
 var currYear=Math.floor(fYear.replace('年',''));
 if(currYear>StarDate){
  iif(obj).innerHTML=(currYear-1).toString()+'年';
  CurrentYear=currYear-1;
 }
 else{
  CurrentYear=StarDate;
  alert('已经到达系统支持的最小年份');
 }
 showday(CurrentMonth.toString());
}
function today(){
 CurrentDate=new Date();
 CurrentYear=CurrentDate.getFullYear();
 CurrentMonth=CurrentDate.getMonth()+1;
 CurrentDay=CurrentDate.getDate();
 showday(CurrentMonth.toString());
 dayclick('',CurrentDay);
}
function divclose(){
 Layer1.style.display='none';
 Layer1_1.style.display='none';
}
function changecheck(obj){
    var check = "<select οnchange='changeYear(this.value,yy);' onBlur='changeYear(this.value,yy);'>";
    for(var y=2030;y>=1930;y--){
        check+="<option value="+y.toString();
  if(y==CurrentYear)
   check+=" selected ";
  check+=">"+y.toString()+"</option>";
    }
    check+="</select>"
    obj.innerHTML=check;
}
function changeYear(val,obj){
    CurrentYear=val;
    var str='<span id="CurY" style="font-weight:bold; font:宋体; font-size:12px;cursor:hand;" οnclick="changecheck(yy);">'+CurrentYear.toString()+'年</span>';
    obj.innerHTML=str;
    showday(CurrentMonth.toString());
}
function CalenderInit(){
 var content;
 content='<div id="Layer1_1" style="position:absolute;width:162px;height:10px;z-index:1000;display:none; "><iframe width=100% height=100% ></iframe></div>';
 content+='<div id="Layer1" style="position:absolute;width:10px;height:10px;z-index:1001;display:none;background-color:#ffffff ">';
 content+='<table width="162" height="25" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #F8BACF;">';
 content+='<tr><td width="20" align="center" style="cursor:hand;font-size:12px;font-family:webdings;" onClick="PrevYear(CurY,CurY.innerHTML);">3</td>';
 content+='<td width="120" align="center" id="yy"><span id="CurY" style="font-weight:bold; font:宋体; font-size:12px;cursor:hand;" οnclick="changecheck(yy);">'+CurrentYear.toString()+'年</span></td>';
 content+='<td width="20" align="center" style="cursor:hand;font-size:12px;font-family:webdings;"onClick="NextYear(CurY,CurY.innerHTML);">4</td>';
 content+='</tr><tr><td colspan="3" align="center"><table width="158" height="25" border="0" cellpadding="0" cellspacing="1" bgcolor="#ffffff" id="AllMonth" ';
 content+='style="font:宋体; font-size:12px;border:1px solid #999999;padding-top:2px;"><tr><td width="24" height="18" align="center" bgcolor="CCCCCC" ';
 content+='οnclick="showday(this.innerHTML);outMonth();" nowrap></td><td width="24" align="center" bgcolor="CCCCCC" οnclick="showday(this.innerHTML);outMonth();" ';
 content+='nowrap></td><td width="24" align="center" bgcolor="CCCCCC" οnclick="showday(this.innerHTML);outMonth();" nowrap></td><td width="26"';
 content+=' align="center" bgcolor="CCCCCC" οnclick="showday(this.innerHTML);outMonth();" nowrap></td><td width="26" align="center" bgcolor="CCCCCC" onclick';
 content+='="showday(this.innerHTML);outMonth();" nowrap></td><td width="26" align="center" bgcolor="CCCCCC" οnclick="showday(this.innerHTML);outMonth();" nowrap>';
 content+='</td></tr><tr><td height="18" align="center" bgcolor="CCCCCC" οnclick="showday(this.innerHTML);outMonth();" nowrap></td><td align="center" bgcolor';
 content+='="CCCCCC" οnclick="showday(this.innerHTML);outMonth();" nowrap></td><td align="center" bgcolor="CCCCCC" οnclick="showday(this.innerHTML);outMonth();"';
 content+=' nowrap></td><td align="center" bgcolor="CCCCCC" οnclick="showday(this.innerHTML);outMonth();" nowrap></td><td align="center" bgcolor="CCCCCC" onclick';
 content+='="showday(this.innerHTML);outMonth();" nowrap></td><td align="center" bgcolor="CCCCCC" οnclick="showday(this.innerHTML);outMonth();" nowrap></td>';
 content+='</tr></table></td></tr></table><table id="AllDay" width="162" height="25" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #F8BACF;';
 content+=' padding-top:3px; padding-bottom:1px; padding-left:2px; padding-right:2px; font:宋体; font-size:12px"><tr bgcolor="#F8BACF"><td align="center">日';
 content+='</td><td align="center">一</td><td align="center">二</td><td align="center">三</td><td align="center">四</td><td align="center">五</td><td align';
 content+='="center">六</td></tr><tr><td align="center" style="color:#FF0000;"></td><td align="center"></td><td align="center"></td><td align="center"></td>';
 content+='<td align="center"></td><td align="center"></td><td align="center" style="color:#FF0000;"></td></tr><tr><td align="center" style="color:#FF0000">';
 content+='</td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center" ';
 content+='style="color:#FF0000"></td></tr><tr><td align="center" style="color:#FF0000;"></td><td align="center"></td><td align="center"></td><td ';
 content+='align="center"></td><td align="center"></td><td align="center"></td><td align="center" style="color:#FF0000"></td></tr><tr><td align="center" style';
 content+='="color:#FF0000"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td ';
 content+='align="center" style="color:#FF0000"></td></tr><tr><td align="center" style="color:#FF0000"></td><td align="center"></td><td align="center"></td>';
 content+='<td align="center"></td><td align="center"></td><td align="center"></td><td align="center" style="color:#FF0000"></td></tr><tr>';
 content+='<td align="center" style="color:#FF0000"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center">';
 content+='</td><td align="center"></td><td align="center" style="color:#FF0000"></td></tr></table><table width="162" border="0" cellspacing="0"';
 content+=' cellpadding="0"><tr><td width="81" align="center"><input type="button" name="btoday" value="今天" οnclick="today();" style="width:81px"></td>';
 content+='<td align="center"><input type="button" name="bclose" value="关闭" οnclick="divclose();" style="width:81px"></td></tr></table></div>';
 document.write(content);
}
CalenderInit();
outMonth();
showday(CurrentMonth.toString());

 

 

银狐被占用
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
101.qt qml-自定义日历控件2-附带动画效果
抵抗时间扭曲，坚持做一件有意义的事
06-17 555
QianWindow2.5版本及以上提供，源码位于：在源码中提供了一个showComponent属性，该属性可以用户自定义显示层，默认提供的是一个输入框显示，也就是下面这一块区域:text: "选择时间: "YaheiText{"请输入日期" : _qianCalendarInputField.currentDateTime.toLocaleString(Qt.locale(), "ddd yyyy/MM/dd")print("你选择了：", currentDateTime)
Gbase 8s内置函数之日期函数
因为吃过天津一家超好吃的八珍豆腐从而改名为八珍豆腐的博客
01-20 1900
Gbase 8s的内置函数包含标量函数、聚合函数、窗口函数以及其他的函数。 其中标量函数又包含数学函数、字符串函数、日期函数。 本次介绍日期函数及其使用例句: SYSDATE/CURRENT/TODAY select sysdate as f_date from dual; select current as f_date from dual; select today as f_today from dual; LAST_DAY select last_day(date('02/18/20
python判断一个月的天数,如何在Python中获取两个日期之间的特定月份的天数
weixin_42101056的博客
11-23 268
I have two date fields campaign_start_date and campaign_end_date. I want to count the number of days in each month that comes in-between the campaign_start_date and campaign_end_date.eg:campaign_start...
python处理时间和日期_python 处理时间和日期
weixin_39628180的博客
12-08 220
->快速获取本月月初，或任意指定日期current_date = datetime.datetime.now().replace(day1=1)->获取月末的日期# 获取当月第一天的星期和当月的总天数firstDayWeekDay, monthRange = calendar.monthrange(year, month)# 获取当月最后一天lastDay = datetime.dat...
js 日历控件
weixin_48495574的博客
02-28 1110
仿日历的js代码
html中下拉日历控件,HTML5之日历控件
weixin_40006963的博客
06-03 3552
HTML5定义了几个与日期有关的新控件。支持日期控件的浏览器会提供一个方便的下拉式日历，供用户选择。以下测试和截图都是在谷歌浏览器完成的，其他浏览器可能略有差异。1、日期时间控件HTML代码：JS操作代码：//获取日期控件对象var oTimer = document.getElementById("myTime");console.log(oTimer);//获取时间值字符串var value ...
Android日历控件方法,Android日历控件的实现方法
weixin_36295010的博客
05-26 3602
本文实例为大家分享了Android日历控件的实现代码，供大家参考，具体内容如下1、效果图：2、弹窗Dialog：SelectDateDialog：public class SelectDateDialog {private static final String TAG = "SelectDateDialog";private Dialog dialog;private TextView date...
Android 自定义日历控件
魑魅魍魉9527
11-10 2520
【代码】Android 自定义日历控件。
winform日历控件
霍城延的随笔
12-25 821
分享一个漂亮的winform自定义控件，做考勤、日程管理、计划最好的自定义控件了，能够添加备注等等。 源码下载：https://download.csdn.net/download/u010919083/13778724
前端日历控件
boyames的博客
08-25 982
前端日历控件 最简单，使用html自带的type <input type="date" placeholder="请输入项目名称" id="time" class="width_30"> 效果如下：
VBA EXCEL制作日历控件
最新发布
03-17
在EXCEL中，可以通过双击单元格，调出日历控件，通过对日历控件的操作，将所选日期更新到单元格中，该控件代码完全开放免费，供大家学习和使用，感兴趣的同学可以多多关注www.allmlp.com，让我们共同成长共同学习。
winform自定义日历控件
04-19
本案例中，我们讨论的是如何创建一个"winform自定义日历控件"，模仿百度的日历展示样式。这个自定义控件通常会包含日期选择、事件标记、颜色定制等功能，以提供更加友好和个性化的用户体验。 在C#中，我们可以继承`...
VC MFC日历控件ocx activex
04-25
"VC MFC日历控件OCX ActiveX"是Microsoft Visual C++（简称VC）MFC（Microsoft Foundation Classes）框架下的一种控件，用于创建具有日历功能的应用程序。这种控件基于ActiveX技术，也称为OCX（OLE Control ...
介绍一个ActiveX日历控件.ocx
01-21
"ActiveX日历控件.ocx"就是这样一个专门用于显示日期和时间的组件。 日历控件是用户界面设计中的常见元素，它允许用户方便地选择日期，常用于事件预订、任务管理或任何形式的日期输入。在ActiveX框架下，这个`.ocx`...
C# Winform 自定义 日程日历控件Demo.zip
10-21
本文将深入探讨如何利用C# WinForm来创建一个自定义的日程日历控件，旨在帮助开发者实现更高效、更个性化的日程管理功能。 首先，理解C# WinForm的基础是必要的。WinForm是.NET Framework提供的一个用于构建桌面...
如何用JS取得单选框radiobox和复选框checkbox当前选中的值
银狐的专栏
06-06 9034
单选框示例：function chec(){ for(i=0;i  if(document.form1.u_input[i].checked == true){   alert(document.form1.u_input[i].value);   return false;   break;  } }}           投票：                             
chrome跨域访问iframe的元素
银狐的专栏
10-11 6343
chrome跨域访问iframe的元素
Ajax方式的留言板
银狐的专栏
12-27 4264
ajax.js//************************  建立XML对象  **********************function InitAjax(){    var http_request = false;    if (window.XMLHttpRequest){        http_request = new XMLHttpRequest();      
多关键字搜索结果中关键字加红突出显示
银狐的专栏
08-23 3465
a.aspx string s_Key="我是 中国 打倒"; %> //ftype为搜索类型：内容或标题，用来分别加红不同的搜索类型 function ReplaceKeyWord(css,ftype){  var a_key = ''.split(' ');  var fval = '';  for(var i=1;i   fval +='$'+i;  }  fval
纯JavaScript实现的日历控件
"纯javascript版日历控件的实现与解析" 在网页开发中，日历控件是一种常见的交互元素，常用于输入日期或者展示日期选择。本篇将详细介绍一个纯JavaScript实现的日历控件，无需依赖任何外部库，如jQuery等。开发者只...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值