最近项目的后台管理系统需要一个按时间查询的需求，前端需要一个日期的选择器，度娘之后选择了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: "清除"
}
};
第二个问题就是日期选择的限制了，直接粘代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.css">
<script src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="./node_modules/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
<script src="./node_modules/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<label>选择开始日期：</label>
<!--指定 date标记-->
<div class='input-group date' id='date_start'>
<input type='text' class="form-control" readonly="readonly" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<label>选择结束时间：</label>
<!--指定 date标记-->
<div class='input-group date' id='date_end'>
<input type='text' class="form-control" readonly="readonly" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(function() {
$('#date_start').datetimepicker({
format: 'yyyy-mm-dd',
weekStart: 1,
language: 'cn',
minView: 'month',
autoclose: true,
todayBtn: true,
endDate: new Date(),
}).on("changeDate", function(ev) {
if (ev.date) {
$('#date_end').datetimepicker('setStartDate', new Date(ev.date.valueOf()))
} else {
$('#date_end').datetimepicker('setStartDate', );
}
});
$('#date_end').datetimepicker({
format: 'yyyy-mm-dd',
weekStart: 1,
language: 'cn',
minView: 'month',
autoclose: true,
endDate: new Date(),
}).on("changeDate", function(ev) {
if (ev.date) {
$('#date_start').datetimepicker('setEndDate', new Date(ev.date.valueOf()))
} else {
$('#date_start').datetimepicker('setEndDate', new Date());
}
});
});
</script>
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",
}
}
