js点击文本框出现下拉不出现日历,这是怎么回事

js日历控件点击日期后文本框显示_Javascript教程_动态网站制作指南
js日历控件点击日期后文本框显示
来源:人气:13861
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&&HTML&&HEAD&&TITLE& New Document &/TITLE&&META NAME="Generator" CONTENT="EditPlus"&&META NAME="Author" CONTENT=""&&META NAME="Keys" CONTENT=""&&META NAME="Descrtion" CONTENT=""&&script&var myC_x,myC_y;var myC_timeset=null,myC_timeset1=var divObj=var inputNfunction myCalendar() //构建对象{var myDate = new Date();this.year = myDate.getFullYear();this.month = myDate.getMonth()+1;this.date = myDate.getDate();this.format="yyyy-mm-dd";this.style = myStyle(1); this.show = createCthis.input = createI}function myStyle(num) //设置样式{if(!num||isNaN(num)){alert('参数不对,采用默认样式!');num=1;} var style = new Array();style[1]=".week{background-color:#DfDfont-size:12width:140}"+".ds{width:140font-size:12cursor:hand}"+".mover{border:1background-color:#f4f4f4;}"+".move1{border:1px solid #5d5d5d;background-color:#f4f4f4;color:#909font-size:12px}"+".tit{background-color:#909EFF;width:140font-size:12color:cursor:default}"+".cs{position:border:1px solid #909width:142left:0top:0z-index:9999;}"+".shadow{position:left:0top:0font-family: Arial Bfont-size:50color:#d4d4d4;z-index:1;text-align:}";document.write("&style type='text/'&");document.write(style[num]);document.write("&/style&");}function createCalendar(){var week = new Array('日','一','二','三','四','五','六');document.write("&div class='cs' onselectstart='return false' oncontextmenu='return false' onmousedown='if(event.button==2)this.style.display=\"none\"' id='myC_div'&&div class='shadow'&&/div&&div style='position:left:0top:0z-index:1'&");//创建头部document.write("&table class='tit' id='myC_Top' onmousedown='myC_x=event.x-parentNode.parentNode.style.pixelLmyC_y=event.y-parentNode.parentNode.style.pixelTsetCapture()' onmouseup='releaseCapture();' onmousemove='myCMove(this.parentElement.parentElement);'&&tr&&td width=10 onmouver='this.style.color=\"black\"' onmouseout='this.style.color=\"\"' onclick='cutYear()' style='font-family: Wcursor:' title='减少年份'&7&/td&&td title='减少月份' onmouseover='this.style.color=\"black\"' onclick='cutMonth()' onmouseout='this.style.color=\"\"' width=10 style='font-family: Wcursor:'&3&/td&&td align=center onmouseover=this.className='move1'; onmouseout=this.className='';divHidden(myC.parentElement.nextSibling); onclick='createyear("+this.year+",this);divShow(myC.parentElement.nextSibling);'&&/td&&td align=center onclick='createmonth("+this.month+",this);divShow(myC.parentElement.nextSibling)' onmouseover=this.className='move1'; onmouseout=this.className='';divHidden(myC.parentElement.nextSibling);&&/td&&td width=10 onmouseover='this.style.color=\"black\"' onmouseout='this.style.color=\"\"' onclick='addMonth()' style='font-family: Wcursor:' title='增加月份'&4&/td&&td width=10 style='font-family: Wcursor:' onmouseover='this.style.color=\"black\"' onmouseout='this.style.color=\"\"' onclick='addYear()' title='增加年份'&8&/td&&/tr&&/table&");//创建星期条目document.write("&table class='week'&&tr&");for(i=0;i&7;i++)document.write("&td align=center&"+week[i]+"&/td&");document.write("&/tr&&/table&");//创建日期条目document.write("&table class='ds' id='myC' cellspacing=2 cellpadding=0&");for(i=0;i&6;i++){document.write("&tr&");for(j=0;j&7;j++)document.write("&td width=10% height=16 align=center onmouseover='mOver(this)' onmouseout='mOut(this)' onclick='if(this.innerText!=\"\")getValue(inputName,this.innerText);myC_div.style.display=\"none\"'&&/td&");document.write("&/tr&");}document.write("&/table&");//建建水印document.write("&/div&");//创建选择图层document.write("&div style='position:left:0top:0z-index:3' onmouseover=divShow(this) onmouseout=divHidden(this)&&/div&");document.write("&/div&");//显示日期showDate(this.year,this.month);myC_div.style.display='none';}function getValue(obj,value){eval(obj).value=parseInt(myC_Top.cells[2].innerText)+"-"+parseInt(myC_Top.cells[3].innerText)+"-"+}function showDate(year,month){var myDate = new Date(year,month-1,1);var today = new Date();var day = myDate.getDay();var length = new Array(31,30,31,30,31,30,31,31,30,31,30,31);length[1] = ((year%4==0)&&(year%100!=0)||(year%400==0))?29:28;for(i=0;i&myC.cells.i++)myC.cells[i].innerHTML = "";for(i=0;i&length[month-1];i++){myC.cells[i+day].innerHTML = (i+1);if(new Date(year,month-1,i+1).getDay()==6||new Date(year,month-1,i+1).getDay()==0){myC.cells[i+day].style.color='red';}}myC_Top.cells[2].innerText=year+"年";myC_Top.cells[3].innerText=month+"月";with(myC.parentNode.eviousSibling.style){pixelLeft=myC.offsetLpixelTop=myC.offsetTheight = myC.clientHwidth = myC.clientW}myC.parentElement.parentElement.style.height=myC.parentElement.offsetHmyC.parentElement.previousSibling.innerHTML=}//一些附加函数--------------------//---------Begin-------------------function mOver(obj){obj.className = 'mover';}function mOut(obj){if(obj.className=='mover')obj.className = '';}function addYear(){var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText); year++;showDate(year,month);}function addMonth(){var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);month++;if(month&12){month=1;year++;}showDate(year,month);}function cutYear(){var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);year--;showDate(year,month);}function cutMonth(){var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);month--;if(month&1){month=12;year--;}showDate(year,month);}function divS(obj){if(obj!=divObj){obj.style.backgroundColor="#909eff";obj.style.color='black';}if(divObj!=null){divObj.style.backgroundColor='';divObj.style.color='';}divObj =}function divShow(obj){ if (myC_timeset!=null) clearTimeout(myC_timeset);obj.style.display='block';}function divHidden(obj){myC_timeset=window.setTimeout(function(){obj.style.display='none'},500);}function createyear(year,obj)//创建年份选择{var oDystr="&table class='move1' cellspacing=0 cellpadding=2 width="+obj.offsetWidth+"&";ystr+="&tr&&td style='cursor:hand' onclick='createyear("+(year-20)+",myC_Top.cells[2])' align=center&上翻&/td&&/tr&";for(i=year-10;i&year+10;i++)if(year==i)ystr+="&tr style='background-color:#909eff'&&td style='color:height:16cursor:hand' align=center onclick='myC_Top.cells[2].innerText=this.innerTshowDate("+i+",parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=\"\"'&"+i+"年&/td&&/tr&";elseystr+="&tr&&td align=center style='cursor:hand' onmouseover=divS(this) onclick='myC_Top.cells[2].innerText=this.innerTshowDate("+i+",parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=\"\"'&"+i+"年&/td&&/tr&";ystr+="&tr&&td style='cursor:hand' onclick='createyear("+(year+20)+",myC_Top.cells[2])' align=center&下翻&/td&&/tr&";ystr+="&/table&";oDiv = myC.parentElement.nextSoDiv.innerHTML='';oDiv.innerHTML =showDiv(oDiv,obj.offsetTop+obj.offsetHeight,obj.offsetLeft);}function createmonth(month,obj)//创建月份选择{var oDmstr="&table class='move1' cellspacing=0 cellpadding=2 width="+(obj.offsetWidth+5)+"&";for(i=1;i&13;i++)if (month==i)mstr+="&tr style='background-color:#909eff'&&td style='color:height:16cursor:hand' align=center onclick='myC_Top.cells[3].innerText=this.innerTshowDate(parseInt(myC_Top.cells[2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=\"\"'&"+i+"月&/td&&/tr&";elsemstr+="&tr&&td align=center style='cursor:hand' onmouseover='divS(this)' onclick='myC_Top.cells[3].innerText=this.innerTshowDate(parseInt(myC_Top.cells[2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=\"\"'&"+i+"月&/td&&/tr&";mstr+="&/table&";oDiv = myC.parentElement.nextSoDiv.innerHTML='';oDiv.innerHTML =showDiv(oDiv,obj.offsetTop+obj.offsetHeight,obj.offsetLeft);}function showDiv(obj,top,left){obj.style.pixelTop=obj.style.pixelLeft=}function myCMove(obj){if(event.button==1){var X = obj.clientLvar Y = obj.clientTobj.style.pixelLeft= X+(event.x-myC_x);obj.style.pixelTop= Y+(event.y-myC_y);window.status=myC_y;}}function showDiv2(obj){inputName=obj.var e=var ot = obj.offsetTvar ol=obj.offsetLwhile(obj=obj.parentElement){ot+=obj.offsetTol+=obj.offsetL}myC_div.style.pixelTop=ot+e.offsetHmyC_div.style.pixelLeft=myC_div.style.display="block";}function createInput(name){myC_div.style.display='none';document.write("&input type='text' name='"+name+"' size=20 onfocus='showDiv2(this)'&");}// --------------End ---------------------&/script&&script&var myCalendar=new myCmyCalendar.year=2009;myCalendar.show();myCalendar.input("txt1");&/script&&/HEAD&
&BODY&&input type="text" name="test" onfocus="showDiv2(this)" readonly=true&&/BODY&&/HTML&
优质网站模板&>&文本框点击后弹出日历特效
文本框点击后弹出日历特效
上传大小:34KB
这是一个文本框日历的特效,官方下载的,保证文件完整可运行,点击文本框后在文本框下边弹出一个日历选择框,在文本框的input中添加一个onclik代码,其它的变,操作起来很方便
综合评分:4.5(10位用户评分)
所需积分/C币:
下载个数:52
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var q = $("#form1").serializeArray();
console.log(q);
var res_area_r = $.trim($(".res_area_r").val());
if (res_area_r == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
var mess = $(".res_area_r").val();
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, _username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click",'.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
$(".res_area_r").val($.trim($(".res_area").val()));
评论共有4条
效果挺好,就是改起来比较费时间
效果挺好,就是改起来比较费时间
很不错,很好用,好东西值得赞一个
效果挺好,就是灵活性太差,这不能改那不能改的
审核通过送C币
电气控制与PLC应用技术(第2版) 黄宋魏,邹金慧
创建者:williamanos
数据采集器开发
创建者:yongyong521
BMC 开发、使用标准手册、工具
创建者:duanzhang512
上传者其他资源上传者专辑
EasyUI+1.3+中文帮助手册
css3手册下载
css2.0使用手册
流量统计程序源码-流量统计 asp源码 源码 流量统计源码
IIS5.0安装程序包
行业热门标签
VIP会员动态
下载频道用户反馈专区
下载频道积分规则调整V1710.18
开通VIP,海量IT资源任性下载
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
CSDN&VIP年卡&4000万程序员的必选
为了良好体验,不建议使用迅雷下载
文本框点击后弹出日历特效
会员到期时间:
剩余下载个数:
剩余C币:593
剩余积分:0
为了良好体验,不建议使用迅雷下载
积分不足!
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
(仅够下载10个资源)
全站1200个资源免积分下载
为了良好体验,不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
全站600个资源免积分下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足,将扣除 10 C币
全站1200个资源免积分下载
为了良好体验,不建议使用迅雷下载
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限,免积分下载
你下载资源过于频繁,请输入验证码
你下载资源过于频繁,请输入验证码
您因违反CSDN下载频道规则而被锁定帐户,如有疑问,请联络:!
若举报审核通过,可奖励20下载分
被举报人:
举报的资源分:
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题,侵犯个人或公司的版权
*详细原因:
文本框点击后弹出日历特效TextBox中日历显示问题解决 - CSDN博客
TextBox中日历显示问题解决
当点击 &asp:TextBox&&/asp:TextBox&显示日历中所选日期后,日期不显示在&asp:TextBox&&/asp:TextBox&
的解决办法:
&&& 将&asp:TextBox&&/asp:TextBox&改为html中TextBox
&&&&&& &input id=&TextStartDay& runat=&server& name=&txtDate& readonly=&readonly&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& type=&text& style=&width: 117px& onclick=&calendar(this);& /&
id=&TextStartDay& runat=&server& name=&txtDate& readonly=&readonly&
type=&text& style=&width: 117px& onclick=&calendar(this);& /&
&asp:TextBox ID=&TextStartDay& runat=&server& name=&txtDate&
readonly=&true& type=&text& style=&width: 117px&
onclick=&calendar(this);& /&&/asp:TextBox&
document.write(&&div id=meizzCalendarLayer
style='border:1position: z-index: 9999; width: 267;
height: 150; display:'&&);
document.write(&&iframe name=meizzCalendarIframe scrolling=no
frameborder=0 width=267 height=150&&/iframe&&/div&&);
function writeIframe()
{ var strIframe = &&html&&head&&mce:style&&!--
&+ //&meta http-equiv='Content-Type' content='text/
charset=gb2312'& &*{font-size: 12 font-family: V}&+
&table#tableMain{border-top-width: 1 border-right-width:
1border-bottom-width: 1border-left-width: 1&+
&border-top-style:&+ &border-right-style:&+
&border-bottom-style:&+ &border-left-style:&+
&border-top-color: &+ WebCalendar.darkColor +&;&+ &border-right-color:
&+ WebCalendar.darkColor +&;&+ &border-bottom-color: &+
WebCalendar.darkColor +&;&+ &border-left-color: &+
WebCalendar.darkColor +&;}&+ &table#tableWeek td{ color: &+
WebCalendar.darkColor +&;background-color:&+ WebCalendar.lightColor
+&;border-bottom: 1}&+ // &&+ &td#meizzYearHead,
td#meizzYearMonth{ FONT-WEIGHT: FONT-SIZE: 12 COLOR: &+
WebCalendar.lightColor +&}&+ &.out { text-align:
color:&+WebCalendar.wordColor+&;FONT-SIZE:12PX:FONT-FAMILY:新宋体;}&+
&.over{ text-align:
color:#555555;FONT-SIZE:12PX:FONT-FAMILY:新宋体;}&+ //已取消该效果 & input{
border: 1px solid &+ WebCalendar.darkColor +&; padding-top: 1
height: 10; cursor:&+ & color:&+ WebCalendar.wordColor +&;
background-color: &+ WebCalendar.btnBgColor +&}&+
&.checkedDay{background:url(&+WebCalendar.SelectedImgUrl+&) no-repeat
text-align: color:&+ WebCalendar.checkedColor
+&;FONT-SIZE:12PX:FONT-FAMILY:新宋体;background-color:&+
WebCalendar.dayBgColor+&;}&+
&.ToDay{background:url(&+WebCalendar.ToDayImgUrl+&) no-repeat center
text-align: color:&+ WebCalendar.wordColor
+&;FONT-SIZE:12PX:FONT-FAMILY:新宋体;background-color:&+
WebCalendar.dayBgColor+&;}&+
&.ToToDay{background:url(&+WebCalendar.ToDayImgUrl+&) no-repeat center
text-align: color:&+ WebCalendar.todayColor
+&;FONT-SIZE:12PX:FONT-FAMILY:新宋体;background-color:&+
WebCalendar.dayBgColor+&;}&+
&.ToDayAndcheckedDay{background:url(&+WebCalendar.SetectedToDayImgUrl+&)
no-text-align: color:&+
WebCalendar.lightColor +&;FONT-SIZE:12PX:FONT-FAMILY:新宋体;
background-color:&+WebCalendar.dayBgColor+&;}&+
&.Left_Up{background:url(&+WebCalendar.LeftUpImgUrl+&) no-repeat center
text-align:}&+
&.Left_down{background:url(&+WebCalendar.LeftDownImgUrl+&) no-repeat
text-align: }&+
&.Right_Up{background:url(&+WebCalendar.RightUpImgUrl+&) no-repeat
text-align:}&+
&.Right_down{background:url(&+WebCalendar.RightDownImgUrl+&) no-repeat
text-align: }&+ &
--&&/mce:style&&style mce_bogus=&1&&&+ //&meta
http-equiv='Content-Type' content='text/ charset=gb2312'&
&*{font-size: 12 font-family: V}&+
&table#tableMain{border-top-width: 1 border-right-width:
1border-bottom-width: 1border-left-width: 1&+
&border-top-style:&+ &border-right-style:&+
&border-bottom-style:&+ &border-left-style:&+
&border-top-color: &+ WebCalendar.darkColor +&;&+ &border-right-color:
&+ WebCalendar.darkColor +&;&+ &border-bottom-color: &+
WebCalendar.darkColor +&;&+ &border-left-color: &+
WebCalendar.darkColor +&;}&+ &table#tableWeek td{ color: &+
WebCalendar.darkColor +&;background-color:&+ WebCalendar.lightColor
+&;border-bottom: 1}&+ // &&+ &td#meizzYearHead,
td#meizzYearMonth{ FONT-WEIGHT:
FONT-SIZE: 12 COLOR: &+ WebCalendar.lightColor +&}&+ &.out {
text-align:
color:&+WebCalendar.wordColor+&;FONT-SIZE:12PX:FONT-FAMILY:新宋体;}&+
&.over{ text-align:
color:#555555;FONT-SIZE:12PX:FONT-FAMILY:新宋体;}&+ //已取消该效果 & input{
border: 1px solid &+ WebCalendar.darkColor +&; padding-top: 1
height: 10; cursor:&+ & color:&+ WebCalendar.wordColor +&;
background-color: &+ WebCalendar.btnBgColor +&}&+
&.checkedDay{background:url(&+WebCalendar.SelectedImgUrl+&) no-repeat
text-align: color:&+ WebCalendar.checkedColor
+&;FONT-SIZE:12PX:FONT-FAMILY:新宋体;background-color:&+
WebCalendar.dayBgColor+&;}&+
&.ToDay{background:url(&+WebCalendar.ToDayImgUrl+&) no-repeat center
text-align: color:&+ WebCalendar.wordColor
+&;FONT-SIZE:12PX:FONT-FAMILY:新宋体;background-color:&+
WebCalendar.dayBgColor+&;}&+
&.ToToDay{background:url(&+WebCalendar.ToDayImgUrl+&) no-repeat center
text-align: color:&+ WebCalendar.todayColor
+&;FONT-SIZE:12PX:FONT-FAMILY:新宋体;background-color:&+
WebCalendar.dayBgColor+&;}&+
&.ToDayAndcheckedDay{background:url(&+WebCalendar.SetectedToDayImgUrl+&)
no-text-align: color:&+
WebCalendar.lightColor +&;FONT-SIZE:12PX:FONT-FAMILY:新宋体;
background-color:&+WebCalendar.dayBgColor+&;}&+
&.Left_Up{background:url(&+WebCalendar.LeftUpImgUrl+&) no-repeat center
text-align:}&+
&.Left_down{background:url(&+WebCalendar.LeftDownImgUrl+&) no-repeat
text-align: }&+
&.Right_Up{background:url(&+WebCalendar.RightUpImgUrl+&) no-repeat
text-align:}&+
&.Right_down{background:url(&+WebCalendar.RightDownImgUrl+&) no-repeat
text-align: }&+
&&/style&&/head&&body onselectstart='return false'
style=&margin: 0px& mce_style=&margin: 0px& oncontextmenu='return
false'&&form name=meizz&&; if (WebCalendar.drag){ strIframe +=
&&scr&+&ipt language=javascript&&+ &var drag=false, cx=0, cy=0, o
= parent.WebCalendar. function document.onmousemove(){&+
&if(parent.WebCalendar.drag &&
drag){if(o.style.left=='')o.style.left=0;
if(o.style.top=='')o.style.top=0;&+ &o.style.left =
parseInt(o.style.left) + window.event.clientX-&+ &o.style.top =
parseInt(o.style.top) + window.event.clientY-}}&+ &function
document.onkeydown(){ switch(window.event.keyCode){ case 27 :
parent.hiddenCalendar();&+ &case 37 : parent.prevM();
case 38 : parent.prevY(); case 39 : parent.nextM(); case
40 : parent.nextY();&+ &case 84 :
document.forms[0].today.click();} window.event.keyCode = 0;
window.event.returnValue=}&+ &function
dragStart(){cx=window.event.clientX; cy=window.event.clientY;
drag=}&/scr&+&ipt&&} strIframe += &&select
name=tmpYearSelect onblur='parent.hiddenSelect(this)'
style='z-index:1;position:top:3;left:75;display:none'&+ &
onchange='parent.WebCalendar.thisYear =this.
parent.hiddenSelect(this);
parent.writeCalendar();'&&/select&&+ &&select
name=tmpMonthSelect onblur='parent.hiddenSelect(this)'
style='z-index:1; position:top:3;left:115;display:none'&+ &
onchange='parent.WebCalendar.thisMonth=this.
parent.hiddenSelect(this);
parent.writeCalendar();'&&/select&&+ &&table id=tableMain
width=/&100%/& border=0 cellspacing=0 cellpadding=0&&+
&&tr&&td bgcolor='&+WebCalendar.darkColor+&'&&+ // &
&table width=100% height=/&30px/& id=tableHead border=0
cellspacing=0 cellpadding=0&&tr&&+ & &td width=10%
title='向前翻 1 月
快捷键:&' class=/&Left_Up/& onmousedown=/&parent.changeToLeftDown(this);/&
onmouseup=/&parent.changeToLeftUp(this);/& style=&cursor: hand&
mce_style=&cursor: hand& onclick='parent.prevM()'&&&/td&&+ &
&td width=40% id='meizzYearHead' algin='center' &+ & &/td&&+ &
&td width=40% id='meizzYearMonth' algin='left'&+ & &/td&&+ &
&td width=10% title='向后翻 1 月
快捷键:&' class=/&Right_Up/&
onmousedown=/&parent.changeToRightDown(this);/& onmouseup=/&parent.changeToRightUp(this);/&
onclick='parent.nextM()' style=&cursor: hand& mce_style=&cursor:
hand&&&&/td&&/tr&&/table&&+
&&/td&&/tr&&tr&&td&&table id=tableWeek
style=&/& mce_style=&/&&margin-top:1/& border=0 width=100%
cellpadding=0 cellspacing=0 &; if(WebCalendar.drag){strIframe +=
&onmousedown='dragStart()' onmouseup='drag=false'
onmouseout='drag=false'&;} strIframe += & borderColorLight='&+
WebCalendar.lightColor +&' borderColorDark='&+ WebCalendar.darkColor
+&'&&+ & &tr align=/&center/& height=/&15px/& &&td nowrap
&星期日&/td&&td nowrap&星期一&/td&&td
nowrap&星期二&/td&&td nowrap&星期三&/td&&td
nowrap&星期四&/td&&td nowrap&星期五&/td&&td
nowrap&星期六&/td&&/tr&&/table&&+
&&/td&&/tr&&+ &&tr&&td height=1 algin=/&center/&
mce_style=&/&&background-color:&+WebCalendar.darkColor+&/&&&/td&&/tr&&+
& &tr&&td algin=/&center/& valign=top bgcolor='&+
WebCalendar.lightColor +&'&&+ & &table id=tableDay width=100%
border=0 cellspacing=0 cellpadding=0&&; for(var x=0; x&5; x++){
strIframe += &&tr HEGHT=/&13PX/&&&; for(var y=0; y&7; y++)
strIframe += &&td class=out id='meizzDay&+ (x*7+y)
+&'&&/td&&; strIframe += &&/tr&&;} strIframe +=
&&tr&&; for(var x=35; x&39; x++) strIframe += &&td
class=out id='meizzDay&+ x +&'&&/td&&; strIframe +=&&td
colspan='3' title='&+ WebCalendar.regInfo +&'
bgcolor=/&&+WebCalendar.dayBgColor+&/&&&&/td&&/tr&&/table&&+
&&/td&&/tr&&tr&&td bgcolor='&+
WebCalendar.lightColor +&'&&+ & &table border=0 cellpadding=1
cellspacing=0 width=100% bgcolor=/&&+WebCalendar.dayBgColor+&/&&&+ &
&tr&&td class='ToDay'&&&&&&&&&+ & &/td&&td
alt=/&点击选中今天,快捷键[T]/& align=/&left/& style=&/&
mce_style=&/&&cursor:/& onclick=/&parent.returnDate(new
Date().getDate() +'/'+ (new Date().getMonth() +1) +'/'+ new
Date().getFullYear())/&&&+ & &B&今天:&+ new Date().getFullYear()
+&/&+ (new Date().getMonth() +1) +&/&+ new Date().getDate()
+&&/B&&+ & &/td&&/table&&+
&&/td&&/tr&&table&&/form&&+
&&/body&&/html&&; with(WebCalendar.iframe) {
document.writeln(strIframe); document.close(); for(var i=0; i&39;
i++) { WebCalendar.dayObj[i] = eval(&meizzDay&+ i);
WebCalendar.dayObj[i].onmouseover = dayMouseO
WebCalendar.dayObj[i].onmouseout = dayMouseO
WebCalendar.dayObj[i].onclick = returnD } }
//document.getElementById(&22&).innerText = strI
//alert(strIframe);
function WebCalendar() //初始化日历的设置
{ this.regInfo = &关闭的快捷键:[Esc]&; this.daysMonth = new Array(31, 28, 31,
30, 31, 30, 31, 31, 30, 31, 30, 31); this.day = new Array(39);
//定义日历展示用的数组 this.dayObj = new Array(39); //定义日期展示控件数组 this.dateStyle =
//保存格式化后日期数组 this.objExport = //日历回传的显示控件 this.eventSrc =
//日历显示的触发控件 this.inputDate = //转化外的输入的日期(d/m/yyyy)
this.thisYear = new Date().getFullYear(); //定义年的变量的初始值 this.CurrentYear
= new Date().getFullYear(); this.thisMonth = new Date().getMonth()+ 1;
//定义月的变量的初始值 this.thisDay = new Date().getDate(); //定义日的变量的初始值
this.today = this.thisDay +&/&+ this.thisMonth +&/&+ this.thisY
//今天(d/m/yyyy) this.iframe = window.frames(&meizzCalendarIframe&);
//日历的 iframe 载体 this.calendar = getObjectById(&meizzCalendarLayer&);
//日历的层 this.dateReg = &&; //日历格式验证的正则式 //自定义类别
this.SelectedImgUrl=&../resource/bgCurDate.gif& ;
this.ToDayImgUrl=&../resource/bgToday1.gif& ;
this.SetectedToDayImgUrl=&../resource/bgToday2.gif& ;
this.LeftUpImgUrl=&../resource/left_normal.gif& ;
this.LeftDownImgUrl=&../resource/left_down.gif& ;
this.RightUpImgUrl=&../resource/right_normal.gif& ;
this.RightDownImgUrl=&../resource/right_down.gif& ; this.yearFall = 5;
//定义年下拉框的年差值 this.format = &yyyy/mm/dd&; //回传日期的格式 this.timeShow
//是否返回时间
//是否允许拖动
this.darkColor
= &#0A246A&;
//控件的暗色
this.lightColor = &#FFFFFF& ;
//&#FFFFFF&;
//控件的亮色
this.checkedColor = &#FF0000&;
this.btnBgColor = &#FFF5A0&;
//控件的按钮背景色
this.wordColor
= &#000000&;
//控件的文字颜色
this.wordDark
= &#D4D0C8&;
//控件的暗文字颜色
this.dayBgColor = &#Fefefe&;
//日期数字背景色
this.todayColor = &#0000FF&;
//今天在日历上的标示背景色,已经用图片取代
this.DarkBorder = &#FFE4C4&;
//日期显示的立体表达色 ,未使用
var WebCalendar = new WebCalendar();
function calendar() //主调函数
var e = window.event.srcE
writeIframe();
var o = WebCalendar.calendar. WebCalendar.eventSrc =
if (arguments.length == 0) WebCalendar.objExport =
else WebCalendar.objExport = eval(arguments[0]);
WebCalendar.objE
WebCalendar.iframe.tableWeek.style.cursor = WebCalendar.drag ? &move& : &default&;
var t = ob.offsetTop,
h = ob.clientHeight, l = ob.offsetLeft, p = ob.
while (ob = ob.offsetParent){t += ob.offsetT l += ob.offsetL}
o.display = &&; WebCalendar.iframe.document.body.focus();
var cw = WebCalendar.calendar.clientWidth, ch = WebCalendar.calendar.clientH
var dw = document.body.clientWidth, dl = document.body.scrollLeft, dt = document.body.scrollT
if (document.body.clientHeight + dt - t - h &= ch) o.top = (p==&image&)? t + h : t + h + 6;
else o.top
= (t - dt & ch) ? ((p==&image&)? t + h : t + h + 6) : t -
if (dw + dl - l &= cw) o.left = else o.left = (dw &= cw) ? dw - cw + dl :
(!WebCalendar.timeShow) WebCalendar.dateReg = /^(/d{1,4})(-|//|.)(/d{1,2})/2(/d{1,2})$/;
else WebCalendar.dateReg = /^(/d{1,4})(-|//|.)(/d{1,2})/2(/d{1,2}) (/d{1,2}):(/d{1,2}):(/d{1,2})$/;
if (WebCalendar.objExport.value.trim() != &&)
WebCalendar.dateStyle = WebCalendar.objExport.value.trim().match(WebCalendar.dateReg);
if (WebCalendar.dateStyle == null)
WebCalendar.thisYear
= new Date().getFullYear();
WebCalendar.thisMonth
= new Date().getMonth()+ 1;
WebCalendar.thisDay
= new Date().getDate();
alert(&原文本框里的日期有错误!/n可能与你定义的显示时分秒有冲突!&);
writeCalendar();
WebCalendar.thisYear
= parseInt(WebCalendar.dateStyle[1], 10);
WebCalendar.thisMonth
= parseInt(WebCalendar.dateStyle[3], 10);
WebCalendar.thisDay
= parseInt(WebCalendar.dateStyle[4], 10);
WebCalendar.inputDate
= parseInt(WebCalendar.thisDay, 10) +&/&+ parseInt(WebCalendar.thisMonth, 10) +&/&+
parseInt(WebCalendar.thisYear, 10); writeCalendar();
else{ writeCalendar();}
//writeCalendar();
function funMonthSelect() //月份的下拉框
var m = isNaN(parseInt(WebCalendar.thisMonth, 10)) ? new Date().getMonth() + 1 : parseInt(WebCalendar.thisMonth);
var e = WebCalendar.iframe.document.forms[0].tmpMonthS
for (var i=1; i&13; i++) e.options.add(new Option(i +&月&, i));
e.style.display = &&; e.value = e.focus(); window.status = e.style.
function funYearSelect() //年份的下拉框
var n = WebCalendar.yearF
var e = WebCalendar.iframe.document.forms[0].tmpYearS
var y = isNaN(parseInt(WebCalendar.CurrentYear, 10)) ? new Date().getFullYear() : parseInt(WebCalendar.CurrentYear);
y = (y &= 1000)? 1000 : ((y &= 9999)? 9999 : y);
var min = (y - n &= 1000) ? y - n : 1000;
var max = (y + n &= 9999) ? y + n : 9999;
min = (max == 9999) ? max-n*2 :
max = (min == 1000) ? min+n*2 :
for (var i= i&= i++) e.options.add(new Option(i +&年&, i));
e.style.display = &&; e.value = e.focus();
function prevM()
//往前翻月份
WebCalendar.thisDay = 1;
if (WebCalendar.thisMonth==1)
WebCalendar.thisYear--;
WebCalendar.thisMonth=13; } WebCalendar.thisMonth--; writeCalendar();
function nextM() //往后翻月份
{ WebCalendar.thisDay = 1; if (WebCalendar.thisMonth==12) {
WebCalendar.thisYear++; WebCalendar.thisMonth=0; }
WebCalendar.thisMonth++; writeCalendar();
function prevY(){WebCalendar.thisDay = 1; WebCalendar.thisYear--;
writeCalendar();}//往前翻 Year
function nextY(){WebCalendar.thisDay = 1; WebCalendar.thisYear++;
writeCalendar();}//往后翻 Year
function hiddenSelect(e){for(var i=e.options. i&-1;
i--)e.options.remove(i); e.style.display=&none&;}
function getObjectById(id){ if(document.all)
return(eval(&document.all.&+ id)); return(eval(id)); }
hiddenCalendar(){getObjectById(&meizzCalendarLayer&).style.display =
function appendZero(n){return((&00&+ n).substr((&00&+
n).length-2));}//日期自动补零程序
function String.prototype.trim(){return
this.replace(/(^/s*)|(/s*$)/g,&&);}
function dayMouseOver()
{ this.style.cursor=&hand& ; // this.className = &over&;
//this.style.backgroundColor = WebCalendar.darkC
//if(WebCalendar.day[this.id.substr(8)].split(&/&)[1] ==
WebCalendar.thisMonth) //this.style.color = WebCalendar.lightC
function dayMouseOut()
{ this.style.cursor=&normal& ;
// var d = WebCalendar.day[this.id.substr(8)], a = d.split(&/&);
// this.style.removeAttribute('backgroundColor');
// if(a[1] == WebCalendar.thisMonth && d != WebCalendar.today)
// if(WebCalendar.dateStyle && a[0] ==
parseInt(WebCalendar.dateStyle[4], 10))
// this.style.color = WebCalendar.lightC
// this.style.color = WebCalendar.wordC
function changeToLeftDown(preobj)
{ preobj.className=&Left_Down& ;
function changeToLeftUp(preobj)
{ preobj.className=&Left_Up& ;
function changeToRightDown(backobj)
{ backobj.className = &Right_Down& ;
function changeToRightUp(backobj)
{ backobj.className = &Right_Up& ;
function writeCalendar() //对日历显示的数据的处理程序
{ var y = WebCalendar.thisY var m = WebCalendar.thisM var d =
WebCalendar.thisD WebCalendar.daysMonth[1] = (0==y%4 &&
(y%100!=0 || y%400==0)) ? 29 : 28; if (!(y&=9999 && y &=
1000 && parseInt(m, 10)&0 && parseInt(m, 10)&13
&& parseInt(d, 10)&0)){ alert(&对不起,你输入了错误的日期!&);
WebCalendar.thisYear = new Date().getFullYear(); WebCalendar.thisMonth
= new Date().getMonth()+ 1; WebCalendar.thisDay = new Date().getDate();
} y = WebCalendar.thisY m = WebCalendar.thisM d =
WebCalendar.thisD //写头了 WebCalendar.iframe.meizzYearHead.innerHTML =
&&span style=&/& mce_style=&/&&float:margin-right:2/&
title='点击此处选择年份' onclick='parent.funYearSelect(parseInt(this.innerText,
10))'&+ //&
onmouseover='this.style.color=parent.WebCalendar.wordColor';&+ //&
onmouseout=/&this.style.color='' ;/ &&&+ y +& 年&/span&&;
WebCalendar.iframe.meizzYearMonth.innerHTML = &&span style=&/&
mce_style=&/&&float:margin-right:2/& title='点击此处选择月份'
algin=/&left/& onclick='parent.funMonthSelect(parseInt(this.innerText,
10))'&+ //&
onmouseover='this.style.color=parent.WebCalendar.wordColor';&+ // &
onmouseout=/&this.style.color='' ;/ &&&+parseInt(m, 10) +&
月&/span&&; WebCalendar.daysMonth[1] = (0==y%4 &&
(y%100!=0 || y%400==0)) ? 29 : 28; //闰年二月为29天 var w = new Date(y, m-1,
1).getDay(); var prevDays = m==1 ? WebCalendar.daysMonth[11] :
WebCalendar.daysMonth[m-2]; for(var i=(w-1); i&=0; i--) //这三个 for
循环为日历赋数据源(数组 WebCalendar.day)格式是 d/m/yyyy { WebCalendar.day[i] =
prevDays +&/&+ (parseInt(m, 10)-1) +&/&+ if(m==1) WebCalendar.day[i]
= prevDays +&/&+ 12 +&/&+ (parseInt(y, 10)-1); prevDays--; } for(var
i=1; i&=WebCalendar.daysMonth[m-1]; i++) WebCalendar.day[i+w-1] = i
+&/&+ m +&/&+ for(var i=1; i&39-w-WebCalendar.daysMonth[m-1]+1;
i++) { WebCalendar.day[WebCalendar.daysMonth[m-1]+w-1+i] = i +&/&+
(parseInt(m, 10)+1) +&/&+ if(m==12) WebCalendar.day[WebCalendar.daysMonth[m-1]+w-1+i] =
i +&/&+ 1 +&/&+ (parseInt(y, 10)+1); } for(var i=0; i&39; i++)
//这个循环是根据源数组写到日历里显示 { var a = WebCalendar.day[i].split(&/&);
WebCalendar.dayObj[i].innerText = a[0]; WebCalendar.dayObj[i].title =
a[2] +&/&+ appendZero(a[1]) +&/&+ appendZero(a[0]);
WebCalendar.dayObj[i].bgColor = WebCalendar.dayBgC
//WebCalendar.dayObj[i].style.color = WebCalendar.wordC if
((i&10 && parseInt(WebCalendar.day[i], 10)&20) ||
(i&27 && parseInt(WebCalendar.day[i], 10)&12))
WebCalendar.dayObj[i].style.color = WebCalendar.wordD
if(WebCalendar.inputDate==WebCalendar.day[i] &&
WebCalendar.day[i] == WebCalendar.today ) {
WebCalendar.dayObj[i].className=&ToDayAndcheckedDay& ; } else if
(WebCalendar.day[i] == WebCalendar.today) //设置今天在日历上反应出来的颜色 {
WebCalendar.dayObj[i].className=&ToToDay& ; } if
(WebCalendar.inputDate==WebCalendar.day[i]) //设置输入框里的日期在日历上的颜色 {
WebCalendar.dayObj[i].className=&checkedDay& ; } }
} function selectText(obj,sX) { if(obj.value.length !=10 ||
obj.readOnly) var aa=obj.createTextRange(); if(sX &=0
&& sX &=25) // 33 45 51 63 { aa.moveEnd(&word&,-4); } else
if(sX &=33 && sX &=45) { aa.moveStart(&word&,2);
aa.moveEnd(&word&,-2); } else if(sX &=51 && sX &=63) {
aa.moveStart(&word&,4); } else { } aa.select(); return
} function getPos(obj) { obj.focus(); var
workRange=document.selection.createRange(); obj.select(); var
allRange=document.selection.createRange();
workRange.setEndPoint(&StartToStart&,allRange); var
len=workRange.text. workRange.collapse(false);
workRange.select(); } function DateFormat(vDateName,
vDateValue, e) { if(vDateName.readOnly) var checkLen =
getPos(vDateName); var strSeperator=&-& ; var whichCode =
(window.Event) ? e.which : e.keyC var alphaCheck = &
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ/-&; if
(alphaCheck.indexOf(vDateValue) &= 1) { vDateName.value =
vDateName.value.substr(0, (vDateValue.length-1)); } if
(whichCode == 8) else { var strCheck =
'47,48,49,50,51,52,53,54,55,56,57,58,59,95,96,97,98,99,100,101,102,103,104,105';
if (strCheck.indexOf(whichCode) != -1) { if (vDateValue.length == 4) {
vDateName.value = vDateValue+strS } if (vDateValue.length ==
7) { if(vDateName.value.split(strSeperator).length==2) vDateName.value
= vDateValue+strS } if(vDateValue.length ==10) {
//alert(checkLen); if(checkLen ==4) { selectText(vDateName,40) ; }
if(checkLen ==7) { selectText(vDateName,60) ; } } } } }
function CheckDateTime(str){ var reg = /^(/d+)-(/d{1,2})-(/d{1,2})$/;
var r = str.match(reg); if(r==null) r[2]=r[2]-1; var d= new
Date(r[1],
r[2],r[3] );
if(d.getFullYear()!=r[1])
if(d.getMonth()!=r[2])
if(d.getDate()!=r[3])
function checkInput(obj)
if(obj.value==&&)
var o = CheckDateTime(obj.value);
alert(&日期格式错误,请检查/正确的格斯如下:/nYYYY/MM/DD&);
obj.select();
function returnDate() //根据日期格式等返回用户选定的日期
if(WebCalendar.objExport)
var returnV
var a = (arguments.length==0) ? WebCalendar.day[this.id.substr(8)].split(&/&) : arguments[0].split(&/&);
var d = WebCalendar.format.match(/^(/w{4})(-|//|.|)(/w{1,2})/2(/w{1,2})$/);
if(d==null){alert(&你设定的日期输出格式不对!/r/n/r/n请重新定义 WebCalendar.format !&);}
var flag = d[3].length==2 || d[4].length==2; //判断返回的日期格式是否要补零
returnValue = flag ? a[2] +d[2]+ appendZero(a[1]) +d[2]+ appendZero(a[0]) : a[2] +d[2]+ a[1] +d[2]+ a[0];
if(WebCalendar.timeShow)
var h = new Date().getHours(), m = new Date().getMinutes(), s = new Date().getSeconds();
returnValue += flag ? & &+ appendZero(h) +&:&+ appendZero(m) +&:&+ appendZero(s) : & &+
+&:&+ m +&:&+
WebCalendar.objExport.value = returnV
hiddenCalendar();
function document.onclick()
if(WebCalendar.eventSrc != window.event.srcElement) hiddenCalendar();
本文已收录于以下专栏:
相关文章推荐
TextBox属性设为Readonly时,C#后端程序无法取值的问题解决
TextBox在Readonly時以Javascript給值無法在後端取得,我自己在测试的时候,在默认Readonly ...
由于net平台的普及问题  为了尽可能的增加用户使用量  很多应用基于2.0写的 所以不考虑wpf
众所周知 winform 的textbox的颜色不能使用 带有 Alpha 属性的颜色 即半透...
最近在做WPF,有个需求需要动态生成TextBox,实现很简单,只需要把TextBox动态添加到ListBox中就可以了。后来对方说要在TextBox中显示水印,想了很多办法。
      首先WP...
aspx页面:
添加引用:
控件调用:
CalendarMei.js文件
/* 调用方法:不能用onfocus,要用onclick
// 删除前后空格
他的最新文章
讲师:宋宝华
讲师:何宇健
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)

我要回帖

更多关于 js点击文本框弹出日历 的文章

 

随机推荐