datetime panel

react-component · Nov 20, 2019 · 57aa374 · 57aa374
1 parent aa88800
commit 57aa374
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 3 deletions.
diff --git a/assets/index.less b/assets/index.less
@@ -91,7 +91,7 @@
       margin: 0;
       padding: 0 0 180px 0;
       overflow-y: hidden;
-      width: 60px;
+      width: 50px;
 
       &:hover {
         overflow-y: auto;
@@ -103,7 +103,7 @@
 
         > button {
           color: #333;
-          padding: 0 0 0 16px;
+          padding: 0 0 0 12px;
           margin: 0;
           height: 20px;
           line-height: 20px;
@@ -118,4 +118,13 @@
       }
     }
   }
+
+  // ====================== Date Time =======================
+  &-datetime {
+    display: flex;
+
+    .@{prefix-cls}-time-panel {
+      border-left: 1px solid #999;
+    }
+  }
 }
diff --git a/examples/basic.tsx b/examples/basic.tsx
@@ -130,14 +130,18 @@ export default () => {
           <Picker<Moment> {...sharedProps} locale={jaJP} mode="time" />
         </div>
         <div style={{ margin: '0 8px' }}>
-          <h3>Time 121</h3>
+          <h3>Time AM/PM</h3>
           <Picker<Moment>
             {...sharedProps}
             locale={jaJP}
             mode="time"
             showTime={{ use12Hours: true }}
           />
         </div>
+        <div style={{ margin: '0 8px' }}>
+          <h3>Datetime</h3>
+          <Picker<Moment> {...sharedProps} locale={zhCN} mode="datetime" />
+        </div>
       </div>
     </div>
   );

diff --git a/src/Picker.tsx b/src/Picker.tsx
@@ -114,6 +114,29 @@ function Picker<DateType>(props: PickerProps<DateType>) {
       );
       break;
 
+    case 'datetime':
+      panelNode = (
+        <div className={`${prefixCls}-datetime`}>
+          <DatePanel<DateType>
+            {...pickerProps}
+            onSelect={date => {
+              setViewDate(date);
+              triggerSelect(date);
+            }}
+          />
+          <TimePanel<DateType>
+            {...pickerProps}
+            {...(typeof showTime === 'object' ? showTime : null)}
+            onSelect={date => {
+              onInternalPanelChange('date', date);
+              setViewDate(date);
+              triggerSelect(date);
+            }}
+          />
+        </div>
+      );
+      break;
+
     case 'time':
       delete pickerProps.showTime;
       panelNode = (