解決angularJS1裏面的date-piker日期選擇控件,選擇完日期組件不消失問題

angular已經是7+的版本了,現在寫angular1確實心累,參考文檔少,全靠摸索

項目中引用的日期插件爲

<div class="form-group" style="padding-left: 10px;">
  <label for="startDate">開始日期</label>
  <input id="startDate" class="form-control" date-time="" view="date" min-view="date" ng-model="searchForm.startDate" format='YYYY-MM-DD'
                        readOnly>
</div>

引用的js庫爲angular-datepicker.min.js或者angular-datepicker.js,可以先看下項目中具體引用的是哪個js庫,如果是min.js的話看下代碼具體有沒有被壓縮,由於是半路接手,這邊項目引用的min.js並不是壓縮過的。

原理

日期控件是通過date來控制日期的值,所以要想在選擇完日期之後隱藏迪掉日期控件,就要找到date的值改變的時候把控件hidden。接下來就是看源碼部分了,找到setDate這個方法,在裏面加入element.addClass(‘hidden’);scope.$emit(‘hidePicker’);這兩行代碼即可。

setDate = function(date) {
          if (date) {
            scope.model = date;
            if (ngModel) {
              ngModel.$setViewValue(date);
              element.addClass('hidden');
              scope.$emit('hidePicker');
            }
          }
          scope.$emit('setDate', scope.model, scope.view);

          //This is duplicated in the new functionality.
          if (scope.callbackOnSetDate) {
            scope.callbackOnSetDate(attrs.datePicker, scope.date);
          }
        };

如有疑問請聯繫我~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章