jquery时区选择插件timezone-picker下载

发布时间: 编辑:不加 0 浏览
直达下载
摘要 timezonepicker是一款带世界地图的jquery时区选择插件。该jquery时区选择器采用响应式设计,使你可以快速的在一张基于SVG的世界地图上选择不同的时区。...

简介:timezonepicker是一款带世界地图的jquery时区选择插件。该jquery时区选择器采用响应式设计,使你可以快速的在一张基于SVG的世界地图上选择不同的时区。

网络上的 jQuery日期选择器和日历插件很多,但想找到一款自己很满意的时间选择器插件不容易。 在这里,我们提供一组 jQuery 时间选择器插件列表分享给大家。timezonepicker是一款带世界地图的jquery时区选择插件。该jquery时区选择器采用响应式设计,使你可以快速的在一张基于SVG的世界地图上选择不同的时区。

jquery时区选择插件timezone-picker图片预览

jquery时区选择插件timezone-picker图片预览

jquery时区选择插件timezone-picker浏览器适配

  • 支持Chrome所有版本
  • 支持Firefox所有版本
  • 支持Safari所有版本
  • 支持IE9及以上版本

jQuery插件浏览器支持

jquery时区选择插件timezone-picker使用教程

安装

可以通过npm插件来安装timezone-picker插件。

npm install --save timezone-picker

使用方法

该插件基于Moment.js,使用时要引入下面的一些相关文件。


<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.14/moment-timezone-with-data-2012-2022.min.js"></script>
<script type="text/javascript" src="path/to/timezone-picker.js"></script>

HTML结构

使用一个<div>作为世界地图的容器:

<div id="map"></div>

初始化插件

在页面DOM元素加载完毕之后,通过timezonePicker()方法来初始化该jquery时区选择插件。

$('#map').timezonePicker();

配置参数

该jquery时区选择插件的可用配置参数如下:

  • width:设置地图的宽度。

  • height:设置地图的高度。

  • defaultCss:如果设置为true则不需要引入css。

  • hoverColor:鼠标HOVER时显示的颜色。

  • selectedColor:设置选择的时区的颜色。

  • mapColor:设置地图的颜色。

  • quickLink:设置选择时区的快捷方式。

  • selectBox:设置为true是显示选择时区的下拉框。

  • showHoverText:设置为true是显示鼠标hover时区时的文字。

  • mapHover:默认只会高亮显示鼠标当前所在位置的多边形区域。可选值有:timezone, country, zonename。

  • "timezone":地图上所有相同时区的区域都会被高亮。

  • "country":地图上所有相同国家代码的区域都会被高亮。

  • "zonename":地图上所有相同时区名称的区域都会被高亮。

方法

该jquery时区选择插件的可用方法有:

.setValue(string,string):设置值。第一个参数是时区字符串,例如:'Asia/Kolkata'。第二个参数是可选的。

$(selector).data('timezonePicke').setValue('Asia/Kolkata')

如果第一个参数是偏移值,那第二个参数必须是:'offset'。

$(selector).data('timezonePicke').setValue('5.5','offset')

如果第一个参数是国家代码,那么第二个参数必须是:'country'。

$(selector).data('timezonePicke').setValue('IN','country')

.getValue():获取值。该方法返回包含时区详细信息的对象。

$(selector).data('timezonePicke').getValue()

返回对象的格式类似下面的样子。

[{
    "selected": true,
    "zonename": "IST",
    "offset": 5.5,
    "pin": "361,115",
    "country": "LK",
    "timezone": "Asia/Colombo",
}, {
    "zonename": "IST",
    "offset": 5.5,
    "pin": "373,94",
    "country": "IN",
    "timezone": "Asia/Kolkata",
}]
查看更多

jquery时区选择插件timezone-picker下载下载地址

点击下载jquery时区选择插件timezone-picker下载
按enter键搜索或按ESC键关闭

历史搜索记录