这个例子相对比较简单首先创建一个文件然后编辑代码:写好头部以及体部标签在体部标签中实现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>
运行效果:
- 大小: 6.5 KB
- 大小: 2.8 KB
分享到:
相关推荐
JavaScript编写的选择性输入日历控件。首先引入该JS文件,某个文本框需要输入日期时,为该文本框添加onfocus事件,事件处理函数为new Calendar(0).show(this)。即添加“onfocus='new Calendar(0).show(this)”。
但是这些控件仅仅是好看,在很多业务系统中,操作员更希望所有的信息都是靠键盘输入,这样的输入速度,比一会儿用键盘,一会儿用鼠标快很多。本例是一个可以动态配置日期/时间输入项的键盘时间输入控件。支持:1、...
纯js日历,只要在页面调用就可以实现日历输入文本框,日历选择有年份,月份,日期,可选部分有小时,分钟,秒。可以直接选择当日日期
JS 日历演示 只要在Text中用mouse点击便可以轻松输入日期
1. 这个日期控件在IE上可以运行,在Firfox与google 浏览器上不可以运行。 2. 只要把test.html,tenkey.js,tenkey.css,DateBox.html放到同一个目录上便可以运行。
三款漂亮的js日历控件 表单输入日期.zip
js日历控件大全,包含测试例子test.html,可设置"年月日"、"年月"、"年月日时",输入格式可自定义
很好很实用很美观的javascript编写的日历控件, 包括3款input栏的日期小控件 以及2款js日历,精确到秒,非常实用!速速下载吧!!
功能强大的JavaScript日历控件 最关键的,无偿的永久的提供给大家免费使用,含全部源代码。 功能简介: 一、更人性化,更全面的功能 大部分日期控件都具备这些功能,但是本日历控件做的更全面,更人性化,并且速度...
js日历控件,可以通过表单输入日期,进行相关日期的查询和设置
免费的Javascript日期输入及选择控件大杂烩!
应该说是现在最全,最方便的日历,支持UTF-8及世界上所有的语言,很好用,就是文件大了一些。 博文链接:https://fangfeixue.iteye.com/blog/128156
1、纯HTML脚本编写的组件,无需下载、注册、安装等; 2、支持手动写入。用户可以手动向输入框中填写日期。 3、手动输入的日期,则该组件无法判断日期的合法性,需要适用校验组件进行页面校验。
自写自用一款简易JavaScript日历,代码和用法简单,本日期选择器是用在一个小系统中,代码量很少,而且调用时候也极其简单,不两行代码就搞定了,当然了,还有一些小细节是有待完善,不过现有代码不会影响正常的使用...
一个封装的JavaScript日历控件,可用于文本框输入选择日期使用,该控件的主要好处是:js代码全部封装到一个js文件中,不会同页面中的其他脚本或者css样式定义冲突。
ASP.NET 日期选择 控件 js ASP.NET 日期选择 控件 js
javaScript已经处理好的日期格式,用于文本框的输入,下载后,要先阅读readme.txt文件。
自己写的一个自动生成当前月历的js,大小自适应,显示当前日期,可以切换月份 。