96 lines
2.2 KiB
JavaScript
96 lines
2.2 KiB
JavaScript
/* eslint no-console:0 */
|
|
|
|
import { DatePicker } from 'ant-design-vue'
|
|
import createDOMForm from '../src/createDOMForm'
|
|
import { regionStyle, errorStyle } from './styles'
|
|
|
|
const Form = {
|
|
props: {
|
|
form: Object,
|
|
},
|
|
methods: {
|
|
onSubmit (e) {
|
|
console.log('submit')
|
|
e.preventDefault()
|
|
this
|
|
.form
|
|
.validateFieldsAndScroll((error, values) => {
|
|
if (!error) {
|
|
console.log('ok', values)
|
|
} else {
|
|
console.log('error', error, values)
|
|
}
|
|
})
|
|
},
|
|
|
|
reset (e) {
|
|
e.preventDefault()
|
|
this
|
|
.form
|
|
.resetFields()
|
|
},
|
|
|
|
checkStart (rule, value, callback) {
|
|
const { validateFields } = this.form
|
|
validateFields(['end'], { force: true })
|
|
callback()
|
|
},
|
|
|
|
checkEnd (rule, value, callback) {
|
|
const end = value
|
|
const { getFieldValue } = this.form
|
|
const start = getFieldValue('start')
|
|
if (!end || !start) {
|
|
callback('please select both start and end time')
|
|
} else if (end.valueOf() < start.valueOf()) {
|
|
callback('start time should be less than end time')
|
|
} else {
|
|
callback()
|
|
}
|
|
},
|
|
},
|
|
|
|
render () {
|
|
const { form } = this
|
|
const { getFieldProps, getFieldError } = form
|
|
return (
|
|
<div style={{
|
|
margin: 20,
|
|
}}>
|
|
<h2>startTime and endTime validation</h2>
|
|
<form onSubmit={this.onSubmit}>
|
|
<div style={regionStyle}>
|
|
<div>start:
|
|
</div>
|
|
<div>
|
|
<DatePicker {...getFieldProps('start', { rules: [this.checkStart] })}/>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={regionStyle}>
|
|
<div>end:
|
|
</div>
|
|
<div>
|
|
<DatePicker {...getFieldProps('end', { rules: [this.checkEnd] })}/>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={errorStyle}>
|
|
{getFieldError('end')
|
|
? getFieldError('end').join(',')
|
|
: ''}
|
|
</div>
|
|
|
|
<div style={regionStyle}>
|
|
<button onClick={this.reset}>reset</button>
|
|
|
|
<input type='submit' value='submit'/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
|
|
export default createDOMForm()(Form)
|