bootstrap-daterangepicker 怎么汉化

新建一个文件,名称随意,我的是bootstrap-datetimepicker.override.js:

// by sleest, begin i18n

(function($) {

$.fn.datetimepicker.dates['zh-CN'] = {

days : ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],

daysShort : ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],

daysMin : ["日", "一", "二", "三", "四", "五", "六", "日"],

months : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

monthsShort : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

today : "今天",

suffix : [],

meridiem : ["上午", "下午"]

}

}(jQuery))

// end i18n

在引入bootstrap-datetimepicker.js后,再引入该文件即可.

1

首先，我们将这款日期控件下载下来。百度bootstrap-daterangepicker即可。

2

下载下来解压的文件如图。

主要文件有

daterangepicker.js

moment.js

bootstrap.min.css

daterangepicker-bs3.css

即两个js文件，两个css文件。

3

我们先打开demo看一下。

这个日历效果很好，外形也十分美观。

4

打开demo的代码，小编就以demo为例，来介绍一下这款日期控件的用法。

首先，我们可以看到，这里有一个input。

然后js中通过id“#reservation”来定位这个input，使它成为一个日期控件。

激活日期控件的方法很简单（无参数法）

$('#reservation').daterangepicker()

这样就可以建立一个最简单日期选择器了。

5

加参数的日历可以通过自己修改初始化参数来选择自己要用的日期选择器。

bootstrap的这款控件还是相当强大的，几乎可以满足你的一切要求。

在参数的设置下，你可以得到各种各样的日期选择格式

6

具体的参数列表在bootstrap的官网上可以找到，介绍还算清楚。

但一般用不到那么多，需要改的一般就是format、weekStart、startView等。

---