bootstrap日期选择器本地化-中文
2017-12-26 本文已影响0人
KardelShaw
最近用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>
