推荐一个小巧的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需刷新才能执行]

赞 (0)

相关推荐

  • JS学习之一个简易的日历控件

    JS学习之一个简易的日历控件

    这个日历控件类似于园子用的日历,如下图: 这种日历控件实现起来不难,下面简单分析下我的思路: 首先,是该控件的可配置项: 复制代码 代码如下: ... settings: { firstDayOfWeek: 1, baseClass: "calendar", curDayClass: "curDay", prevMonthCellClass: "prevMonth", nextMonthCellClass: "nextMonth&quo

  • 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简单日历实现代码

    纯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

  • 简约JS日历控件 实例代码

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

  • js css+html实现简单的日历

    js css+html实现简单的日历

    web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. html html部分比较简单,声明一个div,具体的html用javascript生成.整体内容大概是这样的: <!doctype html> <html> <head> <meta charset='utf-8'> <link rel='styleshe

  • 纯JS实现简单的日历

    纯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编写当天简单日历效果【实现代码】

    js编写当天简单日历效果【实现代码】

    之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理.自己也尝试着做了一下,收获蛮大,掌握了基本的实现原理后,再想增加更多的功能,完全就可以自由发挥了,先在这里分享一下吧,有兴趣的可以试试! 一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解

  • 轻量级的原生js日历插件calendar.js使用指南

    使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤 本日历插件支持cmd模块化 如下调用: 复制代码 代码如下: xvDate({ 'targetId':'date1',//时间写入对象的id 'triggerId':['date1','dateBtn1'],//触发事件的对象id 'alignId':'datesWrap1',//日历对齐对象 'format':'-',//时间格式 默认'YYYY-

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

  • php+javascript的日历控件

    复制代码 代码如下: <html> <head> <title>js calendar</title> <script language="javascript"> /* Copyright Mihai Bazon, 2002-2005 | www.bazon.net/mishoo * ----------------------------------------------------------- * * The DHT

随机推荐