fix issue #495

Author: inter-action

src/date-picker/BasePicker.jsx

@@ -302,9 +302,9 @@ export default class BasePicker extends Component {
             const iptxt = value
             const nstate: Object = { text: iptxt }
 
-            if (iptxt.trim() === '') {
+            if (iptxt.trim() === '' || !this.isInputValid(iptxt)) {
               nstate.value = null
-            } else if (this.isInputValid(iptxt)) {//only set value on a valid date input
+            } else {//only set value on a valid date input
               nstate.value = this.parseDate(iptxt)
             }
             this.setState(nstate)

src/date-picker/__test__/DatePicker_test.jsx

@@ -76,6 +76,7 @@ describe('DatePicker tests', function () {
         onChange
       })
       w.find('input').simulate('focus');
+      w.find('input').simulate('change', {target: {value: ''}})
       w.find('.el-date-table td.available').at(0).simulate('click', nativeEvent)
       expect(onChange.called).toBeTruthy()
       expect(onChange.args[0][0] instanceof Date).toBeTruthy()

src/date-picker/basic/MonthTable.jsx

@@ -1,29 +1,27 @@
-//@flow
 import React from 'react'
 
 import { PropTypes, Component } from '../../../libs';
 import { hasClass, deconstructDate } from '../utils'
 import Locale from '../../locale'
 
-import type {MonthTableProps} from '../Types';
 
 export default class MonthTable extends Component {
-  constructor(props: MonthTableProps){
+  constructor(props){
     super(props)
   }
 
-  getCellStyle(month: number) {
+  getCellStyle(month) {
     const {date, disabledDate, value} = this.props
-    const style: any = {};
+    const style = {};
     const ndate = new Date(date)
     ndate.setMonth(month);
     style.disabled = typeof disabledDate === 'function' && disabledDate(ndate);
-    style.current = deconstructDate(value).month === month;
+    style.current = value && deconstructDate(value).month === month;
     return style;
   }
 
-  handleMonthTableClick(event: SyntheticMouseEvent) {
-    const target: any = event.target;
+  handleMonthTableClick(event) {
+    const target = event.target;
     if (target.tagName !== 'A') return;
     if (hasClass(target.parentNode, 'disabled')) return;
     const column = target.parentNode.cellIndex;
@@ -66,8 +64,8 @@ export default class MonthTable extends Component {
 MonthTable.propTypes = {
   // current date, specific to view
   date: PropTypes.instanceOf(Date).isRequired,
-  // user picked value
-  value: PropTypes.instanceOf(Date).isRequired,
+  // user picked value, value: Date|null
+  value: PropTypes.instanceOf(Date),
   onPick: PropTypes.func.isRequired,
   // (Date)=>boolean
   disabledDate: PropTypes.func

src/date-picker/basic/YearTable.jsx

@@ -18,7 +18,7 @@ export default class YearTable extends Component {
 
     ndate.setFullYear(year);
     style.disabled = typeof disabledDate === 'function' && disabledDate(ndate);
-    style.current = deconstructDate(value).year === year;
+    style.current = value && deconstructDate(value).year === year;
 
     return style;
   }
@@ -84,7 +84,7 @@ export default class YearTable extends Component {
 }
 
 YearTable.propTypes = {
-  value: PropTypes.instanceOf(Date).isRequired,
+  value: PropTypes.instanceOf(Date),
   date: PropTypes.instanceOf(Date).isRequired,
   // (year: number)=>
   onPick: PropTypes.func.isRequired,

src/date-picker/panel/DatePanel.jsx

@@ -49,7 +49,8 @@ export default class DatePanel extends Component {
   }
 
   componentWillReceiveProps(nextProps: any) {
-    this.setState({ date: nextProps.value })
+    let date = nextProps.value || new Date()
+    this.setState({ date })
   }
 
   resetDate() {
@@ -271,7 +272,6 @@ export default class DatePanel extends Component {
     const {month} = deconstructDate(date)
     const t = Locale.t
 
-    //todo: handle v-*
     return (
       <div
         ref="root"
@@ -413,6 +413,7 @@ export default class DatePanel extends Component {
 
 DatePanel.propTypes = {
   // user picked date value
+  // value: Date | null
   value: PropTypes.instanceOf(Date),
   // todo:
   onPick: PropTypes.func.isRequired,

src/date-picker/panel/DateRangePanel.jsx

@@ -228,7 +228,10 @@ export default class DateRangePanel extends Component {
 
 DateRangePanel.propTypes = {
   // user picked date value
-  value: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
+  /*
+  value: null | [Date, null | false]
+  */
+  value: PropTypes.any,
   // ([value1, value2]|null, isKeepPanel)=>()
   onPick: PropTypes.func.isRequired,
   showTime: PropTypes.bool,