diff --git a/assets/index.less b/assets/index.less index 88d6fff36..bbe41db19 100644 --- 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 index 83fbd167e..8acaae025 100644 --- a/examples/basic.tsx +++ b/examples/basic.tsx @@ -130,7 +130,7 @@ export default () => { {...sharedProps} locale={jaJP} mode="time" />
-

Time 121

+

Time AM/PM

{...sharedProps} locale={jaJP} @@ -138,6 +138,10 @@ export default () => { showTime={{ use12Hours: true }} />
+
+

Datetime

+ {...sharedProps} locale={zhCN} mode="datetime" /> +
); diff --git a/src/Picker.tsx b/src/Picker.tsx index cc6f1c992..0e27772cd 100644 --- a/src/Picker.tsx +++ b/src/Picker.tsx @@ -114,6 +114,29 @@ function Picker(props: PickerProps) { ); break; + case 'datetime': + panelNode = ( +
+ + {...pickerProps} + onSelect={date => { + setViewDate(date); + triggerSelect(date); + }} + /> + + {...pickerProps} + {...(typeof showTime === 'object' ? showTime : null)} + onSelect={date => { + onInternalPanelChange('date', date); + setViewDate(date); + triggerSelect(date); + }} + /> +
+ ); + break; + case 'time': delete pickerProps.showTime; panelNode = (