Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
add multi format support for DateInput
  • Loading branch information
onlyann committed Nov 14, 2018
1 parent c92cf57 commit 117550f
Show file tree
Hide file tree
Showing 6 changed files with 16,826 additions and 11 deletions.
5 changes: 3 additions & 2 deletions README.md
Expand Up @@ -154,9 +154,10 @@ http://react-component.github.io/calendar/examples/index.html
</tr>
<tr>
<td>format</td>
<td>String</td>
<td>String or String[]</td>
<td>depends on whether you set timePicker and your locale</td>
<td>use to format/parse date(without time) value to/from input</td>
<td>use to format/parse date(without time) value to/from input.
When an array is provided, all values are used for parsing and first value for display.</td>
</tr>
<tr>
<td>disabledDate</td>
Expand Down
46 changes: 43 additions & 3 deletions examples/antd-calendar.js
Expand Up @@ -112,7 +112,7 @@ class Demo extends React.Component {
locale={cn ? zhCN : enUS}
style={{ zIndex: 1000 }}
dateInputPlaceholder="please input"
formatter={getFormat(state.showTime)}
format={getFormat(state.showTime)}
disabledTime={state.showTime ? disabledTime : null}
timePicker={state.showTime ? timePickerElement : null}
defaultValue={this.props.defaultCalendarValue}
Expand Down Expand Up @@ -158,7 +158,6 @@ class Demo extends React.Component {
>
<DatePicker
animation="slide-up"
disabled={state.disabled}
calendar={calendar}
value={state.value}
onChange={this.onChange}
Expand Down Expand Up @@ -186,6 +185,44 @@ class Demo extends React.Component {
}
}

const multiFormats = ['DD/MM/YYYY', 'DD/MM/YY', 'DDMMYY', 'D/M/YY'];

class DemoMultiFormat extends React.Component {
constructor(props) {
super(props);

this.state = {
value: now,
};
}

onChange = (value) => {
console.log('Calendar change: ', (value && value.format(format)));
this.setState({
value,
});
}

render() {
const state = this.state;
return (<div style={{ width: 400, margin: 20 }}>
<div style={{ marginBottom: 10 }}>
Accepts multiple input formats
<br/>
<small>{multiFormats.join(', ')}</small>
</div>
<Calendar
locale={cn ? zhCN : enUS}
style={{ zIndex: 1000 }}
dateInputPlaceholder="please input"
format={multiFormats}
value={state.value}
onChange={this.onChange}
/>
</div>);
}
}

function onStandaloneSelect(value) {
console.log('onStandaloneSelect');
console.log(value && value.format(format));
Expand Down Expand Up @@ -213,7 +250,7 @@ ReactDOM.render((<div
defaultValue={now}
disabledTime={disabledTime}
showToday
formatter={getFormat(true)}
format={getFormat(true)}
showOk={false}
timePicker={timePickerElement}
onChange={onStandaloneChange}
Expand All @@ -229,5 +266,8 @@ ReactDOM.render((<div
<Demo defaultCalendarValue={defaultCalendarValue} />
</div>
<div style={{ clear: 'both' }}></div>
<div>
<DemoMultiFormat />
</div>
</div>
</div>), document.getElementById('__react-content'));

0 comments on commit 117550f

Please sign in to comment.