文章作者: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 | //stylesheet |
控件使用:
1 | // html代码: |
效果如下:
上面的代码只是一个基本用法,使用的时间都是系统默认时间,如果要指定控件显式时间的时区,代码如下:
1 | moment.tz.setDefault('Asia/Seoul'); //设置moment时区 |
注:二者需要同时设置且对应,否则会出现各种奇怪问题,作者在此吃过大亏。有了这两行代码就可以支持多国家时间显示,可以根据选择的国家来显式对应的时间。
后台保存时间时,需要保存为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'); //设置控件的语言 |
效果如图:
总结:Eonasdan-bootstrap-datetimepicker这个控件功能挺强大的,当然依赖的东西也很多,网上有用能解决你的问题的资料不是很多,很多功能都需要自己去看文档摸索。本文主要是对控件本地化的探索,所谓本地化是指根据国家显示对应时间,控件显示对应国家的语言,时间保存之后再取出显示时间的一致性问题,完全可以做成支持多国家多语言的控件,并可根据选择国家自动修改控件语言和控件时间。