推荐一个小巧的JS日历_时间日期-tutorial js-php.cn

推荐一个小巧的JS日历_时间日期

WBOY

Lepaskan： 2016-05-16 19:10:29

asal

1191 人浏览过

脚本的核心就是DateAdd函数，点击下面的演示看看效果：
查看演示

调用方法很简单，
第一步：在页面顶部包含calenderJS.js文件：

点击下载这个js文件

第二步：给你的输入框增加onfocus事件属性：

HS_setDate(this) 是初始化的函数

此日历已经应用到本blog的侧边栏，并加入ajax功能，异步查询有日志的日子，并加粗。

<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>

<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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]