From fb785b4816827a4c97fbffa8664fde83e0ec3bbd Mon Sep 17 00:00:00 2001 From: Yohanson555 Date: Mon, 10 Aug 2020 12:53:01 +0300 Subject: [PATCH] DateTimeRangePicker update --- docs/app.jsx | 40 ++++++- docs/index.html | 227 ++++++++++++++++++++++++++------------- package.json | 2 +- src/Range.jsx | 114 +++++++------------- src/less/picker.less | 17 ++- src/panels/Shortcuts.jsx | 10 +- 6 files changed, 253 insertions(+), 157 deletions(-) diff --git a/docs/app.jsx b/docs/app.jsx index c2b777a..633a394 100644 --- a/docs/app.jsx +++ b/docs/app.jsx @@ -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 ( + + ); + } +} + render( , document.getElementById('inline-picker') @@ -87,3 +120,8 @@ render( document.getElementById('popup-picker') ); +render( + , + document.getElementById('range-picker') +); + diff --git a/docs/index.html b/docs/index.html index 317e795..3e3b7ea 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,16 +1,23 @@ + React Datetime Picker - + +

React Datetime Picker
- Star + Star

@@ -23,91 +30,160 @@

React Datetime Picker
  • dist/rc-datetime-picker.min.js
    • Usage
    +
    Inline Mode
    -
    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 (
-      <DatetimePicker
-        moment={this.state.moment}
-        onChange={this.handleChange}
-      />
-    );
-  }
-}
-
-render(
-  <App />,
-  document.getElementById('app')
-);
    + 
    +        
+          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 (
+                <DatetimePicker
+                  moment={this.state.moment}
+                  onChange={this.handleChange}
+                />
+              );
+            }
+          }
+
+          render(
+            <App />,
+            document.getElementById('app')
+          );
+        
+
    +
    Popup Mode
    +
    -
    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 (
-      <DatetimePickerTrigger
-        shortcuts={shortcuts} 
-        moment={this.state.moment}
-        onChange={this.handleChange}>
-        <input type="text" value={this.state.moment.format('YYYY-MM-DD HH:mm')} readOnly />
-      </DatetimePickerTrigger>
-    );
-  }
-}
-
-render(
-  <App />,
-  document.getElementById('app')
-);
    + 
    +        
+          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 (
+                <DatetimePickerTrigger
+                  shortcuts={shortcuts} 
+                  moment={this.state.moment}
+                  onChange={this.handleChange}>
+                  <input type="text" value={this.state.moment.format('YYYY-MM-DD HH:mm')} readOnly />
+                </DatetimePickerTrigger>
+              );
+            }
+          }
+
+          render(
+            <App />,
+            document.getElementById('app')
+          );
+        
+
    +
    + +
    Range Mode
    + +
    + 
    +        
+          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 (
+                <DatetimeRangePicker 
+                  fromLabel='From:'
+                  toLabel='To:'
+                  shortcuts={shortcuts}
+                  moment={datetime} 
+                  onChange={this.handleChange} 
+                  showTimePicker={true}
+                />
+              );
+            }
+          }
+
+          render(
+            <App />,
+            document.getElementById('app')
+          );
+        
+
    + +
    +
    +
    +

    @@ -115,4 +191,5 @@

    React Datetime Picker - + + \ No newline at end of file diff --git a/package.json b/package.json index 11e6e88..9d6e920 100644 --- a/package.json +++ b/package.json @@ -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": [ diff --git a/src/Range.jsx b/src/Range.jsx index 963ef9b..f903285 100644 --- a/src/Range.jsx +++ b/src/Range.jsx @@ -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 (
    -
    - {shortcuts - ? - : undefined - } -
    - +
    +
    +
    -
    -
    - - - - - - - - - - - -
    - {startDateText} - {moment && moment.start ? moment.start.format(formatStyle) : undefined} - - {endDateText} - {moment && moment.end ? moment.end.format(formatStyle) : undefined} -
    - - - -
    +
    + +
    ); diff --git a/src/less/picker.less b/src/less/picker.less index a6999c3..fa48569 100644 --- a/src/less/picker.less +++ b/src/less/picker.less @@ -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 { diff --git a/src/panels/Shortcuts.jsx b/src/panels/Shortcuts.jsx index d4c733c..fad8387 100644 --- a/src/panels/Shortcuts.jsx +++ b/src/panels/Shortcuts.jsx @@ -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'); }