`
xcgh
  • 浏览: 77341 次
  • 来自: ...
社区版块
存档分类
最新评论

javascript日历控件

阅读更多

<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

分享到:
评论

相关推荐

    JavaScript日历控件 六种日历

    JavaScript日历控件是网页开发中常用的一种交互元素,它能帮助用户方便地选择日期,常见于表单输入、事件安排或时间相关的功能。在给定的资源中,包含了六种不同样式的JavaScript日历,这些日历可能具有不同的设计...

    6种JavaScript日历控件

    JavaScript日历控件是网页开发中常用的一种交互元素,它为用户提供了一个直观的方式来选择日期,常见于表单、事件管理或在线预订系统等场景。在本文中,我们将深入探讨六种不同的JavaScript日历控件,了解它们的特点...

    7种优美的javascript日历控件

    JavaScript日历控件是网页开发中常用的一种交互元素,它为用户提供了一种直观的方式来选择日期。在本主题中,我们将探讨7种不同的JavaScript日历控件,这些控件以其美观的界面和用户友好的特性而受到青睐。我们将...

    两款JavaScript日历控件 网页日历控件

    JavaScript日历控件是网页开发中常用的一种组件,主要用于用户在网页上选择日期,常见于表单填写、事件安排或时间记录等场景。本篇文章将详细介绍两款常用的JavaScript日历控件,以及如何根据需求进行配置,包括更改...

    javaScript日历控件大全

    JavaScript日历控件是网页开发中常用的一种交互元素,它为用户提供了一种直观的方式来选择日期。在本资源包中,包含了几种不同的JavaScript日历控件实现,供开发者根据项目需求选择和使用。下面我们将详细探讨...

    javascript 日历控件

    简单的Date.js控件,在jsp中可以使用,选择时间日历控件(生日选择控件)。

    javascript日历控件大全

    JavaScript日历控件是网页开发中常用的一种交互元素,它为用户提供了一种直观的方式来选择日期。在本压缩包“js日历控件大全”中,包含了6款不同的JavaScript日历控件,每款都有对应的效果图,使得开发者可以更直观...

    多风格多语言的JavaScript日历控件

    JavaScript日历控件是一种在网页上实现日期选择功能的交互组件,它允许用户方便地选取日期,常用于表单输入、事件安排或者时间相关的应用程序。这类控件通常使用JavaScript编程语言编写,支持多种样式和多语言,以...

    JavaScript日历控件集合包含多款

    JavaScript日历控件是网页开发中常用的一种交互元素,它为用户提供了一种直观的方式来选择日期,常用于表单填写、事件预订或者时间相关的功能。在本压缩包中,你将找到多款不同风格的日历控件,包括经典、清新、古典...

    弹出式JavaScript 日历控件

    JavaScript日历控件是网页开发中的一个重要组成部分,它为用户提供了一种直观且用户友好的方式来选择日期。Tigra Calendar是一款广泛使用的跨浏览器JavaScript日历控件,它以其弹出式的显示方式而受到青睐。在本文中...

    非常美观的JAVASCRIPT日历控件

    JavaScript日历控件是网页开发中常用的一种交互元素,它为用户提供了一个直观的方式来选择日期,增强用户体验并简化数据输入。本资源包含三款专为input字段设计的日期小控件和两款独立的日历组件,全部基于...

    javascript日历控件2

    JavaScript日历控件是一种常用的前端开发组件,它允许用户在网页上方便地选择日期,常用于表单输入、事件管理等场景。这篇博客"javascript日历控件2"可能介绍了如何创建或使用一个改进版的日历插件。下面将详细讨论...

    javascript日历控件在asp.net使用

    JavaScript日历控件在ASP.NET中的使用是一种常见的增强用户交互体验的方法。JavaScript作为一种客户端脚本语言,可以在用户的浏览器上运行,无需服务器交互就能提供动态功能,比如日期选择器。在ASP.NET框架中,我们...

    javascript日历控件 兼容ie firefox opera

    JavaScript日历控件是网页开发中常用的一种交互元素,它允许用户通过图形界面选择日期,增强用户体验。在“javascript日历控件 兼容ie firefox opera”这个主题中,我们主要探讨的是一个能够同时在Internet Explorer...

    兼容FF,IE的JAVASCRIPT日历控件

    JavaScript日历控件是一种常用的网页交互元素,它允许用户通过点击按钮或输入框触发一个弹出的日历界面,方便地选择日期。对于开发者来说,创建一个兼容不同浏览器的控件是一项挑战,因为不同的浏览器可能对...

    Javascript日历控件

    JavaScript日历控件是网页开发中常用的一种交互组件,它能帮助用户方便地选择日期,常见于表单输入、事件安排或时间管理等场景。在本文中,我们将深入探讨JavaScript日历控件的设计原理、常见功能以及一些优秀的开源...

    寒羽枫javascript日历控件 -源码.zip

    【标题】"寒羽枫javascript日历控件 -源码.zip" 提供的是一个JavaScript编写的日历组件的源代码,适用于网页开发中日期选择功能的实现。JavaScript是一种广泛使用的客户端脚本语言,它允许在浏览器端动态创建交互式...

Global site tag (gtag.js) - Google Analytics