您的位置：首页 > Web前端 > JavaScript

JS日期选择器(兼容IE,Firefox,Opera等主流浏览器)

2015-05-03 22:41 393 查看

JS文件下载:

1. CSDN下载地址: http://download.csdn.net/detail/u013068377/8657779

程序截图:

函数说明 :

主调函数

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

<input type="text" onclick="JTC.setday()" />



<div style="width:120px; height:30px; border:1px solid blue;" onclick="JTC.setday()"></div>



<input type="text" id="timeID" />

<input type="button" value="选择1" onclick="JTC.setday('timeID')" />

<input type="button" value="选择2" onclick="JTC.setday({outObject: 'timeID'})" />

2. 设定可选日期范围

Html代码

<input type="text" onclick="JTC.setday({minDate:'2012-07-08', maxDate:'2012-08-23', ranged: true})" />



<input type="text" onclick="JTC.setday({minDate:'2012-07-25', ranged: false})" />

3. 其他细节设置

Html代码

<input type="text" onclick="JTC.setday({format:'yyyy年MM月dd日', readOnly: true})" />



<input type="text" onclick="JTC.setday({startDay: '1990-01-01'})" />



<input type="text" onclick="JTC.setday({ showClear: false})" />

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

Html代码

<html>

<head>

<script language="javascript" src="JTimer.js"></script>

<script>

JTC.setToday('2012/06/28'); //设置今天的日期为:2012-06-28

JTC.setDateFormat('MM/dd/yyyy'); //设置返回格式

JTC.setDateRange('1960-01-01', '2012-01-01', true); //设置可选日期范围

</script>

</head>

<body>

以下各个函数的调用所起的作用不同之处<br/>

日期1: <input type="text" onclick="JTC.setday()" /> <br/>

日期2: <input type="text" onclick="JTC.setday({format: 'yyyy年MM月dd日'})" /> <br/>

日期3: <input type="text" onclick="JTC.setday({startDay: '1980-01-01', showClear: false})" /> <br/>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航