前阵子做”时光邮局“的时候, 需要用到日期时间的控件
我希望的效果是:
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 转载需授权！