js中输入日期及用js显示日历

104zz

浏览: 1507759 次
性别:
来自: 深圳

最近访客更多访客>>

pascadores

zjlovety

wangorg

Isnotsuitable

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js显示日历

js中输入日期及用js显示日历

这个例子相对比较简单首先创建一个文件然后编辑代码：写好头部以及体部标签在体部标签中实现js语言积极函数，由于比较简单就不另创建一个js文件了：

<html>
<head>
</head>

<body>
   <div align="center">
    <script language="javascript">

	//弹出输日期入框函数
	function prom()
    {
		//将输入的内容赋给变量 name 
        var name=prompt("请输入日期格式如：2012-9-19","");
       //这里需要注意的是，prompt有两个参数，前面是提示的话，后面当对话框出来后在对话框里的默认值
        if(name)//如果返回的有内容
        {
				//将输入的得日期字符串转成Date类型
				var my = strToDate(name);
				if(!isNaN(my))//判断输入正确显示日期否则弹出错误提示
					 showc(my);
				else{
					alert("请输入正确日期！");
					prom();
				}
				
				
         }
    }
	//日期字符串转Date格式函数
	function strToDate(str)
	{
		var arys= new Array();
		arys=str.split('-');
		var newDate=new Date(arys[0],arys[1],arys[2]); 
		return newDate;
	}
    
	//显示日历函数
     function showc(my) {
      var k=1;
      var j=1;
      var today;
      var tomonth;
      var theday=1;
	  var month = my.getMonth();
	  if(my.getMonth()==0){
		month=12;
	  }
      var max;
      var temp;
      var tempday;
      document.write ("<b>" + my.getFullYear() + "-" + month + "</b>");
      document.write ("<table border='1' width='273' height='158'>");
      document.write ("<tr  bgcolor='#99cc33' >");
      document.write ("<td height='23' width='39'><font color='red'>日</font></td>");
      document.write ("<td height='23' width='39'>一</td>");
      document.write ("<td height='23' width='39'>二</td>");
      document.write ("<td height='23' width='39'>三</td>");
      document.write ("<td height='23' width='39'>四</td>");
      document.write ("<td height='23' width='39'>五</td>");
      document.write ("<td height='23' width='39'>六</td>");
      document.write ("</tr>");
      temp=my.getDate();
      my.setDate(1);
      tempday=my.getDay();
      my.setDate(temp);
		
      switch (month) {
	   case 0:
       case 1:
       case 3:
       case 5:
       case 7:
       case 8:
       case 10:
       case 12:
        max=31;
        break;
       case 4:
       case 6:
       case 9:
       case 11:
        max=30;
        break;
      case 2:
	   if(isPYear(my.getFullYear()))
			max=28;
	   else
			max=29;
		break;
      }
      for(k=0;k<6;k++) {
       document.write ("<tr>");
       for(j=0;j<=6;j++) {	
	   if(theday==my.getDate()) 
		document.write ("<td height='23' width='39' bgcolor='#3366ff' style='vertical-align:middle; text-align:center;'  >");
		else
		document.write ("<td height='23' width='39' style='vertical-align:middle; text-align:center;'  >");
        if(j>=(tempday)) {
         tempday=0;
         if(theday<=max) {
			document.write ("<font color='black'>");
          if(theday==my.getDate()) 
           document.write ("<font color='#ffffff' >" + theday + "</font>");
           else if(j==0)
           document.write ("<font color='red'>" + theday + "</font>");
          else
           document.write (theday + "</font>");
          theday++;
         }
        }
        document.write ("</td>");
       }
       document.write ("</tr>");
      }
      document.write ("</table>");
     }
	 function isPYear(pYear){
		if((pYear%4==0 && pYear%100!=0)||(pYear%100==0 && pYear%400==0)){
		return true;
		}else{
         return false;
		}
	 }
    prom();
    </script>
   </div>
<body>
</html>

运行效果：