javascript日历控件

最新推荐文章于 2018-10-11 10:31:00 发布
最新推荐文章于 2018-10-11 10:31:00 发布
阅读量91 收藏
点赞数
分类专栏： javascript 文章标签： JavaScript HTML J# ASP CSS ViewUI

<script language="javascript">
<!--
var write_text_field;

var Selected_Month;
var Selected_Year;
var Current_Date = new Date();
var Current_Month = Current_Date.getMonth();//当前的月
var Current_Year = Current_Date.getYear();//当前的年
var Today = Current_Date.getDate();//当前的日期
var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var Month_Label = new Array('一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月');
function Header(Year, Month)
{

if (Month == 1)
{
if ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 != 0)))
{
Days_in_Month[1] = 29;
}
}
var Header_String = Year + '年' + Month_Label[Month];
return Header_String;
} function Make_Calendar(Year, Month)
{ var sYear=Year;
var sMonth=Month;
var HTML_String = '<table width=100% BORDER=0 CELLSPACING=0 cellpadding=0><tr><td valign="top">';
HTML_String +=Cal(sYear, sMonth)+"";
for(i=0;i<0;i++)
{
if (sMonth == 11)
{
sMonth = 0;
sYear++;
}
else
{
sMonth++;
}
HTML_String +=Cal(sYear, sMonth)+"";
}
HTML_String += '</td></tr></table>';
document.all.Calendar.innerHTML = HTML_String;
} function Cal(Year, Month)
{ var First_Date = new Date(Year, Month, 1);
var Heading = Header(Year, Month);
var First_Day = First_Date.getDay() + 1;
if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) || ((Days_in_Month[Month] == 30) && (First_Day == 7)))
{
var Rows = 6;
}
else if ((Days_in_Month[Month] == 28) && (First_Day == 1))
{
var Rows = 4;
}
else
{
var Rows = 5;
}
var HTML_String = '';
HTML_String += '<table width=100% BORDER=2 CELLSPACING=1 cellpadding=2 FRAME="box" background="image/bg' + (Month+1) + '.jpg" BORDERCOLORLIGHT="#FFFFFF" BORDERCOLORDARK="#FFFFFF">';//这里的图片也可以指定为一个单独的图片文件
HTML_String += '<tr><th colspan=8 background="image/bg_r2_c2.jpg"><font color="#FFFFFF">' + Heading + '</font></th></tr>';
HTML_String += '<tr><th ALIGN="CENTER" BORDERCOLOR="FFFFFF"><font color="#FFFFFF">日</th><th ALIGN="CENTER" BORDERCOLOR="FFFFFF"><font color="#FFFFFF">一</th><th ALIGN="CENTER" BORDERCOLOR="FFFFFF"><font color="#FFFFFF">二</th><th ALIGN="CENTER" BORDERCOLOR="FFFFFF"><font color="#FFFFFF">三</th>';
HTML_String += '<th ALIGN="CENTER" BORDERCOLOR="FFFFFF"><font color="#FFFFFF">四</th><th ALIGN="CENTER" BORDERCOLOR="FFFFFF"><font color="#FFFFFF">五</th><th ALIGN="CENTER" BORDERCOLOR="FFFFFF"><font color="#FFFFFF">六</th></tr>';
var Day_Counter = 1;
var Loop_Counter = 1;
var l;
var d;
for (var j = 1; j <= Rows; j++)
{
HTML_String += '<tr ALIGN="left" VALIGN="top">';
HTML_date='';
for (var i = 1; i < 8; i++)
{
if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month]))
{
if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month))
{
selectDate = Year.toString() + '-' + (Month+1).toString() + '-' + Day_Counter.toString();
HTML_String += '<td BORDERCOLOR="FFFFFF"><strong><a href=javascript:writeDate("' + selectDate + '");' + '><font color="red">' + Day_Counter + '</font></a></strong></td>';

}
else
{
selectDate = Year.toString() + '-' + (Month+1).toString() + '-' + Day_Counter.toString();
HTML_String += '<td BORDERCOLOR="FFFFFF"><strong><a href=javascript:writeDate("' + selectDate + '");' + '><font color="FFFFFF">' + Day_Counter + '</font></a></strong></td>';
}
HTML_date += '' + Year + '-' + (Month+1) + '-' + Day_Counter + ',';
Day_Counter++;
}
else
{
HTML_String += '<td BORDERCOLOR="C0C0C0"> </td>';
}
Loop_Counter++;
}
}
HTML_String += '</table>';
return HTML_String;
} function getWeekDay(R,First_Day)
{ var Day_Counter = 1;
var Loop_Counter = 1;
for (var j = 1; j <= Rows; j++)
{
HTML_Date += '';
for (var i = 1; i < 8; i++)
{
if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month]))
{

HTML_Date += '' + Year + '-' + (Month+1) + '-' + Day_Counter + ',';
Day_Counter++;
}
Loop_Counter++;
}
HTML_Date += '';
}
} function On_Year()
{ var Year = document.when.year.value;
if (Year.length == 4)
{
Selected_Month = document.when.month.selectedIndex;
Selected_Year = Year;
Make_Calendar(Selected_Year, Selected_Month);
}
} function On_Month()
{ var Year = document.when.year.value;
if (Year.length == 4)
{
Selected_Month = document.when.month.selectedIndex;
Selected_Year = Year;
Make_Calendar(Selected_Year, Selected_Month);
}
else
{
alert('请输入有效的年份！');
document.when.year.focus();
}
} function Defaults()
{ var Mid_Screen = Math.round(document.body.clientWidth / 2);
var Current_Date = new Date();
var Current_Month = Current_Date.getMonth();//当前的月
var Current_Year = Current_Date.getYear();//当前的年
document.when.month.selectedIndex = Current_Month;
document.when.year.value = Current_Year;
Selected_Month = Current_Month;
Selected_Year = Current_Year;
Make_Calendar(Current_Year, Current_Month);
} function Skip(Direction)
{ if (Direction == '+')
{
if (Selected_Month == 11)
{
Selected_Month = 0;
Selected_Year++;
}
else
{
Selected_Month++;
}
}
else
{
if (Selected_Month == 0)
{
Selected_Month = 11;
Selected_Year--;
}
else
{
Selected_Month--;
}
}
Make_Calendar(Selected_Year, Selected_Month);
document.when.month.selectedIndex = Selected_Month;
document.when.year.value = Selected_Year;
} function tick()
{ var hours, minutes, seconds, xfile;
var intHours, intMinutes, intSeconds;
var today;
today = new Date();
intHours = today.getHours();
intMinutes = today.getMinutes();
intSeconds = today.getSeconds();
if (intHours == 0)
{
hours = "12:";
xfile = "午夜 ";
}
else if (intHours < 12)
{
hours = intHours+":";
xfile = "上午 ";
}
else if (intHours == 12)
{
hours = "12:";
xfile = "正午 ";
}
else
{
intHours = intHours - 12
hours = intHours + ":";
xfile = "下午 ";
}
if (intMinutes < 10)
{
minutes = "0"+intMinutes+":";
}
else
{
minutes = intMinutes+":";
}
if (intSeconds < 10)
{
seconds = "0"+intSeconds+" ";
}
else
{
seconds = intSeconds+" ";
}
} ie4=(document.all)?true:false;
ns4=(document.layers)?true:false;
//-->
</script>

<!-- 上面这些代码是通用的，可以放到include文件中 -->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>javascript日历演示</title>
<style type="text/css">
<!--
body,td,th {
font-size: 12px;
} body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
} .style1 {
color: #FFFFFF;
font-weight: bold;
font-size: 14px;
} -->
</style>
</head>

<body>

<!-- 这些代码是放置日历的位置的 -->
<div id=div32
style="HEIGHT: 80px; LEFT: 10px; POSITION: absolute; TOP: 25px; WIDTH: 180px; Z-INDEX: 1; visibility: hidden;">
<table width="150" border="1" BORDERCOLORLIGHT="#000000" BORDERCOLORDARK="#ffffff" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<form name="when">
<tr>
<td align="center">
<div id=NavBar style="position:relative;top:-1px;">
<select name="month" onChange="On_Month()" class="select">
<script language="JavaScript1.2">
<!--
if (document.all){
for (j=0;j<Month_Label.length;j++) {
document.writeln('<option value=' + j + '>' + Month_Label[j]);
}
}
//-->
</script>
</select>
<input type="text" name="year" size=7 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()" class="input" value="<% =year(now()) %>"><br>
</div>
<input type="button" value="上月" onClick="Skip('-')" class="button">
<input type="button" value="下月" onClick="Skip('+')" class="button">
</td>
</tr>
<tr><td id="Calendar" align="center"></td></tr>
</form>
</table>
</div>

<div id=alt style="display:none; position: absolute; left: 242; top: 67; width: 100; height: 42; Z-INDEX: 3; visibility: hidden;">
<div id=aa style=" width: 100; height: 42; border: 1 outset #000000;font-family: Tahoma; font-size: 9pt;">
<div id=a1 style="color: #000000; font-weight: bold; background-color: #575757; text-align: center; border: 1 outset #FFFFFF; padding: 1;height:21"></div>
<div id=a2 style="color: #000000; text-align:left; background-color: infobackground; border: 0 solid black;padding: 1;height:21"></div>
</div>
</div>

<form action="new_contactOK.asp" method="post" name="frmNewCon" id="frmNewCon">
<input name="txtConDate" type="text" id="txtConDate" size="20">
<a href="javascript:toExit('show','div32','txtConDate')">
<img src="image/list_jrrc.gif" width="16" height="16" border="0" align="middle" onClick="Defaults();">
</a>
<br>
<SELECT NAME="sss">
<!-- 注意日历的位置最好不要和select控件重叠 -->
</SELECT><br>
<input name="txtConDate1" type="text" id="txtConDate1" size="20"><br>
<input name="txtConDate2" type="text" id="txtConDate2" size="20"><br>
<input name="txtConDate3" type="text" id="txtConDate3" size="20"><br>
<input name="txtConDate4" type="text" id="txtConDate4" size="20"><br>
</form>
</body>
</html>

<!-- 以下代码由于使用到了页面中的元素，所以只能在当前页面中填写，不能放到include文件中 -->
<script language="javascript">
<!--
function writeDate(ooo)
{ //这里是否可以想办法写成通用的呢？以便放入include文件中
document.frmNewCon.txtConDate.value=ooo;
toExit('hide','div32');
} function toExit()
{ var args=toExit.arguments;
var visible=args[0];
write_text_field=args[2];
document.all.div32.style.left=0;
if(ns4)
{
theObj=eval("document.layers[\'"+args[1]+"\']");
if(theObj)theObj.visibility=visible;
}
else if(ie4)
{
if(visible=='show')visible='visible';
if(visible=='hide')visible='hidden';
theObj=eval("document.all[\'"+args[1]+"\']");
if(theObj)theObj.style.visibility=visible;
}
}
//-->
</script>

http://tj007-bo.iteye.com/topics/download/2e65b729-59da-4d7b-97b4-84dc130573b9

xcgh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 日历控件
08-05
简单的Date.js控件，在jsp中可以使用，选择时间日历控件（生日选择控件）。
javascript写的日历控件(收藏)
weixin_33985679的博客
06-22 218
<!-- //------------------------------------------------------------------------------- // 这是一个日历 Javascript 页面脚本控件，适用于微软的 IE （5.0以上）浏览器 // 主调用函数是 setday(this,[object])，[object]是控件输出的控件名，举两个具体调...
一个很好的日历控件（采用javascript编写）
学习者专栏
04-03 1225
http://expo.live.com/Images/leftArrow.gifhttp://expo.live.com/Images/rightArrow.gifGlobal.csstd.negDate  a{       color: #808080;}.calendar {       padding-left: 4px;       padding-right: 4px;
纯javascript版日历控件
10-21
【纯JavaScript日历控件详解】 在Web开发中，日历控件是一种常见的交互元素，用于用户选择日期。本文将详细介绍如何使用纯JavaScript创建一个简单的日历控件，无需依赖任何外部库，如jQuery或其他框架。 首先，...
javascript实现日历控件
sx1989827的专栏
01-22 1308
      经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的过程.下面是要实现的html结构:年:月:先说一下日历查询的算法:w=y+parseInt(y/4)+parseInt(c/4)-2*c+parseInt(26*(m+1)/10)+d-1 ;下面是详细的说明过程,有兴趣的可以去看下:htt
JavaScript日历控件开发
diebianyi1454的博客
10-11 449
概述 在开篇之前，先附上日历的代码地址和演示地址，代码是本文要分析的代码，演示效果是本文要实现的效果 代码地址：https://github.com/aspwebchh/javascript-control/tree/master/calendar 演示地址：https://www.chhblog.com/html/demo/calendar.html 本文的目的除了详细说明开发一款具...
javascript实现日历控件(年月日关闭按钮)
12-09
经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的过程. 下面是要实现的html结构: <div id=”a”><div id=”head”><span id=”yface”>年:<select id=”year”></select></span><span id=”mface”>月:<select id=”month”></select></span></div><div id=”biaoti”></div><div id=”body”></div></div> 先说一下日历查询的算法: w=y+parseInt(
JavaScript日历控件 六种日历
05-11
JavaScript日历 6中样式 包括当前时间
史上最强JavaScript日历控件正式版(无偿的永久的提供给大家免费使用，含全部源代码)
02-21
注：此为旧版，我另上传有最新版，见http://download.csdn.net/source/1802967。 功能强大的JavaScript日历控件 最关键的，无偿的永久的提供给大家免费使用，含全部源代码。 功能简介： 一、更人性化,更全面的功能 大部分日期控件都具备这些功能,但是本日历控件做的更全面,更人性化,并且速度一流. 支持多种调用模式 除支持常规在input单击调用外,还支持使用其他的元素如:<img><div>触发WdatePicker函数来调用弹出日期框 支持周显示 可以通过配置isShowWeek属性决定是否限制周,并且在返回日期的时候还可以通过自带的自定义事件和API函数返回选择的周 只读开关,高亮周末功能 设置readOnly属性 true 或 false 可指定日期框是否只读;设置highLineWeekDay属性 ture 或 false 可指定是否高亮周末 操作按钮自定义 清空按钮和今天按钮,可以根据需要进行自定义,它们分别对应 isShowClear 和 isShowToday 默认值都是true 支持多种容器 除了可以将值返回给input以外,还可以通过配置el属性将值返回给其他的元素(如:textarea,div,span)等,带有innerHTML属性的HTML元素 起始日期功能 有时在项目中需要选择生日之类的日期,而默认点开始日期都是当前日期,导致年份选择非常麻烦,你可以通过起始日期功能加上配置alwaysUseStartDate属性轻松解决此类问题 自定义格式(注意大小写) yMdHmswW分别代表年月日时分秒星期周,你可以任意组合这些元素来自定义你个性化的日期格式. 如:"yyyy年M月d日 HH时mm分" 返回:"2008年3月12日 19时20分" 编辑功能 不知道您是否已经注意到,当日期框里面有值时,右下角的按钮会变成更新,修改完某个属性后,只要点击这个按钮就可以实现时间和日期的编辑 下拉,输入,导航选择日期 年月时分秒输入框都具备以下3个属性:通过导航图标选择,直接使用键盘输入数字,直接从弹出的下拉框中选择.因此不管你选择什么样的日期和时间都可以找到一种最快捷的方法,用最少的鼠标点击来搞定 自动纠错功能 纠错处理可设置为3种模式 1.提示 2.自动纠错(默认) 3.标记 当日期框中的值不符合格式时,系统会尝试自动修复,如果修复失败会根据您设置的纠错处理模式进行处理,错误判断功能非常智能它可以保证用户输入的值是一个合法的值 为编程带来方便 如果el的值是this,可省略,即所有的el:this都可以不写 日期框设置为disabled时,禁止更改日期(不弹出选择框) 如果没有定义onpicked事件,自动触发文本框的onchange事件 如果没有定义oncleared事件,清空时,自动触发onchange事件 其他属性设置 readOnly属性,可指定日期框是否只读 设置highLineWeekDay属性,可指定是否高亮周末 设置isShowOthers属性,可指定是否显示其他月的日期 加上class="Wdate"就会在选择框右边出现日期图标 二、强大的日期范围限制功能 支持静态限制,动态限制,脚本自定义限制,以及无效天和无效日期功能,利用这样功能你可以任意定制不能选择的日期,这些日期即使毫无规律,毫无连续性,你也可以通过这些功能的组合使用轻松搞定. 静态限制 你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定日期的范围 无效天可以使用此功能禁用周日至周六所对应的日期,相关属性:disabledDays (0至6 分别代表 周日至周六) 动态限制 你可以通过系统给出的动态变量,如%y(当前年),%M(当前月)等来限度日期范围,你还可以通过#{}进行表达式运算,如:#{%d+1}:表示明天 无效日期可以使用此功能禁用,所指定的一个或多个日期,只要你熟悉正则表达式,你可以尽情发挥 脚本自定义限制 系统提供了$dp.$D和$dp.$DV这两个API来辅助你进行日期运算,此外你还可以通过在 #F{} 中填入你自定义的脚本,做任何你想做的日期限制 三、自定义事件和丰富的API库 如果你需要做一些附加的操作,你也不必担心,日期控件自带的自定义事件可以满足你的需求.此外,你还可以在自定义事件中调用提供的API库来做更多的运算和扩展,绝对可以通过很少的代码满足你及其个性化的需求. 四、多语言支持和自定义皮肤支持 通过lang属性,可以为每个日期控件单独配置语言,当然也可以通过WdatePicker.js配置全局的语言,皮肤也是一样,只要配置skin属性即可.这样一个页面中可以显示
6种JavaScript日历控件
09-12
6种JavaScript日历控件,任君选择
非常好的js日历插件
11-07
非常好的js日历插件 网络整理，供大家下载，希望对大家有所帮助
javascript 实现的经典日历控件
村里人的IT故事
09-19 898
//call:第二个参数为true，则显示日期和时间；若为false，则只显示日期。-->function atCalendarControl(){  var calendar=this;  this.calendarPad=null;  this.prevMonth=null;  this.nextMonth=null;  this.prevYear=null;  this.next
有关js的日历控件大全
08-07 6991
经常会用到日历控件，现在就整理一下，好看即好用的日历控件第一种方案1.建立一个JS文件：Calendar.jsvar cal;var isFocus=false; //是否为焦点//function SelectDate(obj,strFormat) //两个参数改为只传一个function SelectDate(obj)...{    var date = new Date();
7种优美的javascript日历控件
12-11
7种漂亮的javascript日历控件，界面优美，使用方便
JS日历控件（可以选择多个日期）
08-04
JS日历控件（可以选择多个日期） JS日历控件（可以选择多个日期） JS日历控件（可以选择多个日期）
浮动式JavaScript日历控件实现代码
在JavaScript日历开发中，首先我们需要定义一些样式变量来设置组件的外观。例如，`vars_tiannet_turn_base`定义了基础的按钮样式，包括高度、字体大小、颜色、边框和背景色。这个基础样式会被用于翻年、月的按钮，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值