Bootstrap 3時間控制項datetimepicker的時區及多語言問題__bootstrap

文章作者：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這個控制項功能挺強大的，當然依賴的東西也很多，網上有用能解決你的問題的資料不是很多，很多功能都需要自己去看文檔摸索。本文主要是對控制項本地化的探索，所謂本地化是指根據國家顯示對應時間，控制項顯示對應國家的語言，時間儲存之後再取出顯示時間的一致性問題，完全可以做成支援多國家多語言的控制項，並可根據選擇國家自動修改控制項語言和控制項時間。