datetimepicker与distpicker使用及问题总结

发表于 更新于 分类于 阅读次数：

记录一下在写前端页面时时间日期插件datetimepicker与省市区插件distpicker的使用和一些问题的汇总。

基本使用

datetimepicker

注意！如果你搜索datetimepicker可能发现不止一个，如果你没注意到，那可能你在看其中一个插件的说明文档，却引入了另一个插件的js开发，那必然会不好使，而且会大半天找不到原因，博主就是这样！以下是这两个罪魁祸首：

Eonasdan/bootstrap-datetimepicker和smalot/bootstrap-datetimepicker，就是这俩货，如果不看作者，插件名字完全一样，但使用方式是不一样的！

博主最后使用的是smalot/bootstrap-datetimepicker。

具体请看官方配置文档http://www.bootcss.com/p/bootstrap-datetimepicker/

博主使用情况如下。

首先引入css和js：

1
2
3
<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.min.css">
<script src="//cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.min.js"></script>
<script src="//cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

创建日期组件：

1
2
3
4
5
6
<div class="input-group date" id="datetimepicker1">
  <span class="input-group-addon ">
    <span class="glyphicon glyphicon-time"></span>
  </span>
  <input id="startTime" type="text" class="form-control" name="startTime" readonly/>
</div>

初始化配置：

1
2
3
4
5
6
7
8
9
10
$('#datetimepicker1').datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        startDate: '2010-01-01',
        endDate: '2025-01-01',
        autoclose: true,
        language: 'zh-cn',
        todayBtn: true,
        todayHighlight: true,
        minuteStep: 1
});

distpicker

distpicker用起来就很简单了，文档：http://fengyuanchen.github.io/distpicker/

1
2
3
4
<div id="distpicker" data-toggle="distpicker">
  <select id="province" name="province" data-province="全国" class="form-control"></select>
  <select id="city" name="city" data-city="--选择市--" class="form-control"></select>
</div>

js：

1
$(#distpicker').distpicker();

问题总结

datetimepicker

第一个问题就是开篇说的注意有两个同名插件，区分一下。

第二个问题是在对话框弹窗里调用datetimepicker会发现没反应，这个问题排查了好久，以为哪配置出错了，结果居然是被弹窗本身挡住了！

解决的方式就是调整z-index使得插件的z-index值比对话框的大，网上很多方案用css或style参数把组件z-index设为9999，然而我这依然没有解决。可能是因为我的对话框组件比较特殊，我用的bootstrap-dialog，如果你也恰巧在用碰到了这个问题，那恭喜你找对地方了。

以下是解决方式，F12找到bootstrap相关组件的css，修改z-index。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

distpicker

默认的distpicker不能选全国、国外，只能具体到某一市或区，我这里的需求是可以选全国、国外、某个省、某个市，所以需要稍微处理一下。

首先可以看到我们把省份默认值“请选择”改成“全国”,

1
2
3
4
<div id="distpicker" data-toggle="distpicker">
  <select id="province" name="province" data-province="全国" class="form-control"></select>
  <select id="city" name="city" data-city="--选择市--" class="form-control"></select>
</div>

但是只是字面值，传递到后端取值时实际值是空的，所以在表单序列化为JSON时做一些判断处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function getFormData(form) {
    var formData = form.serializeArray();
    var obj = {};
    var place;
    var province;
    var city;
    $.each(formData, function () {
        if (this.name === 'province') {
            province = this.value;
        } else if (this.name === 'city') {
            city = this.value;
        } else if (obj[this.name] !== undefined) {
            if (!obj[this.name].push) {
                obj[this.name] = [obj[this.name]];
            }
            obj[this.name].push(this.value || '');
        } else {
            obj[this.name] = this.value || '';
        }
    });
    if (!province || province === '') {
        place = '全国';
    } else if (!city || province === '') {
        place = province;
    } else {
        place = province + '-' + city;
    }
    obj.place = place;
    return JSON.stringify(obj);
}

可以看到如果省份为空，则转为json地点的值是“全国”，如果市为空，则地点只有省份如“山东省”，都不为空的话为“山东省-济南市”格式。

同样，在修改表单的时候，需要把当前值塞到表单里，也需要处理下，主要是按‘-’分割省份和城市，对‘全国’特殊处理，同时使用.trigger(“change”)才能生效！

1
2
3
4
5
6
7
var province = select[0]['place'].split('-')[0];
var city = select[0]['place'].split('-')[1];
if (province === '全国') {
  form.find('#province').val(undefined).trigger("change");
} else {
  form.find('#province').val(province).trigger("change");
}

最后，就是怎么加入”国外“选项呢，很简单，在插件源码的省市区编码表里加入就可。注意加入到省级一栏内，同时编码用未使用的编码，如100001：国外

如下：

1
2
3
4
5
6
7
8
var DISTRICTS = {
  100000: {
    100001: '国外',
    110000: '北京市',
    120000: '天津市',
    130000: '河北省',
    140000: '山西省',
    ...

效果如图所示：

picker