推荐一个小巧的JS日历
脚本的核心就是DateAdd函数，点击下面的演示看看效果：
查看演示
调用方法很简单，
第一步：在页面顶部包含calenderJS.js文件：
<script src="path/to/calenderJS.js"></script>
点击下载这个js文件
第二步：给你的输入框增加onfocus事件属性：
<input type="text" onfocus="HS_setDate(this)">
HS_setDate(this) 是初始化的函数
此日历已经应用到本blog的侧边栏，并加入ajax功能，异步查询有日志的日子，并加粗。
JS 日历
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}
Date Picker
ver:1.0
| 文本文本文本 | 点击输入框 | 文本文本文本 |
| 点击输入框 | 文本 | 文本文本文本 |
| 文本文本文本 | 点击输入框 | 文本文本 |
- 不需要其他框架类库
- 支持ie6、firefox、opera
- 点击年份与月份可以下拉选择
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
JS日历 推荐
两年前写过一个日历,可是兼容性不好. 这次重新写了一次. 兼容多种浏览器 了解了不少东东,特别是对于W3C标准化． 如 FF和IE 对box模型的理解不同 box.style{width:100;border 1px;} ie理解 为 box.width = 100 ff 理解 为 box.width = 100 + 1*2 = 102 可以使用这种方法使两种浏览器都可以正常浏览 box.style{width:100!important; width /**/:120px;bo
-
js编写当天简单日历效果【实现代码】
之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理.自己也尝试着做了一下,收获蛮大,掌握了基本的实现原理后,再想增加更多的功能,完全就可以自由发挥了,先在这里分享一下吧,有兴趣的可以试试! 一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解
-
简约JS日历控件 实例代码
运行结果如下: 复制代码 代码如下: <script type="text/javascript" language="javascript">function choose_date_czw(date_id,objtd){if(date_id=="choose_date_czw_close"){ document.getElementByIdx_x_x("choose_date_czw_id").style
-
php+javascript的日历控件
复制代码 代码如下: <html> <head> <title>js calendar</title> <script language="javascript"> /* Copyright Mihai Bazon, 2002-2005 | www.bazon.net/mishoo * ----------------------------------------------------------- * * The DHT
-
js日历控件（可精确到分钟）
.menu_iframe{position:absolute; visibility:inherit; top:0px; left:0px; width:170px; z-index:-1; filter: Alpha(Opacity=0);} .cal_table{ border:#333333 solid 1px; border-collapse:collapse; background:#ffffff; font-size:12px} .cal_table td{ border:1px #
-
js css+html实现简单的日历
web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. html html部分比较简单,声明一个div,具体的html用javascript生成.整体内容大概是这样的: <!doctype html> <html> <head> <meta charset='utf-8'> <link rel='styleshe
-
轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤 本日历插件支持cmd模块化 如下调用: 复制代码 代码如下: xvDate({ 'targetId':'date1',//时间写入对象的id 'triggerId':['date1','dateBtn1'],//触发事件的对象id 'alignId':'datesWrap1',//日历对齐对象 'format':'-',//时间格式 默认'YYYY-
-
纯JS实现简单的日历
本文实例为大家分享了纯JS实现日历的具体代码,供大家参考,具体内容如下 封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" var yy=f23timeselecta1.value,mm=f23timeselecta2.value-1 var newdara=new Date() var dd=newdara.getDate(); var d=new Date(y
-
JS学习之一个简易的日历控件
这个日历控件类似于园子用的日历,如下图: 这种日历控件实现起来不难,下面简单分析下我的思路: 首先,是该控件的可配置项: 复制代码 代码如下: ... settings: { firstDayOfWeek: 1, baseClass: "calendar", curDayClass: "curDay", prevMonthCellClass: "prevMonth", nextMonthCellClass: "nextMonth&quo
-
纯js简单日历实现代码
复制代码 代码如下: <!doctype html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body,ul,li,h2,p { margin:0px; pa