基于js的一个日历控件，点击按钮，弹出日历，显示日期到文本框
首先是一些js代码：
<Script LANGUAGE="JavaScript">
var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二");
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);
var days = new Array("日","一", "二", "三","四", "五", "六");
var classTemp;
var today=new getToday();
var year=today.year;
var month=today.month;
var newCal;
function getDays(month, year) {
if (1 == month)
return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;
else
return daysInMonth[month];
}
function getToday() {
this.now = new Date();
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
}
function Calendar() {
newCal = new Date(year,month,1);
today = new getToday();
var day = -1;
var startDay = newCal.getDay();
var endDay=getDays(newCal.getMonth(), newCal.getFullYear());
var daily = 0;
if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth())){
day = today.day;
}
var caltable = document.all.caltable.tBodies.calendar;
var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());
for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)
for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++)
{
var cell = caltable.rows[intWeek].cells[intDay];
var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1);
if ((intDay == startDay) && (0 == daily)){
daily = 1;
}
var daytemp=daily<10?("0"+daily):(daily);
var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";
if(day==daily)
cell.className="DayNow";
else if(intDay==6)
cell.className = "DaySat";
else if (intDay==0)
cell.className ="DaySun";
else
cell.className="Day";
if ((daily > 0) && (daily <= intDaysInMonth)){
cell.innerText = daily;
daily++;
} else{
cell.className="CalendarTD";
cell.innerText = "";
}
}
document.all.year.value=year;
document.all.month.value=month+1;
}
function subMonth(){
if ((month-1)<0){
month=11;
year=year-1;
}else{
month=month-1;
}
Calendar();
}
function addMonth(){
if((month+1)>11){
month=0;
year=year+1;
}else{
month=month+1;
}
Calendar();
}
function setDate(){
if (document.all.month.value<1||document.all.month.value>12){
alert("月的有效范围在1-12之间!");
return;
}
year=Math.ceil(document.all.year.value);
month=Math.ceil(document.all.month.value-1);
Calendar();
}
</Script>
<Script>
function buttonOver(){
var obj = window.event.srcElement;
obj.runtimeStyle.cssText = "background-color:#FFFFFF";
// obj.className="Hover";
}
function buttonOut(){
var obj = window.event.srcElement;
window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300);
}
</Script>
<script>
function getDiary(){
y=document.getElementById("year").value;
d=document.getElementById("month").value;
document.getElementById("showdate").value=y+"-"+d+"-"+event.srcElement.innerHTML;
document.getElementById("showdate").style.cssText="text-align:center"; //文字居中显示
document.getElementById("caltable").style.display="none";
}
</script>
<Script LANGUAGE="JavaScript">
function rili(){
document.getElementById('caltable').style.display='';
Calendar();
}
</Script>
下面是body里的内容
<input type="text" id=showdate>
<input type="button" id=controlcalendar value="日历" οnclick="rili();">
<table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable" style="display:none">
<thead>
<tr align="center" valign="middle">
<td colspan="7" class="Title">
<a href="javaScript:subMonth();" title="上一月" Class="DayButton">上一月</a>
<input name="year" id="year" type="text" size="4" maxlength="4" οnblur="setDate();"> 年
<input name="month" id="month" type="text" size="1" maxlength="2" οnblur="setDate();"> 月
<a href="JavaScript:addMonth();" title="下一月" Class="DayButton">下一月</a>
</td>
</tr>
<tr align="center" valign="middle">
<Script LANGUAGE="JavaScript">
document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>");
for (var intLoop = 1; intLoop < days.length-1;intLoop++)
document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>");
document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>");
</Script>
</TR>
</thead>
<TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()">
<Script LANGUAGE="JavaScript">
for (var intWeeks = 0; intWeeks < 6; intWeeks++){
document.write("<TR style='cursor:hand'>");
for (var intDays = 0; intDays < days.length;intDays++) {
document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");
}
document.write("</TR>");
}
</Script>
</TBODY>
</TABLE>
基于js的一个日历控件，点击按钮，弹出日历，显示日期到文本框相关推荐
- ［分享］iOS开发－实现view底部控件随着键盘的弹出而上移的效果
首先说一下思路: 想要达到底部控件随着键盘的弹出而上移的效果,那么我们必然需要的到键盘在弹出时的高度,以及原点坐标. 说白了我们的大致思路就是,用view的高度-键盘弹出时的高度,得到的值就是底部控件 ...
- 使你的ActiveX控件执行时不弹出安全性提示
我们编写一个ActiveX控件在IE中运行,一般会弹出一个安全提示,如何避免这种情况?下面是我在参考前人的文章后,总结出"在浏览器中执行时不弹出警告的ActiveX控件"的两种编写 ...
- 使用控件设计窗体 上 布局主窗体 添加标签与文本框控件
使用控件设计窗体 上 布局主窗体 添加标签与文本框控件 项目目标 所需控件 窗体基本设置 新建窗体 设置背景图片 设置平铺模式 设置icon 设置文字 修改名称 直接修改类名 标签控件与文本框控件 标 ...
- pythongui日历控件_Selenium2+python自动化25-js处理日历控件（修改readonly属性）
前言 日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题. 基本思路:先用j ...
- android 横向的日历,Andorid 日历控件库，可左右滑动，显示公历，农历，节假日等功能...
封面图: demo效果图 源码目录结构 Features 日历左右滑动. 显示阳历,农历,节假日和二十四节气 实现对某月日期的单选或者多选. 使用步骤 Gradle Dependency Add th ...
- html点击按钮弹出悬浮窗_9种实现点击一个链接弹出一个小窗口的代码
9 种实现点击一个链接弹出一个小窗口的代码 因为着是一段 javascripts 代码, 所以它们应该放在之间. 是对一些版本低的浏览器起作用,在这些老浏览器中不会将 标签中的代码作为文本显示出来.要 ...
- html点击按钮弹出悬浮窗_点击文字或按钮弹出一个DIV窗口（DIV悬浮窗口）
以下是弹出窗口代码: 点击文字弹出一个DIV层窗口代码 .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; wi ...
- 点击按钮弹出一个DIV层
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- android 的a标签,Android开发技巧之在a标签或TextView控件中单击链接弹出Activity(自定义动作)...
在5.2.1节和5.2.2节介绍了标签以及TextView自动识别的特殊文本(网址.电话号.Email等),这些都可以通过单击来触发不同的动作.虽然这些单击动作已经可以满足大多数需要了,但如果读者想在 ...
- 梦想CAD控件网页版右键弹出菜单
用户需要右键弹出菜单,则需要响应鼠标事件,右键按下后,弹出菜单分为在命令下运行及在非命令下运行,具体介绍如下 : 一.新建菜单文件 1.新一个文本文件: mxpoptest.mnu,内容如下(此文件为 ...
最新文章
- 自动驾驶中多模态三维目标检测研究综述
- aspnet_Applications表结构
- 谁在“唱衰”OpenStack?
- NSRunLoop概述（转）
- c gui qt 4编程第二版_面试官问Linux下如何编译C程序，如何回答？为你编译演示
- javax.servlet.jsp.JspTagException:
- OJ1007: 鸡兔同笼
- 局域网linux唤醒windows,局域网唤醒 (WOL - Wake on LAN) | 远程启动计算机- ManageEngine OpUtils...
- AI算力霸主诞生！英伟达发布首款安培架构GPU，性能提升20倍
- 使用uiautomator2进行webview页面的测试
- kinit无密码登录配置
- BI的价值体现在哪里
- Maven项目中，jar包版本冲突导致运行时报错的问题
- 千方百剂创建账套服务器文件,千方百剂数据库设置教程.docx
- Nginx爆出新漏洞，谨防“拖库”风险
- python 会议室预约系统解决方案_会议室预约管理系统方案书.pdf
- 浙江大学计算机考研分数线2018,2018年浙江大学考研复试分数线已公布
- 李宏毅（机器学习）机器学习概述+线性回归案例分析
- Unity流水账9：Timeline
- CMU 15-445/645-Note11-Distributed Databases
热门文章
- 关于 MVVM和MVC的一些总结
- 高通安卓Q显示屏不同角度旋转竖屏横屏切换
- Articulate Storyline 2: Advanced Techniques Articulate Storyline 2：高级技巧 Lynda课程中文字幕
- TextOut 与DrawText
- 第16章-基于Hu不变矩的图像检索技术处理算法实现
- 【Linux】进程间通信--systemV标准--共享内存
- Veeam 备份还原操作手册
- Java8几种常用字符串拼接方法总结
- LeetCode第六题Z字变换
- AI：人工智能领域之AI基础概念术语之机器学习、深度学习、数据挖掘中常见关键词、参数等5000多个单词中英文对照(绝对干货)