Bootstrap 3时间控件datetimepicker的时区及多语言问题

文章作者：Tyan
博客：noahsnail.com

        在Web应用开发中，特别是前端开发中，经常会碰到的一个问题是时间选择问题，幸好Bootstrap已经为我们提供了时间选择控件datetimepicker，但在datetimepicker的实际开发使用中仍然会有一些小问题，例如根据国家来进行显示时间的时区变换。作者也是碰了好多坑之后才把这个控件的用法弄清楚了，记录一下以便给后来者提供参考。

        本文使用的datetimepicker控件为Eonasdan-bootstrap-datetimepicker，它是基于Bootstrap 3的，官网地址为：https://eonasdan.github.io/bootstrap-datetimepicker/

使用这个控件的要求：

• jQuery 官网：https://jquery.com/
• Moment.js 包括moment-timezone，现在moment和timezone分开了，官网：http://momentjs.com/
• Bootstrap.js (transition and collapse are required if you’re not using the full Bootstrap) 官网：http://getbootstrap.com/
• Bootstrap Datepicker script
• Bootstrap CSS
• Bootstrap Datepicker CSS
• Locales: Moment’s locale files are here

基本的配置如下(路径自己去修改)：

//stylesheet
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="../bootstrap-datepicker/css/bootstrap-datepicker3.min.css"/>
<link rel="stylesheet" href="../Eonasdan-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"/>

//js
<script src="../class.support/class.support.min.js"></script>
<script src="../jquery/jquery.min.js"></script>
<script src="../moment/moment.min.js"></script> //对应时区
<script src="../moment/locales.min.js"></script> //对应本地化
<script src="../moment/moment-timezone-with-data.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="../Eonasdan-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

控件使用：

// html代码：
<div class="input-group date"  id="testDate">
	<input class="form-control" type="text"/>
	<span class="input-group-addon" >
		<span class="glyphicon glyphicon-calendar"></span>
	</span>
</div>

//jQuery代码

$('#testDate').datetimepicker({
	sideBySide: true //可以同时选择日期和时间
});
$('#testDate').data('DateTimePicker').format('YYYY-MM-DD HH:mm'); //格式化日期显式格式
$('#testDate').data('DateTimePicker').date(moment()); //设置控件时间

        效果如下：

        上面的代码只是一个基本用法，使用的时间都是系统默认时间，如果要指定控件显式时间的时区，代码如下：

moment.tz.setDefault('Asia/Seoul'); //设置moment时区
$('#testDate').data('DateTimePicker').timeZone('Asia/Seoul'); //设置控件时区

注：二者需要同时设置且对应，否则会出现各种奇怪问题，作者在此吃过大亏。有了这两行代码就可以支持多国家时间显示，可以根据选择的国家来显式对应的时间。

        后台保存时间时，需要保存为long型时间戳（timestamp），代码如下：

var testDate = moment($('#testDate').data('DateTimePicker').date()).format('x');

        当从后端读取数据向前端显示时，代码为：

moment.tz(testDate, 'Asia/Seoul').format('YYYY/MM/DD HH:mm') //显示时间对应时区

注：此时显示的时间是对应保存时时区的对应时间，这样可以做到保存的时间与读取显示的时间是一致的。

        除了上面的时区之外，还可能涉及到控件的本地化问题，即控件的语言与国家一致，代码如下：

$('#testDate').data('DateTimePicker').locale('ko'); //设置控件的语言

        效果如图：

总结：Eonasdan-bootstrap-datetimepicker这个控件功能挺强大的，当然依赖的东西也很多，网上有用能解决你的问题的资料不是很多，很多功能都需要自己去看文档摸索。本文主要是对控件本地化的探索，所谓本地化是指根据国家显示对应时间，控件显示对应国家的语言，时间保存之后再取出显示时间的一致性问题，完全可以做成支持多国家多语言的控件，并可根据选择国家自动修改控件语言和控件时间。