导航:首页 > 编程语言 > js展示日历插件

js展示日历插件

 发布时间：2023-08-20 04:46:36

⑴ js 日历控件的问题

  1. Calendar1这个id的元素是不是存在

  2. 是不是引入了日历的js插件

日历的插件很多，你可以看一下bootstrap-datepicker。比较容易上手。

⑵ js如何做到点击文本框弹出日历

demo.htm // demo实例
<!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><title>
无标题页
</title>
<script type="text/javascript" src="Calendar.js"></script>
</head>
<body>
<form name="form1" method="post" action="Default3.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/==" />
</div>
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
</div>
<div>
<table border="0px" style="margin:0;padding:0;height:22px;padding:0;" cellpadding="0" cellspacing="0" name="Calendar1" OnInitialzation="__doPostBack('Calendar1','')"><tr><td id="calendar_td" style="border-right:0;"><input id="show_Calendar1" type="text" style="margin:0;padding:0;height:18px;width:130px;" value="2011-01-13" onkeydown="SelectText(event,'show_Calendar1');CanNotDelete(event);" onchange="OnTextChange('show_Calendar1','1');" /></td><td style="border-left:0;"><img src="img/ico.gif" style="height:18px;" onclick="Initiailzation('show_Calendar1','1');" /></td><td style="border-right:0;"><div id="showError_Calendar1" style="height:18px;font-size:12px;color:#FF0000;padding-top:8px;"></div></td><td colspan="3"><div id="calendar_Calendar1"></div></td></tr></table>
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>

</form>
</body>
</html>
这是前段时间写的一个日历控件，封装成服务器自定义控件了，不过可以直接调用js，以上是js源码和demo实例，已经兼容ie/6/7/8，firefox，safari等主流浏览器，希望对你有帮助，如需要完整源码，请联系
附：js内容过多，无法在这发出来

⑶ PHP怎样添加JS日历控件

日期插件的包为:mydate.js。

1：首先将日期插件的包引入到页面中

<scriptlanguage="JavaScript"src="../Inc/Js/mydate.js"></script>

2：设置鼠标点击事件，当鼠标点击获得焦点的时候，触发事件，调用方法

<inputtype="text"name="starttime"onfocus="MyCalendar.SetDate(this)"value="<?phpecho$rq;?>">
<inputtype="text"name="endtime"onfocus="MyCalendar.SetDate(this)"value="<?phpecho$rq;?>">

3：完整页面代码

<?php
date_default_timezone_set("PRC");
$nowtime=time();
$rq=date("Y-m-d",$nowtime);
?>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<metaname="generator"content="FFKJ.Net"/>
<linkrev="MADE"href="mailto:[email protected]">
<title>在线--后台</title>
<linkrel="stylesheet"type="text/css"href="../Skins/Admin_Style.Css"/>
<scriptlanguage="JavaScript"src="../Inc/Js/mydate.js"></script>
</head>
<body>
开始时间:<inputtype="text"name="starttime"onfocus="MyCalendar.SetDate(this)"value="<?phpecho$rq;?>">
结束时间:<inputtype="text"name="endtime"onfocus="MyCalendar.SetDate(this)"value="<?phpecho$rq;?>">
</body>
</html>

⑷ 日历控件calendar.js怎么调用

以3.0为例：
项目head块中写入以下：
<script language="javascript" type="text/javascript" src="~/canlendar.js"></script>
调用时在所要用日期的TextBox控件加入onclick事件：onclick='popUpCalendar(this,document.form1.TextBox1,"yyyy-mm-dd")'

以上方版法名popUpCalendar不同权版本可能会不同，调用时看源码

⑸ 求一款js做的时间日历控件

这是我找到的一个js做的日历，不知道是不是你要的，里面有包含时间，其实在日历里面加时间也是比较简单的，只要调用DATE的方法就可以了，希望对你有用。下面是代码段，效果图附上。

<html>

<head>

<SCRIPTLANGUAGE="JavaScript"TYPE="text/javascript">

//定义月历函数

functioncalendar(){

vartoday=newDate();//创建日期对象

year=today.getYear();//读取年份

thisDay=today.getDate();//读取当前日

//创建每月天数数组

varmonthDays=newArray(31,28,31,30,31,30,31,31,30,31,30,31);

//如果是闰年，2月份的天数为29天

if(((year%4==0)&&(year%100!=0))||(year%400==0))monthDays[1]=29;

daysOfCurrentMonth=monthDays[today.getMonth()];//从每月天数数组中读取当月的天数

firstDay=today;//复制日期对象

firstDay.setDate(1);//设置日期对象firstDay的日为1号

startDay=firstDay.getDay();//确定当月第一天是星期几

//定义周日和月份中文名数组

vardayNames=newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六");

varmonthNames=newArray("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");

//创建日期对象

varnewDate=newDate();

//创建表格

document.write("<TABLEBORDER='0'CELLSPACING='0'CELLPADDING='2'ALIGN='CENTER'BGCOLOR='#0080FF'>")

document.write("<TR><TD><tableborder='0'cellspacing='1'cellpadding='2'bgcolor='#88FF99'>");

document.write("<TR><thcolspan='7'bgcolor='#C8E3FF'>");

//显示当前日期和周日

document.writeln("<FONTSTYLE='font-size:9pt;Color:#FF0000'>"+newDate.getYear()+"年"+monthNames[newDate.getMonth()]+""+newDate.getDate()+"日"+dayNames[newDate.getDay()]+"</FONT>");

//显示月历表头

document.writeln("</TH></TR><TR><THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>日</FONT></TH>");

document.writeln("<thbgcolor='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>一</FONT></TH>");

document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>二</FONT></TH>");

document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>三</FONT></TH>");

document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>四</FONT></TH>");

document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>五</FONT></TH>");

document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>六</FONT></TH>");

document.writeln("</TR><TR>");

//显示每月前面的"空日"

column=0;

for(i=0;i<startDay;i++){

document.writeln("<TD><FONTSTYLE='font-size:9pt'></FONT></TD>");

column++;

}

//如果是当前日就突出显示(红色)，否则正常显示(黑色)

for(i=1;i<=daysOfCurrentMonth;i++){

if(i==thisDay){

document.writeln("</TD><TDALIGN='CENTER'><FONTSTYLE='font-size:9pt;Color:#ff0000'><B>")

}

else{

document.writeln("</TD><TDBGCOLOR='#88FF99'ALIGN='CENTER'><FONTSTYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#000000'>");

}

document.writeln(i);

if(i==thisDay)document.writeln("</FONT></TD>")

column++;

if(column==7){

document.writeln("<TR>");

column=0;

}

}

document.writeln("<TR><TDCOLSPAN='7'ALIGN='CENTER'VALIGN='TOP'BGCOLOR='#0080FF'>")

document.writeln("<FORMNAME='time'onSubmit='0'><FONTSTYLE='font-size:9pt;Color:#ffffff'>")

//显示当前时间

document.writeln("当前时间:<INPUTTYPE='Text'NAME='textbox'ALIGN='TOP'></FONT></TD></TR></TABLE>")

document.writeln("</TD></TR></TABLE></FORM>");

}

</SCRIPT>

<SCRIPTLANGUAGE="JavaScript">

//初始化控制变量

vartimerID=null;

vartimerRunning=false;

//定义时间显示函数

functionstoptime(){

if(timerRunning)

clearTimeout(timerID);

timerRunning=false;}

//定义显示时间函数

functionshowtime(){

varnewDate=newDate();

varhours=newDate.getHours();

varminutes=newDate.getMinutes();

varseconds=newDate.getSeconds()

vartimeValue=""+((hours>12)?hours-12:hours)

timeValue+=((minutes<10)?":0":":")+minutes

timeValue+=((seconds<10)?":0":":")+seconds

timeValue+=(hours>=12)?"下午":"上午"

document.time.textbox.value=timeValue;

timerID=setTimeout("showtime()",1000);//设置超时,使时间动态显示

timerRunning=true;}

//显示当前时间

functionstarttime(){

stoptime();

showtime();}

</SCRIPT>

</head>

<BODYonLoad="starttime()"TEXT="#000000"TOPMARGIN="0">

<scriptlanguage="JavaScript"type="text/javascript">

calendar();//显示月历

</script>

</BODY>

</html>

⑹ 谁有JS日历控件 美观的

我一直都用这个日期控件

http://www.my97.net/

1.强大的日期范围限制功能
支持静态限制,动态限制,脚本自定义限制,以及无效天和无效日期功能,利用这样功能你可以任意定制不能选择的日期,这些日期即使毫无规律,毫无连续性,你也可以通过这些功能的组合使用轻松搞定.

2.自定义事件和丰富的API库
如果你需要做一些附加的操作,你也不必担心,日期控件自带的自定义事件可以满足你的需求.此外,你还可以在自定义事件中调用提供的API库来做更多的运算和扩展,绝对可以通过很少的代码满足你及其个性化的需求.

3.多语言支持和自定义皮肤支持
通过lang属性,可以为每个日期控件单独配置语言,当然也可以通过WdatePicker.js配置全局的语言,皮肤也是一样,只要配置skin属性即可.这样一个页面中可以显示多种语言,多种皮肤的日期控件,更棒的是,他们之间的切换是无刷新的.

4.跨无限级框架显示和自动选择显示位置
无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,My97日期控件是可以跨无限级框架显示的,并且当控件处在页面边界是,它会自动选择显示的位置.此外你还可以使用position参数对弹出位置做调整.

⑺ 急求旅游网日历插件Calendar.js使用

大概是你设置错了。

注意下图中红色标示的部分！

默认显示的年、月要在说设定的最早时间和最晚时间之间。


⑻ jsp怎么调用js日历控件！

举个例子（控件地址：http://www.my97.net/dp/My97DatePicker/WdatePicker.js）：
首先下载日期控件到你的服务器目录中，在你的页面中引入这个外部js：
<script language="JavaScript" type="text/javascript" src="../../My97DatePicker/WdatePicker.js">//具体路径看实际情况</script>
在文本控件中这样使用：
<input id="d11" type="text" onClick="WdatePicker()"/>点击这个input文本框时候就会弹出时间选择框

⑼ javascript实现的日历控件，为什么不显示

日期控件，主要使用js的Date对象。下面是简单是日期控件，仅供参考：

<style>
*{margin:0;padding:0;}
.calander{position:relative;width:210px;border:1pxsolidred;margin:50pxauto;}
.calandera{position:absolute;top:0;height:40px;line-height:40px;}
.calander.prev{left:0;padding-left:10px;}
.calander.next{right:0;padding-right:10px;}
.calanderspan{display:block;height:40px;line-height:40px;text-align:center;font-weight:bold;}
.calanderul,.calanderol{overflow:hidden;}
.calanderli{float:left;width:30px;height:30px;line-height:30px;text-align:center;list-style:none;}
.calander.week{color:#f40;}
.calander.today{color:blue;}
.calander.past{color:#ccc;}
</style>
<script>
window.onload=function(){
	varoDiv=document.getElementById('calander');
	varoSpan=oDiv.getElementsByTagName('span')[0];
	varoUl=oDiv.getElementsByTagName('ul')[0];
	varoPrev=oDiv.getElementsByTagName('a')[0];
	varoNext=oDiv.getElementsByTagName('a')[1];
	
	varnow=0;
	create();
	
	oNext.onclick=function(){
		now++;
		create();
	};
	functioncreate()
	{
		oUl.innerHTML='';
		//span
		varoDate=newDate();//?
		oDate.setMonth(oDate.getMonth()+now,1);
		vary=oDate.getFullYear();
		varm=oDate.getMonth();
		oSpan.innerHTML=y+'年'+(m+1)+'月';
		
		//创建空格
		varoDate=newDate();//?
		oDate.setMonth(oDate.getMonth()+now,1);
		oDate.setDate(1);
		varweek=oDate.getDay();//0-6
		(week==0)&&(week=7);
	
		for(vari=0;i<week-1;i++)
		{
			varoLi=document.createElement('li');
			
			oUl.appendChild(oLi);
		}
		
		//创建真正日期
		varoDate=newDate();//?
		oDate.setMonth(oDate.getMonth()+now,1);
		oDate.setMonth(oDate.getMonth()+1,0);
		vartotal=oDate.getDate();
		for(vari=0;i<total;i++)
		{
			varoLi=document.createElement('li');
			
			oLi.innerHTML=i+1;	

			oUl.appendChild(oLi);
		}
		
		//处理周末
		varaLi=oUl.children;
		
		for(vari=0;i<aLi.length;i++)
		{
			if(i%7==5||i%7==6)
			{
				aLi[i].className='week';
			}
		}
		
		//今天
		if(now==0)
		{
			varoDate=newDate();
		
			for(vari=0;i<aLi.length;i++)
			{
				if(aLi[i].innerHTML==oDate.getDate())
				{
					aLi[i].className='today';
				}
				elseif(aLi[i].innerHTML<oDate.getDate())
				{
					aLi[i].className='past';
				}
			}
		}
		
	}
};
</script>
</head>
<body>
	<divclass="calander"id="calander">
		<ahref="javascript:;"class="prev">←</a>
		<ahref="javascript:;"class="next">→</a>
		
		<span>2015年04月</span>
		<ol>
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
			<li>五</li>
			<liclass="week">六</li>
			<liclass="week">日</li>
		</ol>
		<ul>
		</ul>
	</div>
</body>
阅读全文

与js展示日历插件相关的资料

热点内容
数控中怎么编程 浏览：409
vm如何安装linux系统 浏览：423
歌手实绩数据在哪里看 浏览：691
代码002 浏览：714
jdk如何编译java文件 浏览：900
修改iptables配置文件 浏览：427
word自动保存指定文件夹 浏览：18
电脑画质不清晰win10 浏览：912
diskgen使用教程 浏览：970
常州数控车编程培训哪里有 浏览：44
如何升级晴明等级 浏览：347
开头是什么文件 浏览：645
linux16进制看elf文件 浏览：663
纸档文件怎么能变成excel档 浏览：481
迅雷下载总出现jsp 浏览：150
创建网页用什么编程语言 浏览：526
考研哪个app好 浏览：30
计算机网络的概念是什么 浏览：625
网络硬盘存储制作 浏览：4
iphone怎么备份数据到电脑 浏览：41

友情链接