专注于WEB技术的IT博客

一款出色的JS日历控件bootstrap-datetimepicker

时间:2014-08-07分类: Js浏览:42700
分享到:

在开发微网站的酒店预定时,在填写表单的住店和离点时需要用到日历控件,之前我收藏了很多相关的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-master\bootstrap-datetimepicker-master\js\locales,如中国的语言包路径为bootstrap-datetimepicker-master\bootstrap-datetimepicker-master\js\locales\bootstrap-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

猜你喜欢
标签 : 日历控件
除非注明,本文首发网志博客,欢迎转载!转载请注明本文地址:http://w3note.com/web/171.html,谢谢。
  • 评论
  • 赞助本站