與Angularjs和Bootstrape日期選擇器

起始日期結束日期確認這是我的HTML與Angularjs和Bootstrape日期選擇器

<form name="myForm"> 
     <div class="row"> 
      <div class="col-md-2"> 
      <input data-ng-model="Data.StartDate" type="text" id="startDate" name="startDate" 
      class="form-control" data-datepicker-popup="MM-dd-yyyy" data-datepicker-append-to-body="true" 
      data-is-open="popup.fromOpened" data-ng-click="fromOpen()" placeholder="Start Date" data-ng-required="true" /> 
     </div> 
     <div class="col-md-2"> 
      <input data-ng-model="Data.EndDate" type="text" id="endDate" name="endDate" 
      class="form-control" data-datepicker-popup="MM-dd-yyyy" data-datepicker-append-to-body="true" 
      data-is-open="popup.toOpened" data-ng-click="toOpen()" placeholder="End Date" data-ng-required="true" /> 
     </div> 
     <div class="col-md-2"> 
      <button data-ng-click="Search()" class="btn btn-info">Search</button> 
     </div> 
     </div> 
     <div class="row"> 
     <span>Error list</span> 
     </div> 
    </form>

角代碼是這樣的。

$scope.$watch('Data.StartDate', validateDates); 
$scope.$watch('Data.EndDate', validateDates); 

function validateDates() { 
//  some code and highlight it on form 
}

我想添加一些體面的驗證日期在我的網頁。任何幫助將不勝感激。在此先感謝

來源

2016-07-21 Milan chavda

只需在html輸入標記中寫入type =「date」即可。

來源

2016-07-21 09:25:09

通過'$ watch'作爲示例編寫的代碼非常不可支持且難以維護。在添加新字段的情況下，您只需製作一個500+像控制器。

我建議你來創造：

ValidationFactory將包含所有類型的驗證方法;
FIELDS_CONFIG對象，你將存儲{fieldName: 'string', validationErrorMessage: 'string', fieldType: 'string', validateIf: 'function', value: {} //path to another factory, where field origin value stored};
僅在專用form，div等和$watch整個型號上執行驗證的指令，您將提供給它;
將所有屬性移動到專用form模型對象。

因此，一旦東西model變化，指令將基於fieldTypeValidationFactory執行驗證方法，將使用value傳遞到taht方法。驗證結果將存儲在ValidationFactory.errors = {}，密鑰爲fieldName，以輕鬆訪問錯誤以顯示validationErrorMessage。

簡單的方法就是莫名其妙的反模式是：

ng-change指令要驗證每個字段。 ng-change將接受ValidationFactory.validateDate(value, message)。所有錯誤都應存儲在ValidationFactory.errors = []以使接入點從父控制器等檢查ValidationFactory.isAnyErrors()。

來源

2016-07-21 11:10:24 Appeiron

與Angularjs和Bootstrape日期選擇器

回答

相關問題