Javascript日历控件bootstrap-datetimepicker使用例子

时间：2014-08-09 编辑：简简单单来源：一聚教程网

在开发微网站的酒店预定时，在填写表单的住店和离点时需要用到日历控件，之前我收藏了很多相关的js日历控件，但现在要用时却没有一款适合用的，因为开发的是手机网站，所以比较挑剔。
要求：
在点击日期表单的输入框时，禁止弹出文本输入框，并且不能往输入框输入内容，只能从日历控件弹出的日历选取日期。

能满足上面要求的JS日期控件，真的是凤毛麟角。为了能找到这个控件，我花了不少时间啊，最终找到了bootstrap-datetimepicker-master，这是bootstrap的一个插件，看开发文档似乎对我没有帮助，还是看例子摸索调出来的，现在分享给大家。
先上图

关键代码片断

代码如下

复制代码

加载日历控件的相关文件

调用代码

代码如下	复制代码
$('.form_date').datetimepicker({ language: 'zh-CN',/加载日历语言包，可自定义/ weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0 });

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
*/
;(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

上一个： jquery中在ie6下获取href属性值不到解决办法
下一个： JavaScript类和继承：constructor 属性探秘

推荐专题

最新下载

热门教程

Javascript日历控件bootstrap-datetimepicker使用例子

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程