javascript JTimer_2.0 时间日历控件使用方法

JS文件下载:

1. CSDN下载地址: http://download.csdn.net/detail/freshflower/5167398

2. 百度文库下载地址: http://wenku.baidu.com/view/e02c670dbb68a98271fefadd

http://pan.baidu.com/s/1gdGO4Kj

版本说明 :

相比上一版本优化功能如下:

1. 界面更加美化, 可以显示上个月月末的几天及下个月的前几天;

2. 优化日期选择时对起始年月的设定, 方便选择年月;

3. 优化年与月的选择, 让界面更为美观.

4. 支持浏览器的中英文语言的设定. 显示中英文界面

申明: Iteye网站 与百度空间 为作者的发布地方, 其他任何地方的与此一样的文档均为盗用, 文档的错误引起的误解与不便,请大家小心, 务必到这两个站点下载, 文档有不足的地方, 会继续更新, 谢谢大家的支持!!

程序截图:

函数说明 :

主调函数     JTC.setday(args )

参数说明     args :

1. 可以为空;        2. 可以为字符串. 输出控件的ID      3. 结构体, 结构体中含有参数如下:       {             outObject : 字符串或控件, 输出控件的ID值或对象.              readOnly :  布尔型 设置输出控件是否为只读模式, false:非只读(默认); true:只读 (主要解决.net服务控件不能随意readOnly的问题)             showClear :  布尔型  是否显示清空按钮 true(默认):显示; false不显示.             format :  字符串  返回日期的格式 (默认: yyyy-MM-dd).             today :   字符串/日期对象  设置当前的日期(影响范围: 所有)             minDate :    字符串/日期对象 设置可选日期的下限             maxDate :  字符串/日期对象 设置可选日期的上限             ranged :    布尔型 设置是否包含可选日期范围的边界值 false: 不包含; true:包含(默认)

startDay :    字符串/日期对象 设置每次选择时的起始年月      }

JTC.setToday(dateObj)      说明: 设置今天的日期.  默认取客户端的时间;  客户端的时间并不一定会与服务器的时间一致. 所以设置此值的意义就是在于: 无论客户端的时间怎么改, 控件的日期与服务器依然可以保持同步.     参数: dateObj 字符型或日期对象  字符型最佳格式是:yyyy/MM/dd    示例: ‘2012/07/25‘
   JTC.setDateRange(minDate, maxDate, ranged)     说明: 设置日期可选范围  (影响范围: 所有)    参数:         minDate :    字符串/日期对象 设置可选日期的下限  示例: ‘2010-02-11‘        maxDate :  字符串/日期对象 设置可选日期的上限   示例: ‘2012-07-11‘        ranged :        布尔型 设置是否包含可选日期范围的边界值 false: 不包含; true:包含(默认)                     JTC.setDateFormat(format)            说明: 设置返回日期的格式  (影响范围: 所有)     参数:              format :    字符型 返回日期的格式 示例: ‘yyyy/MM/dd‘ ;    ‘yyyy年MM月dd日‘

JTC.setStartDay  (date)

说明: 设置日期选择时的起始年月 (影响范围: 所有)

参数:

date :    字符串/日期对象 示例: ‘2012-07-25‘

  调用举例:

1. 最简单的调用

Html代码  

  1. <!-- 文本框 -->
  2. <input type="text" onclick="JTC.setday()" />
  3. <!-- 使用DIV -->
  4. <div style="width:120px; height:30px; border:1px solid blue;"  onclick="JTC.setday()"></div>
  5. <!-- 使用文本框与按钮相结合 -->
  6. <input type="text" id="timeID" />
  7. <input type="button" value="选择1" onclick="JTC.setday(‘timeID‘)" />
  8. <input type="button" value="选择2" onclick="JTC.setday({outObject: ‘timeID‘})" />

2. 设定可选日期范围

Html代码  

  1. <!-- 设置可选范围为: 2012-07-08 至 2012-08-23 并且包含边界值 -->
  2. <input type="text" onclick="JTC.setday({minDate:‘2012-07-08‘, maxDate:‘2012-08-23‘, ranged: true})" />
  3. <!-- 设置可选范围为: 大于2012-07-25的日期 不包含边界值 -->
  4. <input type="text" onclick="JTC.setday({minDate:‘2012-07-25‘, ranged: false})" />

3. 其他细节设置

Html代码  

  1. <!-- 设置返回日期格式, 文本为只读模式 -->
  2. <input type="text" onclick="JTC.setday({format:‘yyyy年MM月dd日‘, readOnly: true})" />
  3. <!-- 设置选择日期的起始年月为1990年1月, 即每次选择时都是显示该年月 -->
  4. <input type="text" onclick="JTC.setday({startDay: ‘1990-01-01‘})" />
  5. <!-- 设置不显示清空按钮 -->
  6. <input type="text" onclick="JTC.setday({ showClear: false})" />

4. 全局设置 (设置后会影响到整个页面)

Html代码  

  1. <html>
  2. <head>
  3. <script language="javascript" src="JTimer.js"></script>
  4. <script>
  5. JTC.setToday(‘2012/06/28‘);   //设置今天的日期为:2012-06-28
  6. JTC.setDateFormat(‘MM/dd/yyyy‘);   //设置返回格式
  7. JTC.setDateRange(‘1960-01-01‘, ‘2012-01-01‘, true);  //设置可选日期范围
  8. </script>
  9. </head>
  10. <body>
  11. 以下各个函数的调用所起的作用不同之处<br/>
  12. 日期1: <input type="text" onclick="JTC.setday()" /> <br/>
  13. 日期2: <input type="text" onclick="JTC.setday({format: ‘yyyy年MM月dd日‘})" /> <br/>
  14. 日期3: <input type="text" onclick="JTC.setday({startDay: ‘1980-01-01‘, showClear: false})" /> <br/>
  15. </body>
  16. </html>

差不多就这样了, 若有什么不明白的地方, 欢迎留言提问. 一起进步!

原文地址: http://freshflower.iteye.com/blog/1606222

时间： 2024-12-26 18:17:14

javascript JTimer_2.0 时间日历控件使用方法的相关文章

JavaScript弹出式日历控件 无jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" cont

javascript实例学习之六—自定义日历控件

基于之前上篇博客轻量级jquery,tool.js和base.js.自定义开发的base_datePicker插件,效果类似于jquery_ui的datePicker插件 //基于Base.js以及tool.js做的日历插件 $().extend('datePicker', function() { //生成日历插件 var $yearSpan; var $monthSpan; var tds; var $prevBtn; var $nextBtn; var $lastTr; var $date

WdatePicker 日历控件使用方法+基本常用方法

WdatePicker 日历控件使用方法+基本常用方法,记录一下. 很好的文章. 网上转来的. 1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的 示例2-7 跨无限级框架演示 可无限跨越框架iframe,无论怎么嵌套框架都不必担心了,即使有滚动条也不怕 2. 民国年日历和其他特殊日历 当年份格式设置为yyy格式时,利用年份差量属性yearOffset(默认值1911民国元年),可实现民国年日

WdatePicker日历控件使用方法（转）

转自:http://www.cnblogs.com/weixing/archive/2011/08/15/2139431.html WdatePicker日历控件使用方法 1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的 示例2-7 跨无限级框架演示 可无限跨越框架iframe,无论怎么嵌套框架都不必担心了,即使有滚动条也不怕 2. 民国年日历和其他特殊日历 当年份格式设置为yyy格式时,利

WdatePicker日历控件使用方法

1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的 示例2-7 跨无限级框架演示 可无限跨越框架iframe,无论怎么嵌套框架都不必担心了,即使有滚动条也不怕 2. 民国年日历和其他特殊日历 当年份格式设置为yyy格式时,利用年份差量属性yearOffset(默认值1911民国元年),可实现民国年日历和其他特殊日历 示例2-8 民国年演示 <input type="text"

bootstrap中使用日历控件

在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一个demo: 关于资料中的依赖,截图如下: 关于把Less编译成css,需要安装node, 需要注意的是要定位到build文件夹,然后执行 lessc build_standalone.less  datetimepicker.css 大概意思就是把build_standalone.less转换成c

javascript日历控件——纯javascript版

平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. <!doctype html> <html> <head> <meta charset="utf-8"> <title>日历控件</title> <script src="js/calendar.js&quo

javascript日历控件

以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了.可能最值得说的一点就是让input控件内部右边显示一个按钮,我是直接给input加了个背景,然后把input的边框去掉实现的. 这个是最初版的,再往后打算做出纯javascript版的,再往后打算用JQuery做一套. <!doctype html> <html> <head> <met

js非常强大的日历控件fullcalendar.js, 日期时间库: moment.js

日历控件: https://fullcalendar.io/docs/ https://fullcalendar.io/docs/event_data/events_function/ https://fullcalendar.io/docs/event_data/Event_Object/ https://fullcalendar.io/docs/mouse/eventClick/ <!DOCTYPE html> <html> <head> <meta char