Skip to content

Commit

Permalink
DateTimeRangePicker update
Browse files Browse the repository at this point in the history
Yohanson555 committed Aug 10, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 7596fb5 commit fb785b4
Showing 6 changed files with 253 additions and 157 deletions.
40 changes: 39 additions & 1 deletion docs/app.jsx
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
import {render} from 'react-dom';
import moment from 'moment';

import {DatetimePicker, DatetimePickerTrigger} from '../src/';
import {DatetimePicker, DatetimePickerTrigger, DatetimeRangePicker} from '../src/';
import './app.less';


@@ -77,6 +77,39 @@ class PopupPicker extends Component {
}
}

class RangePicker extends Component {
constructor() {
super();
this.state = {
datetime: moment()
};
}

handleChange = (moment) => {
this.setState({
datetime: moment
});
}

render() {
const shortcuts = {
'Today': moment()
};
const { datetime } = this.state;

return (
<DatetimeRangePicker
fromLabel='From:'
toLabel='To:'
shortcuts={shortcuts}
moment={datetime}
onChange={this.handleChange}
showTimePicker={true}
/>
);
}
}

render(
<InlinePicker />,
document.getElementById('inline-picker')
@@ -87,3 +120,8 @@ render(
document.getElementById('popup-picker')
);

render(
<RangePicker />,
document.getElementById('range-picker')
);

227 changes: 152 additions & 75 deletions docs/index.html
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>React Datetime Picker</title>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500&amp;subset=latin,cyrillic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500&amp;subset=latin,cyrillic" rel="stylesheet"
type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism.min.css">
<script src="https://use.fontawesome.com/7fdb149223.js"></script>
</head>

<body>
<h1 class="title">React Datetime Picker
<div class="buttons">
<a class="github-button" href="https://github.com/AllenWooooo/rc-datetime-picker" data-icon="octicon-star" data-count-href="/AllenWooooo/rc-datetime-picker/stargazers" data-count-api="/repos/AllenWooooo/rc-datetime-picker#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star AllenWooooo/rc-datetime-picker on GitHub">Star</a>
<a class="github-button" href="https://github.com/AllenWooooo/rc-datetime-picker" data-icon="octicon-star"
data-count-href="/AllenWooooo/rc-datetime-picker/stargazers"
data-count-api="/repos/AllenWooooo/rc-datetime-picker#stargazers_count"
data-count-aria-label="# stargazers on GitHub"
aria-label="Star AllenWooooo/rc-datetime-picker on GitHub">Star</a>
</div>
</h1>
<div class="content">
@@ -23,96 +30,166 @@ <h1 class="title">React Datetime Picker
<li>dist/rc-datetime-picker.min.js</li>
</ul>
<div class="heading">Usage</div>

<div class="caption">Inline Mode</div>
<div class="example-code">
<pre><code class="language-jsx">import React, {Component} from 'react';
import moment from 'moment';
import {DatetimePicker} from 'rc-datetime-picker';

class App extends Component {
constructor() {
super();
this.state = {
moment: moment()
};
}

handleChange = (moment) => {
this.setState({
moment
});
}

render() {
return (
&lt;DatetimePicker
moment={this.state.moment}
onChange={this.handleChange}
/&gt;
);
}
}

render(
&lt;App /&gt;,
document.getElementById('app')
);</code></pre>
<pre>
<code class="language-jsx">
import React, {Component} from 'react';
import moment from 'moment';
import {DatetimePicker} from 'rc-datetime-picker';

class App extends Component {
constructor() {
super();
this.state = {
moment: moment()
};
}

handleChange = (moment) => {
this.setState({
moment
});
}

render() {
return (
&lt;DatetimePicker
moment={this.state.moment}
onChange={this.handleChange}
/&gt;
);
}
}

render(
&lt;App /&gt;,
document.getElementById('app')
);
</code>
</pre>

<div class="example">
<div id="inline-picker"></div>
</div>
</div>

<div class="caption">Popup Mode</div>

<div class="example-code">
<pre><code class="language-jsx">import React, {Component} from 'react';
import moment from 'moment';
import {DatetimePickerTrigger} from 'rc-datetime-picker';

class App extends Component {
constructor() {
super();
this.state = {
moment: moment()
};
}

handleChange = (moment) => {
this.setState({
moment
});
}

render() {
const shortcuts = {
'Today': moment(),
'Yesterday': moment().subtract(1, 'days'),
'Clear': ''
};

return (
&lt;DatetimePickerTrigger
shortcuts={shortcuts}
moment={this.state.moment}
onChange={this.handleChange}&gt
&lt;input type="text" value={this.state.moment.format('YYYY-MM-DD HH:mm')} readOnly /&gt;
&lt;/DatetimePickerTrigger&gt;
);
}
}

render(
&lt;App /&gt;,
document.getElementById('app')
);</code></pre>
<pre>
<code class="language-jsx">
import React, {Component} from 'react';
import moment from 'moment';
import {DatetimePickerTrigger} from 'rc-datetime-picker';

class App extends Component {
constructor() {
super();
this.state = {
moment: moment()
};
}

handleChange = (moment) => {
this.setState({
moment
});
}

render() {
const shortcuts = {
'Today': moment(),
'Yesterday': moment().subtract(1, 'days'),
'Clear': ''
};

return (
&lt;DatetimePickerTrigger
shortcuts={shortcuts}
moment={this.state.moment}
onChange={this.handleChange}&gt
&lt;input type="text" value={this.state.moment.format('YYYY-MM-DD HH:mm')} readOnly /&gt;
&lt;/DatetimePickerTrigger&gt;
);
}
}

render(
&lt;App /&gt;,
document.getElementById('app')
);
</code>
</pre>

<div class="example">
<div id="popup-picker"></div>
</div>
</div>

<div class="caption">Range Mode</div>

<div class="example-code">
<pre>
<code class="language-jsx">
import React, {Component} from 'react';
import {render} from 'react-dom';
import moment from 'moment';

import {DatetimePicker} from 'rc-datetime-picker';
import './app.less';

class App extends Component {
constructor() {
super();
this.state = {
datetime: moment()
};
}

handleChange = (moment) => {
this.setState({
datetime: moment
});
}

render() {
const shortcuts = {
'Today': moment()
};
const { datetime } = this.state;

return (
&lt;DatetimeRangePicker
fromLabel='From:'
toLabel='To:'
shortcuts={shortcuts}
moment={datetime}
onChange={this.handleChange}
showTimePicker={true}
/&gt;
);
}
}

render(
&lt;App /&gt;,
document.getElementById('app')
);
</code>
</pre>

<div class="example">
<div id="range-picker"></div>
</div>
</div>
</div>

<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/components/prism-jsx.min.js"></script>
<script src="app.js"></script>
</body>
</html>

</html>
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rc-datetime-picker",
"version": "1.7.1",
"version": "1.8.0",
"description": "React datetime picker by momentjs",
"main": "dist/rc-datetime-picker.cjs.js",
"keywords": [
114 changes: 41 additions & 73 deletions src/Range.jsx
Original file line number Diff line number Diff line change
@@ -3,16 +3,17 @@ import classNames from 'classnames/bind';
import blacklist from 'blacklist';

import DatetimePicker from './Picker.jsx';
import Shortcuts from './panels/Shortcuts.jsx';
import {CONFIRM_BUTTON_TEXT, START_DATE_TEXT, END_DATE_TEXT} from './constants.js';

import {START_DATE_TEXT, END_DATE_TEXT} from './constants.js';

class Range extends Component {
constructor(props) {
super(props);

this.state = {
moment: props.moment
};

this.handleChange = this.handleChange.bind(this);
}

componentWillReceiveProps(props) {
@@ -21,30 +22,17 @@ class Range extends Component {
});
}

handleChange = (moment) => {
handleChange(moment) {
const { onChange } = this.props;

this.setState({
moment
});
}

handleShortcutChange = (moment, isCustom) => {
const {onChange} = this.props;

if (isCustom) {
this.setState({
moment
});
} else {
onChange && onChange(moment);
if (onChange && typeof onChange === 'function') {
onChange(moment);
}
}

onConfirm = () => {
const {moment} = this.state;
const {onChange} = this.props;

onChange && onChange(moment);
}

render() {
const {moment} = this.state;
@@ -55,7 +43,6 @@ class Range extends Component {
showTimePicker = false,
isOpen = true,
shortcuts,
confirmButtonText = CONFIRM_BUTTON_TEXT,
startDateText = START_DATE_TEXT,
endDateText = END_DATE_TEXT
} = this.props;
@@ -65,59 +52,40 @@ class Range extends Component {

return (
<div className={className} style={{display: isOpen ? 'block' : 'none'}}>
<div className="tools-bar">
{shortcuts
? <Shortcuts {...props} moment={moment || {}} range shortcuts={shortcuts} onChange={this.handleShortcutChange} />
: undefined
}
<div className="buttons">
<button type="button" className="btn" onClick={this.onConfirm}>{confirmButtonText}</button>
<div className="datetime-range-picker-panel">
<div className="datetime-range-picker-item">
<DatetimePicker
shortcuts={shortcuts}
label={fromLabel || startDateText}
{...props}
isOpen={isOpen}
className="range-start-picker"
showTimePicker={showTimePicker}
moment={moment}
range
rangeAt="start"
onChange={this.handleChange}
format={formatStyle}
minPanel="day"
/>
</div>
</div>

<div className="datetime-range-picker-panel">
<table>
<tbody>
<tr>
<td className="datetime-text">
<span className="text-label">{startDateText}</span>
<span className="text-value">{moment && moment.start ? moment.start.format(formatStyle) : undefined}</span>
</td>
<td className="datetime-text">
<span className="text-label">{endDateText}</span>
<span className="text-value">{moment && moment.end ? moment.end.format(formatStyle) : undefined}</span>
</td>
</tr>
<tr>
<td>
<DatetimePicker
label={fromLabel}
{...props}
isOpen={isOpen}
className="range-start-picker"
showTimePicker={showTimePicker}
moment={moment}
range
rangeAt="start"
onChange={this.handleChange}
/>
</td>
<td>
<DatetimePicker
label={toLabel}
{...props}
isOpen={isOpen}
className="range-end-picker"
showTimePicker={showTimePicker}
moment={moment}
range
rangeAt='end'
onChange={this.handleChange}
/>
</td>
</tr>
</tbody>
</table>
<div className="datetime-range-picker-item">
<DatetimePicker
shortcuts={shortcuts}
label={toLabel || endDateText}
{...props}
isOpen={isOpen}
className="range-end-picker"
showTimePicker={showTimePicker}
moment={moment}
range
rangeAt='end'
onChange={this.handleChange}
format={formatStyle}
minPanel="day"
/>
</div>
</div>
</div>
);
17 changes: 12 additions & 5 deletions src/less/picker.less
Original file line number Diff line number Diff line change
@@ -298,11 +298,18 @@
}

.datetime-range-picker {
border: 1px solid #dbdbdb;
background-color: #fff;
border-radius: 4px;
box-sizing: content-box;
z-index: 100;
position: relative;
display: inline-block;
}

.datetime-range-picker-panel {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
}

.datetime-range-picker-item {
display: inline-block;
}

.datetime-trigger {
10 changes: 8 additions & 2 deletions src/panels/Shortcuts.jsx
Original file line number Diff line number Diff line change
@@ -9,10 +9,16 @@ const isSameRange = (current, value) => {

class Shortcuts extends Component {
handleClick = (value, isCustom) => {
const {onChange, range} = this.props;
const {onChange, range, moment, rangeAt} = this.props;



if (range) {
onChange && onChange(value, isCustom);
let _value = { ...moment };

_value[rangeAt] = value;

onChange && onChange(_value, isCustom);
} else {
onChange && onChange(value, 'day');
}

0 comments on commit fb785b4

Please sign in to comment.