|
@@ -2,7 +2,8 @@ import React, { Component } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import PropTypes from 'prop-types'
|
|
import Styles from './picker.css'
|
|
import Styles from './picker.css'
|
|
import { getDateFormatFromSepecificDate } from '../../utils'
|
|
import { getDateFormatFromSepecificDate } from '../../utils'
|
|
-import Modal from './Modal'
|
|
|
|
|
|
+import Modal from '../modal/Modal'
|
|
|
|
+import { CHINESE_MODEL, WESTERN_MODEL } from '../../const'
|
|
|
|
|
|
class DatePicker extends Component {
|
|
class DatePicker extends Component {
|
|
constructor(props) {
|
|
constructor(props) {
|
|
@@ -11,12 +12,15 @@ class DatePicker extends Component {
|
|
this.state = {
|
|
this.state = {
|
|
value: defaultDate,
|
|
value: defaultDate,
|
|
showModal: false,
|
|
showModal: false,
|
|
|
|
+ model: CHINESE_MODEL,
|
|
}
|
|
}
|
|
|
|
|
|
this.onModalOpen = this.onModalOpen.bind(this)
|
|
this.onModalOpen = this.onModalOpen.bind(this)
|
|
this.onInputChange = this.onInputChange.bind(this)
|
|
this.onInputChange = this.onInputChange.bind(this)
|
|
this.onInputClear = this.onInputClear.bind(this)
|
|
this.onInputClear = this.onInputClear.bind(this)
|
|
this.onModalClose = this.onModalClose.bind(this)
|
|
this.onModalClose = this.onModalClose.bind(this)
|
|
|
|
+ this.onChangeModel = this.onChangeModel.bind(this)
|
|
|
|
+ this.onSelectDay = this.onSelectDay.bind(this)
|
|
}
|
|
}
|
|
|
|
|
|
onModalOpen() {
|
|
onModalOpen() {
|
|
@@ -24,17 +28,29 @@ class DatePicker extends Component {
|
|
}
|
|
}
|
|
|
|
|
|
onModalClose() {
|
|
onModalClose() {
|
|
- this.setState({ showModal: false })
|
|
|
|
|
|
+ // this.setState({ showModal: false })
|
|
}
|
|
}
|
|
|
|
|
|
- onInputChange() {
|
|
|
|
- console.log('onInputChange')
|
|
|
|
|
|
+ onInputChange(event) {
|
|
|
|
+ this.setState({ value: event.target.value })
|
|
}
|
|
}
|
|
|
|
|
|
onInputClear() {
|
|
onInputClear() {
|
|
this.setState({ value: '', showModal: false })
|
|
this.setState({ value: '', showModal: false })
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ onChangeModel(model) {
|
|
|
|
+ if (model === CHINESE_MODEL) {
|
|
|
|
+ this.setState({ model: WESTERN_MODEL })
|
|
|
|
+ } else {
|
|
|
|
+ this.setState({ model: CHINESE_MODEL })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ onSelectDay(day) {
|
|
|
|
+ this.setState({ value: day.full })
|
|
|
|
+ }
|
|
|
|
+
|
|
render() {
|
|
render() {
|
|
const { inline } = this.props
|
|
const { inline } = this.props
|
|
const { value, showModal } = this.state
|
|
const { value, showModal } = this.state
|
|
@@ -47,10 +63,10 @@ class DatePicker extends Component {
|
|
>
|
|
>
|
|
<input
|
|
<input
|
|
type="text"
|
|
type="text"
|
|
- placeholder="选择日期"
|
|
|
|
|
|
+ placeholder="请选择日期"
|
|
className={Styles.input}
|
|
className={Styles.input}
|
|
value={value}
|
|
value={value}
|
|
- onChange={this.onInputChange}
|
|
|
|
|
|
+ onChange={e => this.onInputChange(e)}
|
|
onFocus={this.onModalOpen}
|
|
onFocus={this.onModalOpen}
|
|
onBlur={this.onModalClose}
|
|
onBlur={this.onModalClose}
|
|
/>
|
|
/>
|
|
@@ -62,7 +78,14 @@ class DatePicker extends Component {
|
|
/>
|
|
/>
|
|
<div className={Styles.line} />
|
|
<div className={Styles.line} />
|
|
</div>
|
|
</div>
|
|
- <Modal isMounted={showModal} delayTime={200} />
|
|
|
|
|
|
+ <Modal
|
|
|
|
+ isMounted={showModal}
|
|
|
|
+ delayTime={200}
|
|
|
|
+ onInputChange={this.onInputChange}
|
|
|
|
+ onChangeModel={this.onChangeModel}
|
|
|
|
+ onSelectDay={this.onSelectDay}
|
|
|
|
+ {...this.state}
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
)
|
|
)
|
|
}
|
|
}
|