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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//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>

控件使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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()); //设置控件时间

        效果如下:

image

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

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

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

        后台保存时间时,需要保存为long型时间戳(timestamp),代码如下:

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

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

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

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

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

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

        效果如图:

image

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

如果有收获,可以请我喝杯咖啡!