记录一下在写前端页面时时间日期插件datetimepicker与省市区插件distpicker的使用和一些问题的汇总。
基本使用
datetimepicker
注意!如果你搜索datetimepicker可能发现不止一个,如果你没注意到,那可能你在看其中一个插件的说明文档,却引入了另一个插件的js开发,那必然会不好使,而且会大半天找不到原因,博主就是这样!以下是这两个罪魁祸首:
Eonasdan/bootstrap-datetimepicker和smalot/bootstrap-datetimepicker,就是这俩货,如果不看作者,插件名字完全一样,但使用方式是不一样的!
博主最后使用的是smalot/bootstrap-datetimepicker。
具体请看官方配置文档http://www.bootcss.com/p/bootstrap-datetimepicker/
博主使用情况如下。
首先引入css和js:
1 | <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.min.css"> |
创建日期组件:
1 | <div class="input-group date" id="datetimepicker1"> |
初始化配置:
1 | $('#datetimepicker1').datetimepicker({ |
distpicker
distpicker用起来就很简单了,文档:http://fengyuanchen.github.io/distpicker/
1 | <div id="distpicker" data-toggle="distpicker"> |
js:
1 | $(#distpicker').distpicker(); |
问题总结
datetimepicker
第一个问题就是开篇说的注意有两个同名插件,区分一下。
第二个问题是在对话框弹窗里调用datetimepicker会发现没反应,这个问题排查了好久,以为哪配置出错了,结果居然是被弹窗本身挡住了!
解决的方式就是调整z-index使得插件的z-index值比对话框的大,网上很多方案用css或style参数把组件z-index设为9999,然而我这依然没有解决。可能是因为我的对话框组件比较特殊,我用的bootstrap-dialog,如果你也恰巧在用碰到了这个问题,那恭喜你找对地方了。
以下是解决方式,F12找到bootstrap相关组件的css,修改z-index。
1 | .dropdown-menu { |
distpicker
默认的distpicker不能选全国、国外,只能具体到某一市或区,我这里的需求是可以选全国、国外、某个省、某个市,所以需要稍微处理一下。
首先可以看到我们把省份默认值“请选择”改成“全国”,
1 | <div id="distpicker" data-toggle="distpicker"> |
但是只是字面值,传递到后端取值时实际值是空的,所以在表单序列化为JSON时做一些判断处理
1 | function getFormData(form) { |
可以看到如果省份为空,则转为json地点的值是“全国”,如果市为空,则地点只有省份如“山东省”,都不为空的话为“山东省-济南市”格式。
同样,在修改表单的时候,需要把当前值塞到表单里,也需要处理下,主要是按‘-’分割省份和城市,对‘全国’特殊处理,同时使用.trigger(“change”)才能生效!
1 | var province = select[0]['place'].split('-')[0]; |
最后,就是怎么加入”国外“选项呢,很简单,在插件源码的省市区编码表里加入就可。注意加入到省级一栏内,同时编码用未使用的编码,如100001:国外
如下:
1 | var DISTRICTS = { |
效果如图所示: