Merge pull request #375 from ant-design/develop-0.10.0-datepicker-validation

Develop 0.10.0 datepicker and inputnumber validation

components/datepicker/demo/select.md

@@ -2,7 +2,7 @@
 
 - order: 2
 
-通过设置选择日期的回调事件 `onSelect`，完成交互行为。
+通过设置选择日期的回调事件 `onChange`，完成交互行为。
 
 ---
 
@@ -14,7 +14,7 @@ var Picker = React.createClass({
     console.log(new Date(value.getTime()));
   },
   render: function() {
-    return <Datepicker onSelect={this.handleChange} />
+    return <Datepicker onChange={this.handleChange} />
   }
 });
 

components/datepicker/index.jsx

@@ -44,15 +44,20 @@ function createPicker(TheCalendar) {
         format: 'yyyy-MM-dd',
         placeholder: '请选择日期',
         transitionName: 'slide-up',
-        onSelect() {
-        }
+        onSelect: null, //向前兼容
+        onChange() {}  //onChange可用于Validator
       };
     },
     handleChange(v) {
       this.setState({
         value: v
       });
-      this.props.onSelect(new Date(v.getTime()));
+      let timeValue = new Date(v.getTime());
+      //onSelect为向前兼容.
+      if (this.props.onSelect) {
+        require('util-deprecate')(this.props.onSelect, 'onSelect property of Datepicker is deprecated, use onChange instead')(timeValue);
+      }
+      this.props.onChange(timeValue);
     },
     render() {
       let calendar = (

components/datepicker/index.md

@@ -24,7 +24,7 @@
 | defaultValue | 默认日期       | string   | 无           |
 | format       | 展示的日期格式 | string   | "yyyy-MM-dd" |
 | disabledDate | 不可选择的日期 | function | 无           |
-| onSelect     | 选择日期的回调 | function | 无           |
+| onChange     | 日期发生变化的回调，发生在用户选择日期时 | function | 无           |
 | showTime     | 显示时间选择条 | boolean  | false        |
 | disabled     | 禁用           | bool     | false        |
 | size         | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string   | 无  |

components/validation/demo/basic.md

@@ -18,6 +18,8 @@ var Option = Select.Option;
 var Radio = antd.Radio;
 var RadioGroup = antd.Radio.Group;
 var Button = antd.Button;
+var Datepicker = antd.Datepicker;
+var InputNumber = antd.InputNumber;
 
 function cx(classNames) {
   if (typeof classNames === 'object') {
@@ -45,7 +47,9 @@ var Form = React.createClass({
         radio: {},
         passwd: {},
         rePasswd: {},
-        textarea: {}
+        textarea: {},
+        birthday: {},
+        primeNumber: {}
       },
       formData: {
         email: undefined,
@@ -54,7 +58,9 @@ var Form = React.createClass({
         radio: undefined,
         passwd: undefined,
         rePasswd: undefined,
-        textarea: undefined
+        textarea: undefined,
+        birthday: undefined,
+        primeNumber: 9
       },
       isEmailOver: false, // email 是否输入完毕
       emailValidateMethod: 'onBlur' // 用于改变 email 的验证方法
@@ -142,6 +148,22 @@ var Form = React.createClass({
     }
   },
 
+  checkBirthday(rule, value, callback) {
+    if (value && value.getTime() >= Date.now()){
+      callback(new Error('你不可能在未来出生吧!'));
+    } else {
+      callback();
+    }
+  },
+  
+  checkPrime(rule, value, callback) {
+    if (value !== 11) {
+      callback(new Error('8~12之间的质数明明是11啊!'));
+    } else {
+      callback();
+    }
+  },
+  
   render() {
     var formData = this.state.formData;
     var status = this.state.status;
@@ -234,7 +256,35 @@ var Form = React.createClass({
               </div>
             </div>
           </div>
-
+          
+          <div className="ant-form-item">
+            <label className="col-7" htmlFor="birthday" required>生日：</label>
+            <div className="col-12">
+              <div className={this.renderValidateStyle('birthday', false)}>
+                <Validator rules={[{
+                  required: true,
+                  type: 'date',
+                  message: '你的生日是什么呢?'
+                }, {validator: this.checkBirthday}]}>
+                  <Datepicker name="birthday" value={formData.birthday}></Datepicker>
+                </Validator>
+                {status.birthday.errors ? <div className="ant-form-explain"> {status.birthday.errors.join(', ')}</div> : null}
+              </div>
+            </div>
+          </div>
+          
+          <div className="ant-form-item">
+            <label className="col-7" htmlFor="birthday" required>8~12间的质数：</label>
+            <div className="col-12">
+              <div className={this.renderValidateStyle('primeNumber', false)}>
+                <Validator rules={[{validator: this.checkPrime}]}>
+                  <InputNumber name="primeNumber" min={8} max={12} value={formData.primeNumber}/>
+                </Validator>
+                {status.primeNumber.errors ? <div className="ant-form-explain"> {status.primeNumber.errors.join(', ')}</div> : null}
+              </div>
+            </div>
+          </div>
+          
           <div className="ant-form-item">
             <label className="col-7" htmlFor="remark" required>备注：</label>
             <div className="col-12">