DIV+JavaScript实现日历控件

最新推荐文章于 2024-04-24 09:22:16 发布
最新推荐文章于 2024-04-24 09:22:16 发布
阅读量2k 收藏 1
点赞数
分类专栏： JavaScript专辑 文章标签： javascript div textbox function 日历 date

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>DIV+JavaScript实现日历控件</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        &nbsp;<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <input id="Button1" type="button" value="button" οnclick="SD(this,'document.all.TextBox1')" /></div>
    </form>
</body>
</html>
<script>
function MD(d){
 //取到本月的最大日期
 for(var i=31;i>=28;i--){
  var tempDate = new Date(d.getFullYear(),d.getMonth(),i)
  if(tempDate.getFullYear()==d.getFullYear()&&d.getMonth()==tempDate.getMonth())return i;
 } 
}
function WC(d,tobj){
//写日历内容
 //var imgpath="nl/images/" //图片路径
 //var seldaypath="selday.gif";
 var curdaypath="currentdate.gif";
 var mstr="一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月";
 var ccd=new Date();//当日日期
 if(d==""||typeof(d)=="undefined")d=new Date();
 //日历表头
 var ss="<table cellpadding=1 bgColor='#021853'><tr><td bgcolor='#ECF2FC'>";
 ss+="<table border=0 cellspacing=0 cellpadding=0 width='' bgColor='#ECF2FC'>";
 ss+="<tr height=22 bgColor='#0A246A'>";
 ss+="<td colspan=2>"
 //item1
 //Year List Mode
 ss+="<select style='heidth:20;width=70px'"
 ss+=" onChange=/"MC(this.value+'-"+(d.getMonth()+1)+"-"+d.getDate()+"','"+tobj+"')/">";
 var yy=parseInt(d.getFullYear());
 for(var j=(yy-50);j<=(yy+50);j++){
  ss+="<option value='"+j+"'";
  ss+=((j==yy)?" selected":"");
  ss+=">"+j+"年</option>";
 }
 ss+="</select>"
 /*
 //innerTable Begin
 //if you want year up and down mode ,please clear this desc flag.
 ss+="<table width=80 border=0 cellspacing=0 cellpadding=0>";
   ss+="<tr>";
    ss+="<td rowspan=2><input name='yv' type='text' size='8' style='width:64px;height=20px'"
 ss+=" value='"+d.getFullYear()+"'></td>"
    ss+="<td width=16 valign='bottom'><img src='Images/yup.gif' width='16' height='9' onMouseDown=/""
 ss+="MC((parseInt(document.all.yv.value)-1)+'-'+"+(d.getMonth()+1)+"+'-'+"+d.getDate()+",'"+tobj+"')/"></td>";
 ss+="</tr>";
 ss+="<tr>";
    ss+="<td valign='top'><img src='Images/ydown.gif' width='16' height='9' οnclick=/"";
 ss+="MC((parseInt(document.all.yv.value)+1)+'-'+"+(d.getMonth()+1)+"+'-'+"+d.getDate()+",'"+tobj+"')/"></td>";
 ss+="</tr>";
 ss+="</table>";
 //inner Table End
 */
 ss+="</td>";
 ss+="<td colspan=2>";
 //item2
 //Month List
 ss+="<select style='height:20px;width:70px'"
 ss+=" onChange=/"MC('"+d.getFullYear()+"-'+this.value+'-"+d.getDate()+"','"+tobj+"')/">";
 var msa=mstr.split(",");
 for(var i=0;i<12;i++){
  ss+="<option value="+(i+1);
  ss+=(d.getMonth()==i)?" selected ":"";
  ss+=">"+msa[i]+"</option>";
 }
 ss+="</select>";
 //month list end
 ss+="</td>";
 ss+="<td colspan=3 onClick='CC()' style='cursor:hand' align='center'>"
 ss+="<font color='#ffffff' style=font-size=9pt></b>关闭日历窗口</b></font></td></tr>";
 ss+="<tr>";
 ss+="<td align=center><font style='color:#0A246A;font-size:9pt'>星期日</font></td>";
 ss+="<td align=center><font style='color:#0A246A;font-size:9pt'>星期一</font></td>";
 ss+="<td align=center><font style='color:#0A246A;font-size:9pt'>星期二</font></td>";
 ss+="<td align=center><font style='color:#0A246A;font-size:9pt'>星期三</font></td>";
 ss+="<td align=center><font style='color:#0A246A;font-size:9pt'>星期四</font></td>";
 ss+="<td align=center><font style='color:#0A246A;font-size:9pt'>星期五</font></td>";
 ss+="<td align=center><font style='color:#0A246A;font-size:9pt'>星期六</font></td>";
 ss+="</tr>";
 ss+="<tr><td colspan=7 bgColor='#0A246A'></td></tr>"
 var mbd = new Date(d.getFullYear(),d.getMonth(),1)//指定日期的1号
 var bd=mbd.getDay();//月份开始的星期
 maxdate = MD(d);//指定日期当月的最大天数
 var cd=d.getDate();//当前日期
 var cr=((maxdate+bd)%7==0)?((maxdate+bd)/7):parseInt((maxdate+bd)/7+1)
 //写日历主体
 for(var i=0;i<cr;i++){
  ss+="<tr>";
  for(var j=0;j<7;j++){
   var tv=(i*7+j-bd+1);
   if((i==0&&j<bd)||tv>maxdate){ss+="<td>&nbsp;</td>"}else{
    ss+="<td align='center' valign='middle' style='cursor:hand;font-size:9pt;' ";
    //if(cd==tv)ss+="background='"+imgpath+seldaypath+"'";
    ss+="οnclick=RD("+tobj+",'"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+tv+"')>";
    if(d.getFullYear()==ccd.getFullYear()&&d.getMonth()==ccd.getMonth()&&ccd.getDate()==tv){
     //当前日期的显示
     //ss+="<div style='position:absolute;width:39px;height:22px;z-index:100;background-image: url(Images/currentdate.gif)'>";
     ss+="<font color=red><b>"+tv+"</b></font>";
     //ss+="</div>"; 
    }else{
     ss+=((cd==tv)?("<font color='green'><b>"+tv+"</b></font>"):tv);
    }
    ss+="</td>";
   }
  }
  ss+="</tr>";
 }
 //表格结束
 ss+="<tr><td colspan=7 align='center'>&nbsp;<font style=font-size=9pt><b>今天:"+ccd.getFullYear()+"-"+(ccd.getMonth()+1)+"-"+ccd.getDate()+"</b></font></td></tr>";
 ss+="</table>";
 ss+="</td></tr></table>"
 return ss; 
}
function SD(sobj,tobj){
 var tt = eval(tobj)
 var ds=tt.value;
 var d;
 if(ds==""){d=new Date()}else{var da=ds.split("-");var d=new Date(da[0],da[1]-1,da[2])}
 if(typeof(document.all.calendar)!="object"){  
   document.body.insertAdjacentHTML("afterBegin","<div id='calendar' style='position:absolute;width:280px;height:160px;display:none;z-index:99'></div>");
 }else{
  document.all.calendar.style.display="none";
 }
 //document.write(WC("",tobj))
 var ttop=sobj.offsetTop;
 if(sobj.clientHeight!="undefined")ttop+=sobj.clientHeight+5;
 var ttleft=sobj.offsetLeft;
 while(sobj=sobj.offsetParent){ttop+=sobj.offsetTop;ttleft+=sobj.offsetLeft;}
 if((ttleft+300)>screen.width)ttleft=screen.width-300;
 document.all.calendar.innerHTML=WC(d,tobj);
 document.all.calendar.style.left=ttleft;
 document.all.calendar.style.top=ttop;
 document.all.calendar.style.display="";
}
function RD(obj,d){
 obj.value = d;
 CC();
}
function CC(){
 document.all.calendar.style.display="none";
}
function MC(dstr,objstr){
 var da=dstr.split("-");var d=new Date(da[0],da[1]-1,da[2]);
 //alert(d.toString())
 document.all.calendar.innerHTML=WC(d,objstr);
}
</script>

sutao_713
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript实现日历控件(年月日关闭按钮)
12-09
经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的过程. 下面是要实现的html结构: <div id=”a”><div id=”head”>”yface”>年:<select id...
通过JS实现页面动态显示时间
m0_72687687的博客
08-11 1223
【代码】通过JS实现页面动态显示时间。
网站时间显示（日历）
lampsunny的专栏
04-10 666
function Year_Month(){ var now = new Date(); var yy = now.getYear(); var mm = now.getMonth()+1; var cl = ''; if (now.getDay() == 0) cl = ''; if (now.getDay() == 6) cl = ''; return(cl + yy + '年
一个简单实用的 JavaScript 日历控件源代码，不依赖第三方库，支持日期、月份、年份视图切换；支持单选、多选、范围和星期选
Python代码大全
12-14 715
一个简单实用的 JavaScript 日历控件！原生 JavaScript 编写，不依赖任何第三方库。支持日期、月份和年份试图切换；支持单选、多选、范围和星期选择模式；界面简介、配置简单、使用方便！
HTML 简单日历制作方法
xiaozhen0610的博客
06-18 7636
新手一枚，不会写什么高大上的博文，一些平时做的小练习，献丑 1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>无标题文档</title> 7 <style> 8 * {margin: 0;padding: 0} .
日历控件源码
成功不必在我，然功力必不唐娟
01-06 1018
前两天需要个简单的日历控件，网上搜了一下居然还有人卖，估计是提供其他维护服务吧，反正我是用不到的，自己手写了个凑合用，自己写的兼容性没测过，如果有什么问题大家给点改进意见。 先上图 源码 //星期列表 var WEEK = ["日","一","二","三","四","五","六"]; //平年每月
javascript特殊日历控件分享
01-19
本文为大家分享了一个炫酷的js日历控件，供大家参考，具体内容如下 引用JSLit.js 下载 JSLite.io，兼容 JSLite 和 jQuery 安装方法 页面引用 JSLite 或者jQuery <div id=JSLiteCalenbar4><input type=text&gt...
js日历DIV控件
11-12
js写的页面日历控件类，文本或文本域页面元素触发事件中实力化对象，然后调用方法就会弹出日历div控件，选择后往控件返回日期字符串
.net mvc页面UI之Jquery博客日历控件实现代码
01-21
代码如下:// JavaScript 日历$(document).ready(function () { //当前时间 $now = new Date(); //当前的时间 $nowYear = $now.getFullYear(); //当前的年 $nowMonth = $now.getMonth(); //当前的月 $...
javascript中Date对象应用之简易日历实现
12-28
简易日历作为javascript中Date对象的常见应用，用途较广泛，本文将详细说明简易日历的实现思路。 效果演示   HTML说明  使用type=number的两个input分别作为年和月的输入控件，这样在高级浏览器下自带调节按钮 ...
用DIV动态生成日历小程序
08-09
用DIV动态生成日历小程序。通过下拉框选定日期，输出选中月的日历，选中日背景颜色为紫色，还有星期功能。
日历 插件，很丰富的可以随意更改的日历插件，
11-21
日历 插件，很丰富的可以随意更改的日历插件，日历 插件，很丰富的可以随意更改的日历插件，
用div+css写个日历控件
01-08
以前写日历控件，都是用table，结果拼半天！现在用div+css写日历控件，可以用div的一个特性，就是当它排不下的时候，就自动换行，那还用得着拼么？因此效率大大增加，一个简单的日历控件，十分钟搞定！大家可以下载看看，测试一下，如果有问题及时提出。这个控件是简单的控件，点击日期没有事件，大家可以自己添加，代码简洁，页面在pages/calendar.html。
js日历（calendar）
chujian0939的博客
01-19 684
效果还不错 View Code // JavaScript Document /* [Discuz!] (C)2001-2007 Comsenz Inc. This is NOT a freeware, use is subjec...
制作简单日历
diga6688的博客
07-14 3412
web页面中很多地方都会用到日历显示，选择等，本文用html、css、javascript实现简单的日历。完成以后的效果与页面左侧的效果差不多，可以切换上个月、下个月。也可以根据实际情况进行扩展。 html方面 html部分比较简单，声明一个div，具体的html用javascript生成。整体内容大概是这样的： 1 <!doctype html> 2 &...
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1459
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 1131
​​​​​​​。
一个小时学习javaScript
weixin_43064364的博客
04-20 855
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 740
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
html+js实现日历
11-08
HTML和JS可以很方便地实现一个简单的日历。以下是一个基本的示例： HTML部分： ``` <div id="calendar"></div> ``` JS部分： ``` // 获取当前日期 var currentDate = new Date(); // 获取年份和月份 var currentYear = currentDate.getFullYear(); var currentMonth = currentDate.getMonth(); // 显示日历 showCalendar(currentYear, currentMonth); // 上个月按钮点击事件 document.getElementById("prevMonth").addEventListener("click", function() { currentMonth--; if (currentMonth < 0) { currentYear--; currentMonth = 11; } showCalendar(currentYear, currentMonth); }); // 下个月按钮点击事件 document.getElementById("nextMonth").addEventListener("click", function() { currentMonth++; if (currentMonth > 11) { currentYear++; currentMonth = 0; } showCalendar(currentYear, currentMonth); }); // 日历显示函数 function showCalendar(year, month) { var calendarElement = document.getElementById("calendar"); var calendarHTML = ""; // 生成标题 calendarHTML += "<h2>" + year + "年" + (month + 1) + "月</h2>"; // 生成上个月按钮 calendarHTML += "<button id='prevMonth'>上个月</button>"; // 生成下个月按钮 calendarHTML += "<button id='nextMonth'>下个月</button>"; // 生成表格 calendarHTML += "<table>"; // 生成表头 calendarHTML += "<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>"; // 获取当月第一天和最后一天的日期对象 var firstDay = new Date(year, month, 1); var lastDay = new Date(year, month + 1, 0); // 获取当月第一天是星期几 var firstDayOfWeek = firstDay.getDay(); // 获取当月总共有多少天 var totalDays = lastDay.getDate(); // 生成日期表格 var date = 1; for (var i = 0; i < 6; i++) { calendarHTML += "<tr>"; for (var j = 0; j < 7; j++) { if (i === 0 && j < firstDayOfWeek) { // 空白格 calendarHTML += "<td></td>"; } else if (date > totalDays) { // 空白格 calendarHTML += "<td></td>"; } else { // 日期格 calendarHTML += "<td>" + date + "</td>"; date++; } } calendarHTML += "</tr>"; if (date > totalDays) { break; } } calendarHTML += "</table>"; // 将生成的日历HTML添加到页面中 calendarElement.innerHTML = calendarHTML; } ``` 这个JS函数可以根据指定的年份和月份生成对应的日历表格，并且提供了上一个月和下一个月切换的功能。在HTML中，我们只需要一个`<div>`元素来显示日历。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值