在开发微网站的酒店预定时，在填写表单的住店和离点时需要用到日历控件，之前我收藏了很多相关的js日历控件，但现在要用时却没有一款适合用的，因为开发的是手机网站，所以比较挑剔。
要求：
在点击日期表单的输入框时，禁止弹出文本输入框，并且不能往输入框输入内容，只能从日历控件弹出的日历选取日期。
能满足上面要求的JS日期控件，真的是凤毛麟角。为了能找到这个控件，我花了不少时间啊，最终找到了bootstrap-datetimepicker-master，这是bootstrap的一个插件，看开发文档似乎对我没有帮助，还是看例子摸索调出来的，现在分享给大家。
先上图
关键代码片断
| 代码如下 | 复制代码 |
|
<div class="input-group date form_date col-md-5" data-date="" data-date-format="" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"> <input class="form-control" size="16" type="text" value="" readonly> <span class="input-group-addon"> <span class="glyphicon glyphicon-remove"></span> </span> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span></span> </div> |
|
加载日历控件的相关文件
<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
调用代码
| 代码如下 | 复制代码 |
|
$('.form_date').datetimepicker({ language: 'zh-CN',/*加载日历语言包，可自定义*/ weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0 }); </script> |
|
bootstrap-datetimepicker-master日历控件是国际通用的，因此有各国和地区的语言包，语言包目录为bootstrap-datetimepicker-masterbootstrap-datetimepicker-masterjslocales，如中国的语言包路径为bootstrap-datetimepicker-masterbootstrap-datetimepicker-masterjslocalesbootstrap-datetimepicker.zh-CN.js
代码如下：
| 代码如下 | 复制代码 |
| /** * Simplified Chinese translation for bootstrap-datetimepicker * Yuan Cheung <advanimal@gmail.com> */ ;(function($){ $.fn.datetimepicker.dates['zh-CN'] = { days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"], daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"], daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"], months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], today: "今日", suffix: [], meridiem: ["上午", "下午"], format: "yyyy-mm-dd" /*控制显示格式,默认为空，显示小时分钟*/ }; }(jQuery)); |
|
当然，你也可以自定义语方包，非常方便。
完整的例子百度网盘下载http://pan.baidu.com/s/1hqoW8z6