前阵子做”时光邮局 “的时候, 需要用到日期时间的控件
我希望的效果是:
1. 浏览器兼容性好 (起码主流的 IE, IE 内核, firefox, chrome 之类的都得支持吧)
2. 既能选择日期, 又能选择时间
3. 使用和配置方便(最好能够支持日期时间的格式定制)
4. 界面美观
于是在各种开源的日期时间控件中选了好久, 定位到两个控件上. 一个是著名的 my97datepicker, 这个就不多做介绍了. 另一个不知道有多少人用过, 叫做 datetimepicker, 网址是: http://www.rainforestnet.com/datetimepicker/datetimepicker-demo1.htm
最后我定下来使用第二个. my97datepicker 虽然功能确实强大, 不过对于时间的选择, 默认都是 0, 5, 10, 15…这样的整数, 比如 10:03 的话就得手动输入才行 (也许可以通过修改配置等方式支持吧, 具体没有太仔细研究)
第二种配置相当方便, 使用起来效果非常让我满意. 所以在这儿推荐一下, 也简单介绍一下它的使用方法.(上面的网址说得更加详细)
1. 自然是下载, 从上面的网址, 下载一个压缩包 (只有 12K), 解压缩后放到自己的工程目录
2. 在自己的 html/php/asp…代码中, 增加 script 的引用
<script src="datetimepicker_css.js"></script>
3. 在 html 代码中写一个 text 的输入框, 类似于:
<input type="Text" id="demo1" maxlength="25" size="25"/>
4. 在上面的代码后面, 增加以下的代码(其中的 demo1 换成自己的 input 框的 ID, img 的 src 换成相应的图片目录)
<img src="images/cal.gif" onclick="javascript:NewCssCal('demo1')" style="cursor:pointer"/>以上就是它的默认使用方式了
但是对我来说, 事情依然没有结束.
首先, 它的显示格式不符合我的需要, 我需要的是这样子的:
1. 只允许选择未来的时间
2. 允许选择日期(格式类似于 2000-03-25), 允许选择时间(不能选择秒, 格式类似于 18:28)
3. 控件上面的星期 / 月份之类都以中文显示
ok, 前两个都可以通过在调用的时候指定参数来实现
<input type="text" name="send_time" id="send_time" style="font-size:16px">
<img src="__ROOT__/Public/picker/images/cal.gif"
onclick="javascript:NewCssCal ('send_time','yyyyMMdd','dropdown',true,'24','','future')"
style="cursor:pointer"/>最后一个, 在 js 文件中进行配置吧! 嗯, 配置文件看起来还是挺简单的, 找到并修改如下配置
//use the Month and Weekday in your preferred language. var MonthName = [" 一月 ", " 二月 ", " 三月 ", " 四月 ", " 五月 ", " 六月 ", " 七月 ", " 八月 ", " 九月 ", " 十月 ", " 十一月 ", " 十二月 "]; var WeekDayName1 = [" 星期日 ", " 星期一 ", " 星期二 ", " 星期三 ", " 星期四 ", " 星期五 ", " 星期六 "]; var WeekDayName2 = [" 星期一 ", " 星期二 ", " 星期三 ", " 星期四 ", " 星期五 ", " 星期六 ", " 星期日 "];
其中 WeekDayName1 和 Name2 分别是应用于”星期日为星期的第一天”和”星期一为星期的第一天”两种情况, 直接都修改了吧!
ok 啦, 效果么, 直接去我的”时光邮局”去看吧~~http://hi2future.com
本文链接：https://www.poisonbian.com/post/137.html 转载需授权！