2020-03-25

citypicker添加 操作按钮，以清除为例

<div class="weui-cells weui-cells_form m-form">
<div class="form-item">
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label"><span class="u-star">*</span>旅居史(返<br />&nbsp;&nbsp;靖前14天)</label>
          </div>
          <div class="weui-cell__bd">
            <input class="weui-input j-address fromCity" type="text" placeholder="请选择" id="history1" />
          </div>
        </div>
</div>
通过toolbarTemplate 自定义工具栏操作按钮
$("#history1").cityPicker({
      title: "地址选择",
      value: his1.join(" "),
      toolbarTemplate: '<div class="toolbar">' +
        '<div class="toolbar-inner">' +
        '<a href="javascript:;" class="picker-button close-picker">完成</a>' +
        '<h1 class="title">地址选择</h1>' +
        '<a href="javascript:;" class="clear-button clear-button1 close-picker">清除</a>' +
        '</div>' +
        '</div>',
      onChange: function (e) {
        // history1 = e.displayValue.join("-");
      }
    });
//清除输入框内容
$("body").on("click", ".clear-button1", function () {
      $("#history1").val("");
    });

自定义按钮css样式：
.toolbar .toolbar-inner .clear-button {
    position: absolute;
    left: 0;
    box-sizing: border-box;
    height: 2.2rem;
    line-height: 2.2rem;
    color: #0093FD;
    z-index: 1;
    padding: 0 .5rem;
}

效果如下：

calendar操作按钮自定义.png