最近项目的后台管理系统需要一个按时间查询的需求,前端需要一个日期的选择器,度娘之后选择了bootstrap-datetimepicker日期选择控件。
bootstrap日期时间选择器下载地址和文档
在使用的过程中主要遇到了两个问题
- 插件内容默认是英文没有中文
- 就是一个最基础的需求,开始的日期不能晚于结束的日期,结束的日期不能早于开始的日期。
首先解决第一个没有默认是英文的问题,修改文件中JS目录下的JS文件手动添加cn中文选项
然后在初始化中language中配置cn
var dates = $.fn.datetimepicker.dates = {
en: {
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
meridiem: ['am', 'pm'],
suffix: ['st', 'nd', 'rd', 'th'],
today: 'Today',
clear: 'Clear'
},
cn : {
days: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
daysShort: ["日", "一", "二", "三", "四", "五", "六", "七"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "七"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
meridiem: ['am', 'pm'],
suffix: ['st', 'nd', 'rd', 'th'],
today: "今天",
clear: "清除"
}
};
第二个问题就是日期选择的限制了,直接粘代码
Document
NPM的配置,直接粘过去就好~
{
"name": "kkkoko",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^3.3.5",
"jquery": "^2.2.4",
}
}