Datepicker trigger change event after setting date, resolved #711

DASungta · Nov 27, 2015 · 14c656c · 14c656c
1 parent ab7445a
commit 14c656c
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 
 **JS:**
 
+- `Fixed` #711 Datepicker 与 Validator 结合使用时没有触发验证问题；
 - `NEW` #689 Modal 新增 `dimmer` 选项，允许用户关闭 dimmer；
 - `NEW` #719 Validator 新增 `destroy` 方法；
 - `NEW` #734 Dropdown、Selected 新增 `enable`、`disable` 方法；

diff --git a/docs/javascript/datepicker.md b/docs/javascript/datepicker.md
@@ -24,11 +24,20 @@ doc: docs/javascript/datepicker.md
 在 `<input>` 上增加 `.data-am-datepicker` 属性，调用日期插件。
 
 `````html
-<p><input type="text" class="am-form-field" placeholder="日历组件" data-am-datepicker readonly/></p>
-
+<form action="" class="am-form" data-am-validator>
+  <p>
+  <input type="text" class="am-form-field" placeholder="日历组件" data-am-datepicker readonly required />
+  </p>
+  <p><button class="am-btn am-btn-primary">提交</button></p>
+</form>
 `````
 ```html
-<p><input type="text" class="am-form-field" placeholder="日历组件" data-am-datepicker readonly/></p>
+<form action="" class="am-form" data-am-validator>
+  <p>
+  <input type="text" class="am-form-field" placeholder="日历组件" data-am-datepicker readonly required />
+  </p>
+  <p><button class="am-btn am-btn-primary">提交</button></p>
+</form>
 ```
 
 ### 结合组件使用

diff --git a/js/ui.datepicker.js b/js/ui.datepicker.js
@@ -139,15 +139,21 @@ Datepicker.prototype.close = function() {
 };
 
 Datepicker.prototype.set = function() {
-  var formated = DPGlobal.formatDate(this.date, this.format);
+  var formatted = DPGlobal.formatDate(this.date, this.format);
+  var $input;
+
   if (!this.isInput) {
     if (this.component) {
-      this.$element.find('input').prop('value', formated);
+      $input = this.$element.find('input').attr('value', formatted);
     }
-    this.$element.data('date', formated);
+
+    this.$element.data('date', formatted);
   } else {
-    this.$element.prop('value', formated);
+    $input = this.$element.attr('value', formatted);
   }
+
+  // fixes https://github.com/amazeui/amazeui/issues/711
+  $input.trigger('change');
 };
 
 Datepicker.prototype.setValue = function(newDate) {
@@ -173,8 +179,10 @@ Datepicker.prototype.place = function() {
   var left = offset.left;
   var right = $doc.width() - offset.left - $width;
   var isOutView = this.isOutView();
+
   this.$picker.removeClass('am-datepicker-right');
   this.$picker.removeClass('am-datepicker-up');
+
   if ($doc.width() > 640) {
     if (isOutView.outRight) {
       this.$picker.addClass('am-datepicker-right');
@@ -192,6 +200,7 @@ Datepicker.prototype.place = function() {
   } else {
     left = 0;
   }
+
   this.$picker.css({
     top: top,
     left: left