最近用bootstrap做项目,所以就顺便搜了下用bootstrap写的日期选择器。
搜到的第一和第二条结果虽然是官网,但上面挂的还是基于bootstrap2的日期选择器(此时为北京时间2017-12-26 17:18),不能与bootstrap3兼容使用。
所以又去找bootstrap3的日期选择器。
但是在github下载完之后我发现没有bootstrap3日期选择器没有本地化(locale),意味着都是这样英文的:
于是又去找了一个很好用的日期时间处理类库:moment.js
它内含了本地化处理,使用后就可以转换成中文了
必须注意:
1、有相应的中文网站,但是提供下载和可浏览的资源会相对比较旧和落后,有可能有些已经不用了。
2、如果要用本地化(locale),引用库时不要使用moment.min.js
或moment.js
,而用moment-with-locales.min.js
,看名字就知道,它里面包含了locale处理。
总结 bootstrap3日期选择器 依赖的所有库:
1、jQuery
2、moment.js ----- 有版本差异,下载源自由选择 github | moment.js | moment.js中文网
3、bootstrap3
bootstrap3日期选择器
导入所有文件后,如下
//css
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
//js
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
中间一段摘了bootstrap3选择器文档的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap3 Datepicker Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script>
$('#datetimepicker1').datetimepicker({
locale : moment().locale('zh-cn')
});
</script>
</body>
</html>