jquery weui日期選擇控件添加取消按鈕

如圖：

上圖是jQuery weui的時間選擇控件，紅框處本來應該有個“取消”按鈕的，可惜偏偏沒有，當用戶不想選擇的時候就不好處理，雖然插件提供了點擊其他區域關閉的功能，但過於隱晦，不容易發現，因此本文的目的就是把這個取消按鈕加上.

直接上代碼：

大概4016行下面添加一個取消配置項，4021行下面添加取消按鈕DOM結構，如下

var defaults = {
          updateValuesOnMomentum: false,
          updateValuesOnTouchmove: true,
          rotateEffect: false,
          momentumRatio: 7,
          freeMode: false,
          // Common settings
          scrollToInput: true,
          inputReadOnly: true,
          toolbar: true,
          toolbarCloseText: '完成',
          toolbarCancelText: '取消',
          title: '請選擇',
          toolbarTemplate: '<div class="toolbar">\
          <div class="toolbar-inner">\
          <a href="javascript:;" class="picker-button close-picker">{{closeText}}</a>\
          <a href="javascript:;" class="picker-button cancel-picker">{{CancelText}}</a>\
          <h1 class="title">{{title}}</h1>\
          </div>\
          </div>',
      };

　　大概4434行新增配置項替換規則，如下：

pickerHTML =
              '<div class="' + (pickerClass) + '">' +
                  (p.params.toolbar ? p.params.toolbarTemplate.replace(/{{closeText}}/g, p.params.toolbarCloseText).replace(/{{CancelText}}/g, p.params.toolbarCancelText).replace(/{{title}}/g, p.params.title) : '') +
                  '<div class="picker-modal-inner picker-items">' +
                      colsHTML +
                      '<div class="picker-center-highlight"></div>' +
                  '</div>' +
              '</div>';

　　大概4607行下面添加監聽取消按鈕的事件，如下：

$(document).on("click", ".cancel-picker", function() {
        var pickerToClose = $('.weui-picker-modal.weui-picker-modal-visible');
        if (pickerToClose.length > 0) {
            $.closePicker(pickerToClose);
            $(document).trigger('datepickerclose');
        }
    });

　　注意：由於插件關閉日期彈窗的特殊做法，導致無法拿到需要輸入日期的input框，從而導致無法執行點擊取消按鈕時清空input的值，所以這里只能暴露一個“datepickerclose”事件，在代碼中自行監聽這個事件，根據需要做處理，如：清空input的值（只要啟動這個插件input框就自動填入日期值） 我們js中寫法，如下：

$(document).on('datepickerclose', function () {
    if($(selectorA).length > 0) {
        $(selectorA).val('');
    }
    if($(selectorB).length > 0) {
        $(selectorA).val('');
    }
})

　　

雖然實現了功能但是有個體驗不好的地方，插件第一次點擊文本框時會自動填入日期，但執行該函數后，第二次點擊文本框就不會自動填入日期，必須手動選擇

jquery.weui.css要新增樣式，控制取消按鈕的顯示位置

.toolbar .cancel-picker{
    left: 0;
    right: auto;
}