DatePicker
This commit is contained in:
parent
e2b2e38431
commit
d609e836bf
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
@ -59,6 +59,7 @@
|
||||||
"dist"
|
"dist"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"moment": "^2.24.0",
|
||||||
"react-toastify": "^4.5.2"
|
"react-toastify": "^4.5.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
|
import moment from 'moment';
|
||||||
import {FormConsumer} from "./FormContext";
|
import {FormConsumer} from "./FormContext";
|
||||||
import FormItemError from "./FormItemError";
|
import FormItemError from "./FormItemError";
|
||||||
|
|
||||||
|
@ -15,19 +16,30 @@ export default class DatePicker extends Component
|
||||||
|
|
||||||
renderDatePicker(data)
|
renderDatePicker(data)
|
||||||
{
|
{
|
||||||
|
const value = this.props.value
|
||||||
let props = {...this.props}
|
let props = {...this.props}
|
||||||
if (props.children) delete props.children
|
if (props.children) delete props.children
|
||||||
|
if (props.value) delete props.value
|
||||||
if (props.onChangeValue) delete props.onChangeValue
|
if (props.onChangeValue) delete props.onChangeValue
|
||||||
return (
|
return (
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
{this.renderLabel(data)}
|
{this.renderLabel(data)}
|
||||||
<input onChange={(e) => this.props.onChangeValue(e.target.value)} {...props} />
|
<input
|
||||||
|
value={this.parseValue(value)}
|
||||||
|
onChange={(e) => this.props.onChangeValue(moment(e.target.value))} {...props} />
|
||||||
<p className="text-muted">DatePicker {this.props.type}</p>
|
<p className="text-muted">DatePicker {this.props.type}</p>
|
||||||
<FormItemError name={this.props.name} data={data} />
|
<FormItemError name={this.props.name} data={data} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
parseValue(value)
|
||||||
|
{
|
||||||
|
if (this.props.type == 'date') return moment(value).format('YYYY-MM-DD')
|
||||||
|
if (this.props.type == 'time') return moment(value).format('HH:mm:ss')
|
||||||
|
return moment(value).format('YYYY-MM-DDTHH:mm')
|
||||||
|
}
|
||||||
|
|
||||||
renderLabel(data)
|
renderLabel(data)
|
||||||
{
|
{
|
||||||
if (this.props.label) {
|
if (this.props.label) {
|
||||||
|
@ -43,5 +55,6 @@ DatePicker.defaultProps = {
|
||||||
id: 'input',
|
id: 'input',
|
||||||
className: 'form-control',
|
className: 'form-control',
|
||||||
type: 'datetime-local',
|
type: 'datetime-local',
|
||||||
|
value: null,
|
||||||
onChangeValue: (text) => {}
|
onChangeValue: (text) => {}
|
||||||
}
|
}
|
||||||
|
|
|
@ -66,5 +66,6 @@ FilePicker.defaultProps = {
|
||||||
name: 'file-picker',
|
name: 'file-picker',
|
||||||
id: 'file-picker',
|
id: 'file-picker',
|
||||||
className: 'form-control',
|
className: 'form-control',
|
||||||
|
value: null,
|
||||||
onChangeValue: (file) => {}
|
onChangeValue: (file) => {}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5981,6 +5981,10 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@
|
||||||
dependencies:
|
dependencies:
|
||||||
minimist "0.0.8"
|
minimist "0.0.8"
|
||||||
|
|
||||||
|
moment@^2.24.0:
|
||||||
|
version "2.24.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
|
||||||
|
|
||||||
ms@2.0.0:
|
ms@2.0.0:
|
||||||
version "2.0.0"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
|
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
|
||||||
|
|
Loading…
Reference in New Issue