- showOnlyTime, select time only

edwardfxiao · Sep 25, 2020 · d4587ed · d4587ed
1 parent f64a35d
commit d4587ed
Show file tree

Hide file tree

Showing 13 changed files with 64 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -64,6 +64,7 @@ import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';
   onClear={() => console.log('onClear')}
   style={{ width: '300px', margin: '0 auto' }}
   placeholder={['Start Time', 'End Time']}
+  showOnlyTime={false} // default is false, only select time
   ////////////////////
   // IMPORTANT DESC //
   ////////////////////
@@ -103,6 +104,8 @@ By providing ```window.REACT_MINIMAL_DATETIME_RANGE['customLocale']```, you can
                     date: 'Select date',
                     time: 'Select time',
                     confirm: 'Confirm',
+                    start: 'Start',
+                    end: 'End',
                 }
             }
         }

diff --git a/example/index.js b/example/index.js
@@ -130,6 +130,7 @@ import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';
               onConfirm={res => console.log(res)}
               onClose={() => console.log('closed')}
               style={{ width: '300px', margin: '0 auto' }}
+              // showOnlyTime={true} // default is false
             />
           </div>
         </div>
@@ -144,6 +145,7 @@ import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';
   show={false} // default is false
   disabled={false} // default is false
   allowPageClickToClose={true} // default is true
+  showOnlyTime={false} // default is false, only select time
   onConfirm={res => console.log(res)}
   onClose={() => console.log('onClose')}
   onClear={() => console.log('onClear')}

diff --git a/lib/components/RangeTime.js b/lib/components/RangeTime.js
@@ -41,14 +41,16 @@ var Index = (0, _react.memo)(function (_ref) {
       handleChooseEndTimeHour = _ref.handleChooseEndTimeHour,
       handleChooseEndTimeMinute = _ref.handleChooseEndTimeMinute,
       startTimePickedArray = _ref.startTimePickedArray,
-      endTimePickedArray = _ref.endTimePickedArray;
+      endTimePickedArray = _ref.endTimePickedArray,
+      showOnlyTime = _ref.showOnlyTime,
+      LOCALE_DATA = _ref.LOCALE_DATA;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "react-minimal-datetime-range__time-select-wrapper"
   }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "react-minimal-datetime-range__date"
-  }, startDatePickedArray.join('-')), /*#__PURE__*/_react["default"].createElement("div", {
+  }, showOnlyTime ? LOCALE_DATA['start'] : startDatePickedArray.join('-')), /*#__PURE__*/_react["default"].createElement("div", {
     className: "react-minimal-datetime-range__date"
-  }, endDatePickedArray.join('-'))), /*#__PURE__*/_react["default"].createElement("div", {
+  }, showOnlyTime ? LOCALE_DATA['end'] : endDatePickedArray.join('-'))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "react-minimal-datetime-range__time-select-options-wrapper"
   }, HOURS.map(function (i) {
     var item = (0, _const.formatDateString)(i);

diff --git a/lib/components/index.js b/lib/components/index.js
@@ -298,7 +298,9 @@ var RangePicker = (0, _react.memo)(function (_ref3) {
       _ref3$onClose = _ref3.onClose,
       onClose = _ref3$onClose === void 0 ? function () {} : _ref3$onClose,
       _ref3$style = _ref3.style,
-      style = _ref3$style === void 0 ? {} : _ref3$style;
+      style = _ref3$style === void 0 ? {} : _ref3$style,
+      _ref3$showOnlyTime = _ref3.showOnlyTime,
+      showOnlyTime = _ref3$showOnlyTime === void 0 ? false : _ref3$showOnlyTime;
   // ['YYYY-MM-DD', 'YYYY-MM-DD'] // ['hh:mm', 'hh:mm']
   var isDefaultDatesValid = (0, _utils.isValidDates)(defaultDates);
   var isInitialDatesValid = (0, _utils.isValidDates)(initialDates);
@@ -500,6 +502,12 @@ var RangePicker = (0, _react.memo)(function (_ref3) {
   var isEmpty = (0, _react.useMemo)(function () {
     return !start && !end;
   }, [start, end]);
+  var valueStart = (0, _react.useMemo)(function () {
+    return showOnlyTime ? start.split(' ')[1] : start;
+  }, [showOnlyTime, start]);
+  var valueEnd = (0, _react.useMemo)(function () {
+    return showOnlyTime ? end.split(' ')[1] : end;
+  }, [showOnlyTime, end]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "react-minimal-datetime-range__range",
     style: style
@@ -512,14 +520,14 @@ var RangePicker = (0, _react.memo)(function (_ref3) {
     readOnly: true,
     placeholder: placeholder[0],
     className: "react-minimal-datetime-range__range-input ".concat(disabled && 'disabled'),
-    value: start
+    value: valueStart
   }), /*#__PURE__*/_react["default"].createElement("span", {
     className: "react-minimal-datetime-range__range-input-separator"
   }, " ~ "), /*#__PURE__*/_react["default"].createElement("input", {
     readOnly: true,
     placeholder: placeholder[1],
     className: "react-minimal-datetime-range__range-input ".concat(disabled && 'disabled'),
-    value: end
+    value: valueEnd
   }), !isInitial && !isEmpty ? /*#__PURE__*/_react["default"].createElement("svg", {
     className: "react-minimal-datetime-range__clear ".concat(disabled && 'disabled'),
     width: "15",
@@ -568,7 +576,8 @@ var RangePicker = (0, _react.memo)(function (_ref3) {
     currentDateObjStart: currentDateObjStart,
     setCurrentDateObjStart: setCurrentDateObjStart,
     currentDateObjEnd: currentDateObjEnd,
-    setCurrentDateObjEnd: setCurrentDateObjEnd
+    setCurrentDateObjEnd: setCurrentDateObjEnd,
+    showOnlyTime: showOnlyTime
   })));
 });
 exports.RangePicker = RangePicker;
@@ -596,7 +605,8 @@ var RangePickerComponent = (0, _react.memo)(function (_ref6) {
       currentDateObjStart = _ref6.currentDateObjStart,
       setCurrentDateObjStart = _ref6.setCurrentDateObjStart,
       currentDateObjEnd = _ref6.currentDateObjEnd,
-      setCurrentDateObjEnd = _ref6.setCurrentDateObjEnd;
+      setCurrentDateObjEnd = _ref6.setCurrentDateObjEnd,
+      showOnlyTime = _ref6.showOnlyTime;
 
   var _useState31 = (0, _react.useState)(false),
       _useState32 = _slicedToArray(_useState31, 2),
@@ -652,7 +662,7 @@ var RangePickerComponent = (0, _react.memo)(function (_ref6) {
     setCurrentDateObjStart: setCurrentDateObjStart,
     currentDateObjEnd: currentDateObjEnd,
     setCurrentDateObjEnd: setCurrentDateObjEnd
-  }), type === TYPES[1] && /*#__PURE__*/_react["default"].createElement("div", {
+  }), (showOnlyTime || type === TYPES[1]) && /*#__PURE__*/_react["default"].createElement("div", {
     className: "react-minimal-datetime-range__time-piker"
   }, /*#__PURE__*/_react["default"].createElement(_RangeTime["default"], {
     defaultTimeStart: times[0],
@@ -664,10 +674,12 @@ var RangePickerComponent = (0, _react.memo)(function (_ref6) {
     handleChooseEndTimeHour: handleChooseEndTimeHour,
     handleChooseEndTimeMinute: handleChooseEndTimeMinute,
     startTimePickedArray: startTimePickedArray,
-    endTimePickedArray: endTimePickedArray
+    endTimePickedArray: endTimePickedArray,
+    showOnlyTime: showOnlyTime,
+    LOCALE_DATA: LOCALE_DATA
   }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "react-minimal-datetime-range__button-wrapper"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, !showOnlyTime && /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _utils.cx)('react-minimal-datetime-range__button', 'react-minimal-datetime-range__button--type', !selected && 'disabled'),
     onClick: selected ? handleOnChangeType : function () {}
   }, type === TYPES[0] ? LOCALE_DATA[TYPES[1]] : LOCALE_DATA[TYPES[0]]), /*#__PURE__*/_react["default"].createElement("div", {

diff --git a/lib/components/locale.js b/lib/components/locale.js
@@ -18,7 +18,9 @@ var locale = {
     months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
     date: 'Select date',
     time: 'Select time',
-    confirm: 'Confirm'
+    confirm: 'Confirm',
+    start: 'Start',
+    end: 'End'
   },
   'zh-cn': {
     today: '今天',
@@ -30,7 +32,9 @@ var locale = {
     months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
     date: '选择日期',
     time: '选择时间',
-    confirm: '确定'
+    confirm: '确定',
+    start: '开始',
+    end: '结束'
   }
 };
 

diff --git a/lib/react-minimal-datetime-range.js b/lib/react-minimal-datetime-range.js
diff --git a/lib/react-minimal-datetime-range.js.map b/lib/react-minimal-datetime-range.js.map
diff --git a/lib/react-minimal-datetime-range.min.js b/lib/react-minimal-datetime-range.min.js
diff --git a/lib/react-minimal-datetime-range.min.js.map b/lib/react-minimal-datetime-range.min.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-minimal-datetime-range",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "A react component for date time range picker.",
   "main": "index.js",
   "repository": {

diff --git a/src/js/component/RangeTime.js b/src/js/component/RangeTime.js
@@ -15,12 +15,14 @@ const Index = memo(
     handleChooseEndTimeMinute,
     startTimePickedArray,
     endTimePickedArray,
+    showOnlyTime,
+    LOCALE_DATA,
   }) => {
     return (
       <div className="react-minimal-datetime-range__time-select-wrapper">
         <div>
-          <div className="react-minimal-datetime-range__date">{startDatePickedArray.join('-')}</div>
-          <div className="react-minimal-datetime-range__date">{endDatePickedArray.join('-')}</div>
+          <div className="react-minimal-datetime-range__date">{showOnlyTime ? LOCALE_DATA['start'] : startDatePickedArray.join('-')}</div>
+          <div className="react-minimal-datetime-range__date">{showOnlyTime ? LOCALE_DATA['end'] : endDatePickedArray.join('-')}</div>
         </div>
         <div className="react-minimal-datetime-range__time-select-options-wrapper">
           {HOURS.map(i => {

diff --git a/src/js/component/index.js b/src/js/component/index.js
@@ -139,6 +139,7 @@ export const RangePicker = memo(
     onClear = () => {},
     onClose = () => {},
     style = {},
+    showOnlyTime = false,
   }) => {
     // ['YYYY-MM-DD', 'YYYY-MM-DD'] // ['hh:mm', 'hh:mm']
     const isDefaultDatesValid = isValidDates(defaultDates);
@@ -294,12 +295,14 @@ export const RangePicker = memo(
     );
     const isInitial = useMemo(() => start === `${initialDates[0]} ${initialTimes[0]}` && end === `${initialDates[1]} ${initialTimes[1]}`, [initialDates, initialTimes, start, end]);
     const isEmpty = useMemo(() => !start && !end, [start, end]);
+    const valueStart = useMemo(() => (showOnlyTime ? start.split(' ')[1] : start), [showOnlyTime, start]);
+    const valueEnd = useMemo(() => (showOnlyTime ? end.split(' ')[1] : end), [showOnlyTime, end]);
     return (
       <div className="react-minimal-datetime-range__range" style={style}>
         <span className={`react-minimal-datetime-range__range-input-wrapper ${disabled && 'disabled'}`} onClick={() => !disabled && setInternalShow(!internalShow)}>
-          <input readOnly={true} placeholder={placeholder[0]} className={`react-minimal-datetime-range__range-input ${disabled && 'disabled'}`} value={start} />
+          <input readOnly={true} placeholder={placeholder[0]} className={`react-minimal-datetime-range__range-input ${disabled && 'disabled'}`} value={valueStart} />
           <span className="react-minimal-datetime-range__range-input-separator"> ~ </span>
-          <input readOnly={true} placeholder={placeholder[1]} className={`react-minimal-datetime-range__range-input ${disabled && 'disabled'}`} value={end} />
+          <input readOnly={true} placeholder={placeholder[1]} className={`react-minimal-datetime-range__range-input ${disabled && 'disabled'}`} value={valueEnd} />
           {!isInitial && !isEmpty ? (
             <svg className={`react-minimal-datetime-range__clear ${disabled && 'disabled'}`} width="15" height="15" viewBox="0 0 24 24" onClick={handleOnClear}>
               <path
@@ -344,6 +347,7 @@ export const RangePicker = memo(
               setCurrentDateObjStart={setCurrentDateObjStart}
               currentDateObjEnd={currentDateObjEnd}
               setCurrentDateObjEnd={setCurrentDateObjEnd}
+              showOnlyTime={showOnlyTime}
             />
           )}
         </div>
@@ -378,6 +382,7 @@ const RangePickerComponent = memo(
     setCurrentDateObjStart,
     currentDateObjEnd,
     setCurrentDateObjEnd,
+    showOnlyTime,
   }) => {
     const [internalShow, setInternalShow] = useState(false);
     useEffect(() => {
@@ -425,7 +430,7 @@ const RangePickerComponent = memo(
             currentDateObjEnd={currentDateObjEnd}
             setCurrentDateObjEnd={setCurrentDateObjEnd}
           />
-          {type === TYPES[1] && (
+          {(showOnlyTime || type === TYPES[1]) && (
             <div className="react-minimal-datetime-range__time-piker">
               <RangeTime
                 defaultTimeStart={times[0]}
@@ -438,14 +443,18 @@ const RangePickerComponent = memo(
                 handleChooseEndTimeMinute={handleChooseEndTimeMinute}
                 startTimePickedArray={startTimePickedArray}
                 endTimePickedArray={endTimePickedArray}
+                showOnlyTime={showOnlyTime}
+                LOCALE_DATA={LOCALE_DATA}
               />
             </div>
           )}
         </div>
         <div className="react-minimal-datetime-range__button-wrapper">
-          <div className={cx('react-minimal-datetime-range__button', 'react-minimal-datetime-range__button--type', !selected && 'disabled')} onClick={selected ? handleOnChangeType : () => {}}>
-            {type === TYPES[0] ? LOCALE_DATA[TYPES[1]] : LOCALE_DATA[TYPES[0]]}
-          </div>
+          {!showOnlyTime && (
+            <div className={cx('react-minimal-datetime-range__button', 'react-minimal-datetime-range__button--type', !selected && 'disabled')} onClick={selected ? handleOnChangeType : () => {}}>
+              {type === TYPES[0] ? LOCALE_DATA[TYPES[1]] : LOCALE_DATA[TYPES[0]]}
+            </div>
+          )}
           <div className={cx('react-minimal-datetime-range__button', 'react-minimal-datetime-range__button--confirm', !selected && 'disabled')} onClick={selected ? handleOnConfirm : () => {}}>
             {LOCALE_DATA['confirm']}
           </div>

diff --git a/src/js/component/locale.js b/src/js/component/locale.js
@@ -10,6 +10,8 @@ let locale = {
     date: 'Select date',
     time: 'Select time',
     confirm: 'Confirm',
+    start: 'Start',
+    end: 'End',
   },
   'zh-cn': {
     today: '今天',
@@ -22,6 +24,8 @@ let locale = {
     date: '选择日期',
     time: '选择时间',
     confirm: '确定',
+    start: '开始',
+    end: '结束',
   },
 };