页面导航：首页 → 网络编程 → javascript → 网页特效 → 时间日期 → 正文内容

推荐一个小巧的JS日历

发布：dxy 字体：[增加减小] 类型：转载

脚本的核心就是DateAdd函数，点击下面的演示看看效果：
查看演示
调用方法很简单，
第一步：在页面顶部包含calenderJS.js文件：
<script src="path/to/calenderJS.js"></script>
点击下载这个js文件
第二步：给你的输入框增加onfocus事件属性：
<input type="text" onfocus="HS_setDate(this)">
HS_setDate(this) 是初始化的函数
此日历已经应用到本blog的侧边栏，并加入ajax功能，异步查询有日志的日子，并加粗。

点击运行可以看到效果:

<!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> JS 日历 </title> 
  <meta name="author" content="快乐笛子"> 
  <meta name="keywords" content="js日历,calender"> 
  <meta name="description" content="js日历"> 
  <script type="text/javascript" src="/downtools/js/wodcalenderJS.js"></script> 
  <style> 
  body {font-size:12px} 
  td {text-align:center} 
  h1 {font-size:26px;} 
  h4 {font-size:16px;} 
  em {color:#999; margin:0 10px; font-size:11px; display:block} 
  </style> 
 </head>

<body> 
<h1>Date Picker</h1> 
<h4 style="border-bottom:1px solid #ccc">ver:1.0</h4> 
<table border=1 width=400 height=150> 
    <tr> 
        <td>文本文本文本</td> 
        <td>点击输入框</td> 
        <td>文本文本文本</td> 
    </tr> 
    <tr> 
        <td>点击输入框</td> 
        <td><input type="text" style="width:70px" onfocus="HS_setDate(this)">文本</td> 
        <td>文本文本文本</td> 
    </tr> 
    <tr> 
        <td>文本文本文本</td> 
        <td>点击输入框</td> 
        <td>文本<input type="text" style="width:70px" onfocus="HS_setDate(this)">文本</td> 
    </tr> 
</table>

<ul> 
<li>不需要其他框架类库</li> 
<li>支持ie6、firefox、opera</li> 
<li>点击年份与月份可以下拉选择</li> 
</ul> </html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：推荐一个小巧的JS日历

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：javascript 表单日期选择效果
下一篇文章：北京奥运会倒计时代码

·在百度中搜索关于“推荐一个小巧的JS日历”相关内容
·在谷歌中搜索关于“推荐一个小巧的JS日历”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

推荐一个小巧的JS日历

文章评论

同类文章

最近更新

热点排行

推荐一个小巧的JS日历

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行