fix: missing status style for RangePicker (#34509)

* fix: range picker should has status style * chore: code clean * chore: code clean * chore: code clean
2025-06-07 01:13:58 +08:00 · 2022-03-15 18:38:22 +08:00 · 2022-03-15 18:38:22 +08:00 · ed651f450d
commit ed651f450d
parent 4f2b53ad26
11 changed files with 7069 additions and 32 deletions
--- a/components/date-picker/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/date-picker/tests/snapshots/demo-extend.test.ts.snap
--- a/components/date-picker/tests/snapshots/demo.test.js.snap
+++ b/components/date-picker/tests/snapshots/demo.test.js.snap
@ -3780,6 +3780,7 @@ exports[`renders ./components/date-picker/demo/status.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
+    style="margin-bottom:8px"
  >
    <div
      class="ant-picker ant-picker-status-warning"
@ -3822,6 +3823,179 @@ exports[`renders ./components/date-picker/demo/status.md correctly 1`] = `
      </div>
    </div>
  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-picker ant-picker-range ant-picker-status-error"
+      style="width:100%"
+    >
+      <div
+        class="ant-picker-input ant-picker-input-active"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Start date"
+          readonly=""
+          size="12"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-range-separator"
+      >
+        <span
+          aria-label="to"
+          class="ant-picker-separator"
+        >
+          <span
+            aria-label="swap-right"
+            class="anticon anticon-swap-right"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="swap-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="End date"
+          readonly=""
+          size="12"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-active-bar"
+        style="left:0;width:0;position:absolute"
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="calendar"
+          class="anticon anticon-calendar"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="calendar"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-picker ant-picker-range ant-picker-status-warning"
+      style="width:100%"
+    >
+      <div
+        class="ant-picker-input ant-picker-input-active"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Start date"
+          readonly=""
+          size="12"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-range-separator"
+      >
+        <span
+          aria-label="to"
+          class="ant-picker-separator"
+        >
+          <span
+            aria-label="swap-right"
+            class="anticon anticon-swap-right"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="swap-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="End date"
+          readonly=""
+          size="12"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-active-bar"
+        style="left:0;width:0;position:absolute"
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="calendar"
+          class="anticon anticon-calendar"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="calendar"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
 </div>
 `;

--- a/components/date-picker/demo/status.md
+++ b/components/date-picker/demo/status.md
@ -21,6 +21,8 @@ const Status: React.FC = () => (
  <Space direction="vertical" style={{ width: '100%' }}>
    <DatePicker status="error" style={{ width: '100%' }} />
    <DatePicker status="warning" style={{ width: '100%' }} />
+    <DatePicker.RangePicker status="error" style={{ width: '100%' }} />
+    <DatePicker.RangePicker status="warning" style={{ width: '100%' }} />
  </Space>
 );

--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@ -6,6 +6,7 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import SwapRightOutlined from '@ant-design/icons/SwapRightOutlined';
 import { RangePicker as RCRangePicker } from 'rc-picker';
 import { GenerateConfig } from 'rc-picker/lib/generate/index';
+import { PickerMode } from 'rc-picker/lib/interface';
 import enUS from '../locale/en_US';
 import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
 import SizeContext from '../../config-provider/SizeContext';
@ -13,6 +14,8 @@ import LocaleReceiver from '../../locale-provider/LocaleReceiver';
 import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
 import { RangePickerProps, PickerLocale, getTimeProps, Components } from '.';
 import { PickerComponentClass } from './interface';
+import { FormItemStatusContext } from '../../form/context';
+import { getFeedbackIcon, getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';

 export default function generateRangePicker<DateType>(
  generateConfig: GenerateConfig<DateType>,
@ -36,6 +39,23 @@ export default function generateRangePicker<DateType>(
      }
    };

+    renderFeedback = (prefixCls: string) => (
+      <FormItemStatusContext.Consumer>
+        {({ hasFeedback, status: contextStatus }) => {
+          const { status: customStatus } = this.props;
+          const status = getMergedStatus(contextStatus, customStatus);
+          return hasFeedback && getFeedbackIcon(prefixCls, status);
+        }}
+      </FormItemStatusContext.Consumer>
+    );
+
+    renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => (
+      <>
+        {mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
+        {this.renderFeedback(prefixCls)}
+      </>
+    );
+
    renderPicker = (contextLocale: PickerLocale) => {
      const locale = { ...contextLocale, ...this.props.locale };
      const { getPrefixCls, direction, getPopupContainer } = this.context;
@ -47,6 +67,7 @@ export default function generateRangePicker<DateType>(
        size: customizeSize,
        bordered = true,
        placeholder,
+        status: customStatus,
        ...restProps
      } = this.props;
      const { format, showTime, picker } = this.props as any;
@ -67,39 +88,48 @@ export default function generateRangePicker<DateType>(
            const mergedSize = customizeSize || size;

            return (
-              <RCRangePicker<DateType>
-                separator={
-                  <span aria-label="to" className={`${prefixCls}-separator`}>
-                    <SwapRightOutlined />
-                  </span>
-                }
-                ref={this.pickerRef}
-                dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
-                placeholder={getRangePlaceholder(picker, locale, placeholder)}
-                suffixIcon={picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
-                clearIcon={<CloseCircleFilled />}
-                prevIcon={<span className={`${prefixCls}-prev-icon`} />}
-                nextIcon={<span className={`${prefixCls}-next-icon`} />}
-                superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
-                superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
-                allowClear
-                transitionName={`${rootPrefixCls}-slide-up`}
-                {...restProps}
-                {...additionalOverrideProps}
-                className={classNames(
-                  {
-                    [`${prefixCls}-${mergedSize}`]: mergedSize,
-                    [`${prefixCls}-borderless`]: !bordered,
-                  },
-                  className,
+              <FormItemStatusContext.Consumer>
+                {({ hasFeedback, status: contextStatus }) => (
+                  <RCRangePicker<DateType>
+                    separator={
+                      <span aria-label="to" className={`${prefixCls}-separator`}>
+                        <SwapRightOutlined />
+                      </span>
+                    }
+                    ref={this.pickerRef}
+                    dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
+                    placeholder={getRangePlaceholder(picker, locale, placeholder)}
+                    suffixIcon={this.renderSuffix(prefixCls, picker)}
+                    clearIcon={<CloseCircleFilled />}
+                    prevIcon={<span className={`${prefixCls}-prev-icon`} />}
+                    nextIcon={<span className={`${prefixCls}-next-icon`} />}
+                    superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
+                    superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
+                    allowClear
+                    transitionName={`${rootPrefixCls}-slide-up`}
+                    {...restProps}
+                    {...additionalOverrideProps}
+                    className={classNames(
+                      {
+                        [`${prefixCls}-${mergedSize}`]: mergedSize,
+                        [`${prefixCls}-borderless`]: !bordered,
+                      },
+                      getStatusClassNames(
+                        prefixCls,
+                        getMergedStatus(contextStatus, customStatus),
+                        hasFeedback,
+                      ),
+                      className,
+                    )}
+                    locale={locale!.lang}
+                    prefixCls={prefixCls}
+                    getPopupContainer={customGetPopupContainer || getPopupContainer}
+                    generateConfig={generateConfig}
+                    components={Components}
+                    direction={direction}
+                  />
                )}
-                locale={locale!.lang}
-                prefixCls={prefixCls}
-                getPopupContainer={customGetPopupContainer || getPopupContainer}
-                generateConfig={generateConfig}
-                components={Components}
-                direction={direction}
-              />
+              </FormItemStatusContext.Consumer>
            );
          }}
        </SizeContext.Consumer>
--- a/components/date-picker/generatePicker/index.tsx
+++ b/components/date-picker/generatePicker/index.tsx
@ -18,6 +18,7 @@ import { TimePickerLocale } from '../../time-picker';
 import generateSinglePicker from './generateSinglePicker';
 import generateRangePicker from './generateRangePicker';
 import { tuple } from '../../_util/type';
+import { InputStatus } from '../../_util/statusUtils';

 export const Components = { button: PickerButton, rangeItem: PickerTag };

@ -81,6 +82,7 @@ type InjectDefaultProps<Props> = Omit<
  size?: SizeType;
  placement?: DataPickerPlacement;
  bordered?: boolean;
+  status?: InputStatus;
 };

 export type PickerLocale = {
--- a/components/form/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/form/tests/snapshots/demo-extend.test.ts.snap
--- a/components/form/tests/snapshots/demo.test.js.snap
+++ b/components/form/tests/snapshots/demo.test.js.snap
@ -7872,6 +7872,137 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
      </div>
    </div>
  </div>
+  <div
+    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
+  >
+    <div
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+    >
+      <label
+        class=""
+        title="Error"
+      >
+        Error
+      </label>
+    </div>
+    <div
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <div
+            class="ant-picker ant-picker-range ant-picker-status-error ant-picker-has-feedback"
+            style="width:100%"
+          >
+            <div
+              class="ant-picker-input ant-picker-input-active"
+            >
+              <input
+                autocomplete="off"
+                placeholder="Start date"
+                readonly=""
+                size="12"
+                value=""
+              />
+            </div>
+            <div
+              class="ant-picker-range-separator"
+            >
+              <span
+                aria-label="to"
+                class="ant-picker-separator"
+              >
+                <span
+                  aria-label="swap-right"
+                  class="anticon anticon-swap-right"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="swap-right"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="0 0 1024 1024"
+                    width="1em"
+                  >
+                    <path
+                      d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </div>
+            <div
+              class="ant-picker-input"
+            >
+              <input
+                autocomplete="off"
+                placeholder="End date"
+                readonly=""
+                size="12"
+                value=""
+              />
+            </div>
+            <div
+              class="ant-picker-active-bar"
+              style="left:0;width:0;position:absolute"
+            />
+            <span
+              class="ant-picker-suffix"
+            >
+              <span
+                aria-label="calendar"
+                class="anticon anticon-calendar"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="calendar"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+                  />
+                </svg>
+              </span>
+              <span
+                class="ant-picker-feedback-icon"
+              >
+                <span
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
  <div
    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
  >
--- a/components/form/demo/validate-static.md
+++ b/components/form/demo/validate-static.md
@ -96,6 +96,10 @@ ReactDOM.render(
      <TimePicker style={{ width: '100%' }} />
    </Form.Item>

+    <Form.Item label="Error" hasFeedback validateStatus="error">
+      <DatePicker.RangePicker style={{ width: '100%' }} />
+    </Form.Item>
+
    <Form.Item label="Error" hasFeedback validateStatus="error">
      <Select placeholder="I'm Select" allowClear>
        <Option value="1">Option 1</Option>
--- a/components/time-picker/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/time-picker/tests/snapshots/demo-extend.test.ts.snap
--- a/components/time-picker/tests/snapshots/demo.test.js.snap
+++ b/components/time-picker/tests/snapshots/demo.test.js.snap
@ -901,6 +901,7 @@ exports[`renders ./components/time-picker/demo/status.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
+    style="margin-bottom:8px"
  >
    <div
      class="ant-picker ant-picker-status-warning"
@ -945,6 +946,183 @@ exports[`renders ./components/time-picker/demo/status.md correctly 1`] = `
      </div>
    </div>
  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-picker ant-picker-range ant-picker-status-error"
+    >
+      <div
+        class="ant-picker-input ant-picker-input-active"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Start time"
+          readonly=""
+          size="10"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-range-separator"
+      >
+        <span
+          aria-label="to"
+          class="ant-picker-separator"
+        >
+          <span
+            aria-label="swap-right"
+            class="anticon anticon-swap-right"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="swap-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="End time"
+          readonly=""
+          size="10"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-active-bar"
+        style="left:0;width:0;position:absolute"
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="clock-circle"
+          class="anticon anticon-clock-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="clock-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-picker ant-picker-range ant-picker-status-warning"
+    >
+      <div
+        class="ant-picker-input ant-picker-input-active"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Start time"
+          readonly=""
+          size="10"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-range-separator"
+      >
+        <span
+          aria-label="to"
+          class="ant-picker-separator"
+        >
+          <span
+            aria-label="swap-right"
+            class="anticon anticon-swap-right"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="swap-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="End time"
+          readonly=""
+          size="10"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-active-bar"
+        style="left:0;width:0;position:absolute"
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="clock-circle"
+          class="anticon anticon-clock-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="clock-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
 </div>
 `;

--- a/components/time-picker/demo/status.md
+++ b/components/time-picker/demo/status.md
@ -21,6 +21,8 @@ const Status: React.FC = () => (
  <Space direction="vertical">
    <TimePicker status="error" />
    <TimePicker status="warning" />
+    <TimePicker.RangePicker status="error" />
+    <TimePicker.RangePicker status="warning" />
  </Space>
 );