jquery-weui地区选择器改为时间季度选择器

city-picker.js更改后的代码

// jshint ignore: start+function($){$.rawCitiesData = [];var quarters = ["第一季度", "第二季度", "第三季度", "第四季度"];var months = ["第一个月", "第二个月", "第三个月"];for(var i = 2014; i <= new Date().getFullYear(); i++) {  var tmpYear = {    "name" : i + "年",    "code" : i + "00",    "sub" : []  }  for (var j = 0; j < quarters.length; j++) {    var tmpQuarter = {      "name" : quarters[j],      "code" : i + "00" + j,      "sub" : []    }    for (var k = 0; k < months.length; k++) {      var tmpMonth = {        "name" : months[k],        "code" : i + "00" + j + k      }      tmpQuarter.sub.push(tmpMonth)    }    tmpYear.sub.push(tmpQuarter)  }  $.rawCitiesData.push(tmpYear);}}($);// jshint ignore: end/* global $:true *//* jshint unused:false*/+ function($) {  "use strict";  var defaults;  var raw = $.rawCitiesData;  var format = function(data) {    var result = [];    for(var i=0;i<data.length;i++) {      var d = data[i];      if(/^请选择/.test(d.name)) continue;      result.push(d);    }    if(result.length) return result;    return [];  };  var sub = function(data) {    if(!data.sub) return [{ name: '', code: data.code }];    return format(data.sub);  };  var getCities = function(d) {    for(var i=0;i< raw.length;i++) {      if(raw[i].code === d || raw[i].name === d) return sub(raw[i]);    }    return [];  };  var getDistricts = function(p, c) {    for(var i=0;i< raw.length;i++) {      if(raw[i].code === p || raw[i].name === p) {        for(var j=0;j< raw[i].sub.length;j++) {          if(raw[i].sub[j].code === c || raw[i].sub[j].name === c) {            return sub(raw[i].sub[j]);          }        }      }    }  };  var parseInitValue = function (val) {    var p = raw[0], c, d;    var tokens = val.split(' ');    raw.map(function (t) {      if (t.name === tokens[0]) p = t;    });    p.sub.map(function (t) {      if (t.name === tokens[1]) c = t;    })    if (tokens[2]) {      c.sub.map(function (t) {        if (t.name === tokens[2]) d = t;      })    }    if (d) return [p.code, c.code, d.code];    return [p.code, c.code];  }  var toCode = function(raw, val) {    var p, c, d;    var tokens = val.split(' ');    raw.map(function (t) {      if (t.name === tokens[0]) p = t;    });    p.sub.map(function (t) {      if (t.name === tokens[1]) c = t;    })    if (tokens[2]) {      c.sub.map(function (t) {        if (t.name === tokens[2]) d = t;      })    }    if (d) return [p.code, c.code, d.code];    return [p.code, c.code];  }  $.fn.cityPicker = function(params) {    params = $.extend({}, defaults, params);    return this.each(function() {      var self = this;      var PRovincesName = raw.map(function(d) {        return d.name;      });      var provincesCode = raw.map(function(d) {        return d.code;      });      var initCities = sub(raw[0]);      var initCitiesName = initCities.map(function (c) {        return c.name;      });      var initCitiesCode = initCities.map(function (c) {        return c.code;      });      var initDistricts = sub(raw[0].sub[0]);      var initDistrictsName = initDistricts.map(function (c) {        return c.name;      });      var initDistrictsCode = initDistricts.map(function (c) {        return c.code;      });      var currentProvince = provincesName[0];      var currentCity = initCitiesName[0];      var currentDistrict = initDistrictsName[0];      var cols = [          {            displayValues: provincesName,            values: provincesCode,            CSSClass: "col-province"          },          {            displayValues: initCitiesName,            values: initCitiesCode,            cssClass: "col-city"          }        ];        if(params.showDistrict) cols.push({          values: initDistrictsCode,          displayValues: initDistrictsName,          cssClass: "col-district"        });      var config = {        cssClass: "city-picker",        rotateEffect: false,  //为了性能        formatValue: function (p, values, displayValues) {          return displayValues.join(' ');        },        onChange: function (picker, values, displayValues) {          var newProvince = picker.cols[0].displayValue;          var newCity;          if(newProvince !== currentProvince) {            var newCities = getCities(newProvince);            newCity = newCities[0].name;            var newDistricts = getDistricts(newProvince, newCity);            picker.cols[1].replaceValues(newCities.map(function (c) {              return c.code;            }), newCities.map(function (c) {              return c.name;            }));            if(params.showDistrict) picker.cols[2].replaceValues(newDistricts.map(function (d) {              return d.code;            }), newDistricts.map(function (d) {              return d.name;            }));            currentProvince = newProvince;            currentCity = newCity;            picker.updateValue();            return false; // 因为数据未更新完，所以这里不进行后序的值的处理          } else {            if(params.showDistrict) {              newCity = picker.cols[1].displayValue;              if(newCity !== currentCity) {                var districts = getDistricts(newProvince, newCity);                picker.cols[2].replaceValues(districts.map(function (d) {                  return d.code;                }), districts.map(function (d) {                  return d.name;                }));                currentCity = newCity;                picker.updateValue();                return false; // 因为数据未更新完，所以这里不进行后序的值的处理              }            }          }          //如果最后一列是空的，那么取倒数第二列          var len = (values[values.length-1] ? values.length - 1 : values.length - 2)          $(self).attr('data-code', values[len]);          $(self).attr('data-codes', values.join(','));          if (params.onChange) {            params.onChange.call(self, picker, values, displayValues);          }        },        cols: cols,        rawCitiesData : $.rawCitiesData,        toCode : toCode      };      if(!this) return;      var p = $.extend({}, params, config);      var val = $(this).val();      if (!val) val = '2017年 第一季度 第一个月';      currentProvince = val.split(" ")[0];      currentCity = val.split(" ")[1];      currentDistrict= val.split(" ")[2];      if(val) {        p.value = parseInitValue(val);        if(p.value[0]) {          var cities = getCities(p.value[0]);          p.cols[1].values = cities.map(function (c) {            return c.code;          });          p.cols[1].displayValues = cities.map(function (c) {            return c.name;          });        }        if(p.value[1]) {          if (params.showDistrict) {            var dis = getDistricts(p.value[0], p.value[1]);            p.cols[2].values = dis.map(function (d) {              return d.code;            });            p.cols[2].displayValues = dis.map(function (d) {              return d.name;            });          }        } else {          if (params.showDistrict) {            var dis = getDistricts(p.value[0], p.cols[1].values[0]);            p.cols[2].values = dis.map(function (d) {              return d.code;            });            p.cols[2].displayValues = dis.map(function (d) {              return d.name;            });          }        }      }      $(this).picker(p);    });  };  defaults = $.fn.cityPicker.prototype.defaults = {    showDistrict: true  };}($);
涉及到的样式修改代码jquery-weui.css中添加
.toolbar .cancel-picker {  position: absolute;  box-sizing: border-box;  height: 2.2rem;  line-height: 2.2rem;  color: #04BE02;  z-index: 1;  padding: 0 .5rem;}涉及到jquery-weui.js源码中的修改
toolbarTemplate: '<div class="toolbar">/          <div class="toolbar-inner">/          <a href="javascript:;" class="cancel-picker">取消</a>/          <a href="Javascript:;" class="picker-button close-picker">{{closeText}}</a>/          <h1 class="title">{{title}}</h1>/          </div>/          </div>',添加了<a href="javascript:;" class="cancel-picker">取消</a>/
地区选择器默认只要改变就实时的显示到文本输入框中,我的需求是点击确定才改变值，点击取消不改变。查看源码发现
p.updateValue = function () {          var newValue = [];          var newDisplayValue = [];          for (var i = 0; i < p.cols.length; i++) {              if (!p.cols[i].divider) {                  newValue.push(p.cols[i].value);                  newDisplayValue.push(p.cols[i].displayValue);              }          }          if (newValue.indexOf(undefined) >= 0) {              return;          }          p.value = newValue;          p.displayValue = newDisplayValue;          if (p.params.onChange) {              p.params.onChange(p, p.value, p.displayValue);          }          if (p.input && p.input.length > 0) {              // $(p.input).val(p.params.formatValue ? p.params.formatValue(p, p.value, p.displayValue) : p.value.join(' '));              $(p.input).trigger('change');          }      };注释掉的就是导致实时改变input框的代码，将其移至确定按钮点击时间代码中
$(document).on("click", ".close-picker", function() {        var pickerToClose = $('.weui-picker-modal.weui-picker-modal-visible');        if (pickerToClose.length > 0) {          $(p.input).val(p.params.formatValue ? p.params.formatValue(p, p.value, p.displayValue) : p.value.join(' '));          $.closePicker(pickerToClose);        }      });由于取消按钮是后来添加的，所以也给其注册点击事件
  $(document).on("click", ".cancel-picker", function() {    var pickerToClose = $('.weui-picker-modal.weui-picker-modal-visible');    if (pickerToClose.length > 0) {      $.closePicker(pickerToClose);    }  });
发现一个bug，每次选择完取消再点击显示的是新选择的值而不是原来input正确的值，估计还是因为默认是实时显示引起的。查看源码
// Set value              if (!p.initialized) {                  if (p.params.value) {                      p.setValue(p.params.value, 0);                  }              }              else {                  var tmpCode = p.params.toCode(p.params.rawCitiesData, p.input.val());                  p.setValue(tmpCode, 0);                  // if (p.value) p.setValue(p.value, 0);              }注释部分就是把change引起的新值显示到控件上，所以只需要改为显示input中的值。
p.params.toCode和p.params.rawCitiesData在config中配置，具体见city-picker.js
最后展示一下季度选择器