文章作者：Tyan
博客：noahsnail.com
????????在Web應(yīng)用開發(fā)中绣溜，特別是前端開發(fā)中溢豆，經(jīng)常會碰到的一個問題是時間選擇問題吨岭，幸好Bootstrap已經(jīng)為我們提供了時間選擇控件datetimepicker模燥，但在datetimepicker的實(shí)際開發(fā)使用中仍然會有一些小問題，例如根據(jù)國家來進(jìn)行顯示時間的時區(qū)變換锻弓。作者也是碰了好多坑之后才把這個控件的用法弄清楚了砾赔，記錄一下以便給后來者提供參考。
????????本文使用的datetimepicker控件為Eonasdan-bootstrap-datetimepicker青灼，它是基于Bootstrap 3的暴心，官網(wǎng)地址為：https://eonasdan.github.io/bootstrap-datetimepicker/
使用這個控件的要求：
- jQuery 官網(wǎng)：https://jquery.com/
- Moment.js 包括moment-timezone，現(xiàn)在moment和timezone分開了聚至，官網(wǎng)：http://momentjs.com/
- Bootstrap.js (transition and collapse are required if you're not using the full Bootstrap) 官網(wǎng)：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> //對應(yīng)時區(qū)
<script src="../moment/locales.min.js"></script> //對應(yīng)本地化
<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()); //設(shè)置控件時間
????????效果如下：
????????上面的代碼只是一個基本用法酷勺，使用的時間都是系統(tǒng)默認(rèn)時間，如果要指定控件顯式時間的時區(qū)扳躬，代碼如下：
moment.tz.setDefault('Asia/Seoul'); //設(shè)置moment時區(qū)
$('#testDate').data('DateTimePicker').timeZone('Asia/Seoul'); //設(shè)置控件時區(qū)
注：二者需要同時設(shè)置且對應(yīng)脆诉，否則會出現(xiàn)各種奇怪問題，作者在此吃過大虧贷币。有了這兩行代碼就可以支持多國家時間顯示击胜，可以根據(jù)選擇的國家來顯式對應(yīng)的時間。
????????后臺保存時間時役纹，需要保存為long型時間戳（timestamp）偶摔，代碼如下：
var testDate = moment($('#testDate').data('DateTimePicker').date()).format('x');
????????當(dāng)從后端讀取數(shù)據(jù)向前端顯示時，代碼為：
moment.tz(testDate, 'Asia/Seoul').format('YYYY/MM/DD HH:mm') //顯示時間對應(yīng)時區(qū)
注：此時顯示的時間是對應(yīng)保存時時區(qū)的對應(yīng)時間促脉，這樣可以做到保存的時間與讀取顯示的時間是一致的辰斋。
????????除了上面的時區(qū)之外，還可能涉及到控件的本地化問題瘸味，即控件的語言與國家一致宫仗，代碼如下：
$('#testDate').data('DateTimePicker').locale('ko'); //設(shè)置控件的語言
????????效果如圖：
總結(jié)：Eonasdan-bootstrap-datetimepicker這個控件功能挺強(qiáng)大的，當(dāng)然依賴的東西也很多旁仿，網(wǎng)上有用能解決你的問題的資料不是很多藕夫，很多功能都需要自己去看文檔摸索。本文主要是對控件本地化的探索，所謂本地化是指根據(jù)國家顯示對應(yīng)時間毅贮，控件顯示對應(yīng)國家的語言办悟，時間保存之后再取出顯示時間的一致性問題，完全可以做成支持多國家多語言的控件滩褥，并可根據(jù)選擇國家自動修改控件語言和控件時間病蛉。
