diff --git a/packages/components/package.json b/packages/components/package.json
index 18fb79d0..4a54ef38 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -24,10 +24,12 @@
     "@tippyjs/react": "^4.2.5",
     "classnames": "^2.3.1",
     "clsx": "^1.1.1",
+    "dayjs": "^1.10.7",
     "rc-dialog": "^8.6.0",
     "rc-field-form": "^1.21.2",
     "rc-input-number": "^7.3.0",
     "rc-motion": "^2.4.4",
+    "rc-picker": "^2.5.18",
     "rc-select": "^12.1.13",
     "react-hot-toast": "^2.1.1",
     "react-textarea-autosize": "^8.3.2",
diff --git a/packages/components/src/ConfigProvider/LocaleProvider/types.ts b/packages/components/src/ConfigProvider/LocaleProvider/types.ts
index 88aac2f5..775e7268 100644
--- a/packages/components/src/ConfigProvider/LocaleProvider/types.ts
+++ b/packages/components/src/ConfigProvider/LocaleProvider/types.ts
@@ -1,5 +1,8 @@
 import { ModalLocale } from '../../Modal/locale';
+// eslint-disable-next-line import/no-cycle
+import { PickerLocale } from '../../DatePicker/generatePicker';
 
 export interface ILocale {
   Modal?: ModalLocale;
+  DatePicker?: PickerLocale;
 }
diff --git a/packages/components/src/ConfigProvider/locales/default.ts b/packages/components/src/ConfigProvider/locales/default.ts
index 94625eba..37aff7eb 100644
--- a/packages/components/src/ConfigProvider/locales/default.ts
+++ b/packages/components/src/ConfigProvider/locales/default.ts
@@ -1,4 +1,7 @@
+// eslint-disable-next-line import/no-cycle
 import { ILocale } from '../LocaleProvider/types';
+// eslint-disable-next-line import/no-cycle
+import PickerLocale from '../../DatePicker/locales/en_US';
 
 const localeValues: ILocale = {
   Modal: {
@@ -6,6 +9,7 @@ const localeValues: ILocale = {
     cancelText: 'Cancel',
     justOkText: 'OK',
   },
+  DatePicker: PickerLocale,
 };
 
 export default localeValues;
diff --git a/packages/components/src/DatePicker/DatePicker.story.tsx b/packages/components/src/DatePicker/DatePicker.story.tsx
new file mode 100644
index 00000000..edbcb6e7
--- /dev/null
+++ b/packages/components/src/DatePicker/DatePicker.story.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import DatePicker from './DatePicker';
+
+// const { MonthPicker } = DatePicker;
+
+export default {
+  title: 'Components/DatePicker',
+};
+
+export const Basic = () => <DatePicker />;
diff --git a/packages/components/src/DatePicker/DatePicker.tsx b/packages/components/src/DatePicker/DatePicker.tsx
new file mode 100644
index 00000000..f4692ec8
--- /dev/null
+++ b/packages/components/src/DatePicker/DatePicker.tsx
@@ -0,0 +1,18 @@
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/index.tsx
+import { Dayjs } from 'dayjs';
+import dayjsGenerateConfig from 'rc-picker/es/generate/dayjs';
+// eslint-disable-next-line import/no-cycle
+import generatePicker, {
+  PickerProps,
+  PickerDateProps,
+  RangePickerProps as BaseRangePickerProps,
+} from './generatePicker';
+
+export type DatePickerProps = PickerProps<Dayjs>;
+export type MonthPickerProps = Omit<PickerDateProps<Dayjs>, 'picker'>;
+export type WeekPickerProps = Omit<PickerDateProps<Dayjs>, 'picker'>;
+export type RangePickerProps = BaseRangePickerProps<Dayjs>;
+
+const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);
+
+export default DatePicker;
diff --git a/packages/components/src/DatePicker/PickerButton.tsx b/packages/components/src/DatePicker/PickerButton.tsx
new file mode 100644
index 00000000..734064ce
--- /dev/null
+++ b/packages/components/src/DatePicker/PickerButton.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Button, ButtonProps } from '../Button/Button';
+
+export default function PickerButton(props: ButtonProps) {
+  return <Button size="sm" {...props} />;
+}
diff --git a/packages/components/src/DatePicker/PickerTag.tsx b/packages/components/src/DatePicker/PickerTag.tsx
new file mode 100644
index 00000000..d964d536
--- /dev/null
+++ b/packages/components/src/DatePicker/PickerTag.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Tag, TagProps } from '../Tag/Tag';
+
+export default function PickerTag(props: TagProps) {
+  return <Tag {...props} />;
+}
diff --git a/packages/components/src/DatePicker/generatePicker/generateRangePicker.tsx b/packages/components/src/DatePicker/generatePicker/generateRangePicker.tsx
new file mode 100644
index 00000000..d3d852d0
--- /dev/null
+++ b/packages/components/src/DatePicker/generatePicker/generateRangePicker.tsx
@@ -0,0 +1,190 @@
+import React, { FC, useImperativeHandle, useRef } from 'react';
+import classNames from 'classnames';
+import Calendar from '@kubed/icons/dist/calendar';
+import Clock from '@kubed/icons/dist/clock';
+import Close from '@kubed/icons/dist/close';
+import Next from '@kubed/icons/dist/next';
+import { RangePicker as RCRangePicker } from 'rc-picker';
+import { GenerateConfig } from 'rc-picker/lib/generate';
+import { getRangePlaceholder } from '../util';
+import { RangePickerProps, getTimeProps, Components } from '.';
+// import { CommonPickerMethods } from './interface';
+import forwardRef from '../../utils/forwardRef';
+import { useLocales } from '../../ConfigProvider/LocaleProvider/LocaleContext';
+
+export default function generateRangePicker<DateType>(
+  generateConfig: GenerateConfig<DateType>
+): FC<RangePickerProps<DateType>> {
+  // class RangePicker2 extends React.Component<RangePickerProps<DateType>> {
+  //   static contextType = ConfigContext;
+  //
+  //   context: ConfigConsumerProps;
+  //
+  //   pickerRef = React.createRef<RCRangePicker<DateType>>();
+  //
+  //   focus = () => {
+  //     if (this.pickerRef.current) {
+  //       this.pickerRef.current.focus();
+  //     }
+  //   };
+  //
+  //   blur = () => {
+  //     if (this.pickerRef.current) {
+  //       this.pickerRef.current.blur();
+  //     }
+  //   };
+  //
+  //   renderPicker = (contextLocale: PickerLocale) => {
+  //     const locale = { ...contextLocale, ...this.props.locale };
+  //     const { getPrefixCls, direction, getPopupContainer } = this.context;
+  //     const {
+  //       prefixCls: customizePrefixCls,
+  //       getPopupContainer: customGetPopupContainer,
+  //       className,
+  //       size: customizeSize,
+  //       bordered = true,
+  //       placeholder,
+  //       ...restProps
+  //     } = this.props;
+  //     const { format, showTime, picker } = this.props as any;
+  //     const prefixCls = getPrefixCls('picker', customizePrefixCls);
+  //
+  //     let additionalOverrideProps: any = {};
+  //
+  //     additionalOverrideProps = {
+  //       ...additionalOverrideProps,
+  //       ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
+  //       ...(picker === 'time' ? getTimeProps({ format, ...this.props, picker }) : {}),
+  //     };
+  //     const rootPrefixCls = getPrefixCls();
+  //
+  //     return (
+  //       <SizeContext.Consumer>
+  //         {(size) => {
+  //           const mergedSize = customizeSize || size;
+  //
+  //           return (
+  //             <RCRangePicker<DateType>
+  //               separator={
+  //                 <span aria-label="to" className={`${prefixCls}-separator`}>
+  //                   <Next />
+  //                 </span>
+  //               }
+  //               ref={this.pickerRef}
+  //               placeholder={getRangePlaceholder(picker, locale, placeholder)}
+  //               suffixIcon={picker === 'time' ? <Clock /> : <Calendar />}
+  //               clearIcon={<Close />}
+  //               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
+  //               )}
+  //               locale={locale!.lang}
+  //               prefixCls={prefixCls}
+  //               getPopupContainer={customGetPopupContainer || getPopupContainer}
+  //               generateConfig={generateConfig}
+  //               components={Components}
+  //               direction={direction}
+  //             />
+  //           );
+  //         }}
+  //       </SizeContext.Consumer>
+  //     );
+  //   };
+  //
+  //   render() {
+  //     return (
+  //       <LocaleReceiver componentName="DatePicker" defaultLocale={enUS}>
+  //         {this.renderPicker}
+  //       </LocaleReceiver>
+  //     );
+  //   }
+  // }
+
+  const RangePicker = forwardRef<RangePickerProps<DateType>, any>((props, ref) => {
+    const {
+      prefixCls: customizePrefixCls,
+      getPopupContainer: customGetPopupContainer,
+      className,
+      size: customizeSize,
+      bordered = true,
+      placeholder,
+      ...restProps
+    } = props;
+    const { format, showTime, picker } = props as any;
+    const prefixCls = 'kubed-picker';
+    const rootPrefixCls = 'kubed-picker-root';
+
+    let additionalOverrideProps: any = {};
+
+    additionalOverrideProps = {
+      ...additionalOverrideProps,
+      ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
+      ...(picker === 'time' ? getTimeProps({ format, ...this.props, picker }) : {}),
+    };
+
+    const pickerRef = useRef<RCRangePicker<DateType>>();
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        if (pickerRef.current) {
+          pickerRef.current.focus();
+        }
+      },
+      blur: () => {
+        if (pickerRef.current) {
+          pickerRef.current.blur();
+        }
+      },
+    }));
+
+    const locale = useLocales();
+    const { DatePicker: locales } = locale;
+
+    return (
+      <RCRangePicker<DateType>
+        separator={
+          <span aria-label="to" className={`${prefixCls}-separator`}>
+            <Next />
+          </span>
+        }
+        ref={pickerRef}
+        placeholder={getRangePlaceholder(picker, locales, placeholder)}
+        suffixIcon={picker === 'time' ? <Clock /> : <Calendar />}
+        clearIcon={<Close />}
+        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
+        )}
+        locale={locales!.lang}
+        prefixCls={prefixCls}
+        // getPopupContainer={customGetPopupContainer || getPopupContainer}
+        generateConfig={generateConfig}
+        components={Components}
+        // direction={direction}
+      />
+    );
+  });
+
+  return RangePicker;
+}
diff --git a/packages/components/src/DatePicker/generatePicker/generateSinglePicker.tsx b/packages/components/src/DatePicker/generatePicker/generateSinglePicker.tsx
new file mode 100644
index 00000000..2d5ec769
--- /dev/null
+++ b/packages/components/src/DatePicker/generatePicker/generateSinglePicker.tsx
@@ -0,0 +1,129 @@
+import React, { FunctionComponent, useImperativeHandle, useRef } from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import Calendar from '@kubed/icons/dist/calendar';
+import Clock from '@kubed/icons/dist/clock';
+import Close from '@kubed/icons/dist/close';
+import RCPicker from 'rc-picker';
+import { PickerMode } from 'rc-picker/lib/interface';
+import { GenerateConfig } from 'rc-picker/lib/generate';
+import { getPlaceholder } from '../util';
+// eslint-disable-next-line import/no-cycle
+import { useLocales } from '../../ConfigProvider/LocaleProvider/LocaleContext';
+// eslint-disable-next-line import/no-cycle
+import { PickerProps, PickerDateProps, PickerTimeProps, getTimeProps, Components } from '.';
+import { CommonPickerMethods } from './interface';
+import forwardRef from '../../utils/forwardRef';
+
+// const getPopupContainer = (triggerNode) => triggerNode;
+
+const StyledPicker = styled(RCPicker)<typeof RCPicker>`
+  position: relative;
+`;
+
+export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
+  type DatePickerProps = PickerProps<DateType>;
+
+  function getPicker<InnerPickerProps extends DatePickerProps>(
+    picker?: PickerMode,
+    displayName?: string
+  ) {
+    const Picker = forwardRef<InnerPickerProps, any>((props, ref) => {
+      const prefixCls = 'kubed-picker';
+      const rootPrefixCls = 'kubed-picker-root';
+
+      const {
+        prefixCls: customizePrefixCls,
+        getPopupContainer: customizeGetPopupContainer,
+        className,
+        size: customizeSize,
+        bordered = true,
+        placeholder,
+        ...restProps
+      } = props;
+      const { format, showTime } = props as any;
+
+      const additionalProps = {
+        showToday: true,
+      };
+
+      let additionalOverrideProps: any = {};
+      if (picker) {
+        additionalOverrideProps.picker = picker;
+      }
+      const mergedPicker = picker || props.picker;
+
+      additionalOverrideProps = {
+        ...additionalOverrideProps,
+        ...(showTime ? getTimeProps({ format, picker: mergedPicker, ...showTime }) : {}),
+        ...(mergedPicker === 'time'
+          ? getTimeProps({ format, ...this.props, picker: mergedPicker })
+          : {}),
+      };
+
+      const locale = useLocales();
+      const { DatePicker: locales } = locale;
+
+      const pickerRef = useRef<CommonPickerMethods>();
+      useImperativeHandle(ref, () => ({
+        focus: () => {
+          if (pickerRef.current) {
+            pickerRef.current.focus();
+          }
+        },
+        blur: () => {
+          if (pickerRef.current) {
+            pickerRef.current.blur();
+          }
+        },
+      }));
+
+      return (
+        <StyledPicker
+          ref={pickerRef}
+          placeholder={getPlaceholder(mergedPicker, locales, placeholder)}
+          suffixIcon={mergedPicker === 'time' ? <Clock /> : <Calendar />}
+          clearIcon={<Close />}
+          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`}
+          {...additionalProps}
+          {...restProps}
+          {...additionalOverrideProps}
+          locale={locales!.lang}
+          className={classNames(
+            {
+              [`${prefixCls}-borderless`]: !bordered,
+            },
+            className
+          )}
+          prefixCls={prefixCls}
+          // getPopupContainer={customizeGetPopupContainer || getPopupContainer}
+          generateConfig={generateConfig}
+          components={Components}
+        />
+      );
+    });
+
+    if (displayName) {
+      Picker.displayName = displayName;
+    }
+
+    return Picker;
+  }
+
+  const DatePicker = getPicker<Omit<DatePickerProps, 'picker'>>();
+  const WeekPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('week', 'WeekPicker');
+  const MonthPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('month', 'MonthPicker');
+  const YearPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('year', 'YearPicker');
+  const TimePicker = getPicker<Omit<PickerTimeProps<DateType>, 'picker'>>('time', 'TimePicker');
+  const QuarterPicker = getPicker<Omit<PickerTimeProps<DateType>, 'picker'>>(
+    'quarter',
+    'QuarterPicker'
+  );
+
+  return { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker };
+}
diff --git a/packages/components/src/DatePicker/generatePicker/index.tsx b/packages/components/src/DatePicker/generatePicker/index.tsx
new file mode 100644
index 00000000..279a90a2
--- /dev/null
+++ b/packages/components/src/DatePicker/generatePicker/index.tsx
@@ -0,0 +1,153 @@
+import { GenerateConfig } from 'rc-picker/lib/generate';
+import {
+  PickerBaseProps as RCPickerBaseProps,
+  PickerDateProps as RCPickerDateProps,
+  PickerTimeProps as RCPickerTimeProps,
+} from 'rc-picker/lib/Picker';
+import { SharedTimeProps } from 'rc-picker/lib/panels/TimePanel';
+import {
+  RangePickerBaseProps as RCRangePickerBaseProps,
+  RangePickerDateProps as RCRangePickerDateProps,
+  RangePickerTimeProps as RCRangePickerTimeProps,
+} from 'rc-picker/lib/RangePicker';
+import { PickerMode, Locale as RcPickerLocale } from 'rc-picker/lib/interface';
+// eslint-disable-next-line import/no-cycle
+import { TimePickerLocale } from '../../TimePicker/TimePicker';
+import PickerButton from '../PickerButton';
+import PickerTag from '../PickerTag';
+import { KubedSizes } from '../../theme';
+// eslint-disable-next-line import/no-cycle
+import generateSinglePicker from './generateSinglePicker';
+// eslint-disable-next-line import/no-cycle
+import generateRangePicker from './generateRangePicker';
+
+export const Components = { button: PickerButton, rangeItem: PickerTag };
+
+function toArray<T>(list: T | T[]): T[] {
+  if (!list) {
+    return [];
+  }
+  return Array.isArray(list) ? list : [list];
+}
+
+export function getTimeProps<DateType>(
+  props: { format?: string; picker?: PickerMode } & SharedTimeProps<DateType>
+) {
+  const { format, picker, showHour, showMinute, showSecond, use12Hours } = props;
+
+  const firstFormat = toArray(format)[0];
+  const showTimeObj: SharedTimeProps<DateType> = { ...props };
+
+  if (firstFormat && typeof firstFormat === 'string') {
+    if (!firstFormat.includes('s') && showSecond === undefined) {
+      showTimeObj.showSecond = false;
+    }
+    if (!firstFormat.includes('m') && showMinute === undefined) {
+      showTimeObj.showMinute = false;
+    }
+    if (!firstFormat.includes('H') && !firstFormat.includes('h') && showHour === undefined) {
+      showTimeObj.showHour = false;
+    }
+
+    if ((firstFormat.includes('a') || firstFormat.includes('A')) && use12Hours === undefined) {
+      showTimeObj.use12Hours = true;
+    }
+  }
+
+  if (picker === 'time') {
+    return showTimeObj;
+  }
+
+  if (typeof firstFormat === 'function') {
+    // format of showTime should use default when format is custom format function
+    delete showTimeObj.format;
+  }
+
+  return {
+    showTime: showTimeObj,
+  };
+}
+
+type InjectDefaultProps<Props> = Omit<
+  Props,
+  'locale' | 'generateConfig' | 'hideHeader' | 'components'
+> & {
+  locale?: PickerLocale;
+  size?: KubedSizes;
+  bordered?: boolean;
+};
+
+export type PickerLocale = {
+  lang: RcPickerLocale & AdditionalPickerLocaleLangProps;
+  timePickerLocale: TimePickerLocale;
+} & AdditionalPickerLocaleProps;
+
+export type AdditionalPickerLocaleProps = {
+  dateFormat?: string;
+  dateTimeFormat?: string;
+  weekFormat?: string;
+  monthFormat?: string;
+};
+
+export type AdditionalPickerLocaleLangProps = {
+  placeholder: string;
+  yearPlaceholder?: string;
+  quarterPlaceholder?: string;
+  monthPlaceholder?: string;
+  weekPlaceholder?: string;
+  rangeYearPlaceholder?: [string, string];
+  rangeMonthPlaceholder?: [string, string];
+  rangeWeekPlaceholder?: [string, string];
+  rangePlaceholder?: [string, string];
+};
+
+// Picker Props
+export type PickerBaseProps<DateType> = InjectDefaultProps<RCPickerBaseProps<DateType>>;
+export type PickerDateProps<DateType> = InjectDefaultProps<RCPickerDateProps<DateType>>;
+export type PickerTimeProps<DateType> = InjectDefaultProps<RCPickerTimeProps<DateType>>;
+
+export type PickerProps<DateType> =
+  | PickerBaseProps<DateType>
+  | PickerDateProps<DateType>
+  | PickerTimeProps<DateType>;
+
+// Range Picker Props
+export type RangePickerBaseProps<DateType> = InjectDefaultProps<RCRangePickerBaseProps<DateType>>;
+export type RangePickerDateProps<DateType> = InjectDefaultProps<RCRangePickerDateProps<DateType>>;
+export type RangePickerTimeProps<DateType> = InjectDefaultProps<RCRangePickerTimeProps<DateType>>;
+
+export type RangePickerProps<DateType> =
+  | RangePickerBaseProps<DateType>
+  | RangePickerDateProps<DateType>
+  | RangePickerTimeProps<DateType>;
+
+function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
+  // =========================== Picker ===========================
+  const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker } =
+    generateSinglePicker(generateConfig);
+
+  // ======================== Range Picker ========================
+  const RangePicker = generateRangePicker(generateConfig);
+
+  // =========================== Export ===========================
+  type MergedDatePickerType = typeof DatePicker & {
+    WeekPicker: typeof WeekPicker;
+    MonthPicker: typeof MonthPicker;
+    YearPicker: typeof YearPicker;
+    RangePicker: typeof RangePicker;
+    TimePicker: typeof TimePicker;
+    QuarterPicker: typeof QuarterPicker;
+  };
+
+  const MergedDatePicker = DatePicker as MergedDatePickerType;
+  MergedDatePicker.WeekPicker = WeekPicker;
+  MergedDatePicker.MonthPicker = MonthPicker;
+  MergedDatePicker.YearPicker = YearPicker;
+  MergedDatePicker.RangePicker = RangePicker;
+  MergedDatePicker.TimePicker = TimePicker;
+  MergedDatePicker.QuarterPicker = QuarterPicker;
+
+  return MergedDatePicker;
+}
+
+export default generatePicker;
diff --git a/packages/components/src/DatePicker/generatePicker/interface.tsx b/packages/components/src/DatePicker/generatePicker/interface.tsx
new file mode 100644
index 00000000..6498f0cf
--- /dev/null
+++ b/packages/components/src/DatePicker/generatePicker/interface.tsx
@@ -0,0 +1,16 @@
+import { ComponentClass, FunctionComponent } from 'react';
+
+export interface CommonPickerMethods {
+  focus: () => void;
+  blur: () => void;
+}
+
+export interface PickerComponentClass<P = {}, S = unknown> extends ComponentClass<P, S> {
+  new (...args: ConstructorParameters<ComponentClass<P, S>>): InstanceType<ComponentClass<P, S>> &
+    CommonPickerMethods;
+}
+
+// export interface PickerComponentFunc<P = {}, S = unknown> extends FunctionComponent<P, S> {
+//   new (...args: ConstructorParameters<ComponentClass<P, S>>): InstanceType<ComponentClass<P, S>> &
+//     CommonPickerMethods;
+// }
diff --git a/packages/components/src/DatePicker/locales/en_US.tsx b/packages/components/src/DatePicker/locales/en_US.tsx
new file mode 100644
index 00000000..45491ec0
--- /dev/null
+++ b/packages/components/src/DatePicker/locales/en_US.tsx
@@ -0,0 +1,23 @@
+import CalendarLocale from 'rc-picker/lib/locale/en_US';
+import { PickerLocale } from '../generatePicker';
+import TimePickerLocale from '../../TimePicker/locales/en_US';
+
+const locale: PickerLocale = {
+  lang: {
+    placeholder: 'Select date',
+    yearPlaceholder: 'Select year',
+    quarterPlaceholder: 'Select quarter',
+    monthPlaceholder: 'Select month',
+    weekPlaceholder: 'Select week',
+    rangePlaceholder: ['Start date', 'End date'],
+    rangeYearPlaceholder: ['Start year', 'End year'],
+    rangeMonthPlaceholder: ['Start month', 'End month'],
+    rangeWeekPlaceholder: ['Start week', 'End week'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+};
+
+export default locale;
diff --git a/packages/components/src/DatePicker/util.ts b/packages/components/src/DatePicker/util.ts
new file mode 100644
index 00000000..d8ae14af
--- /dev/null
+++ b/packages/components/src/DatePicker/util.ts
@@ -0,0 +1,53 @@
+import { PickerMode } from 'rc-picker/lib/interface';
+import { PickerLocale } from './generatePicker';
+
+export function getPlaceholder(
+  picker: PickerMode | undefined,
+  locale: PickerLocale,
+  customizePlaceholder?: string
+): string {
+  if (customizePlaceholder !== undefined) {
+    return customizePlaceholder;
+  }
+
+  if (picker === 'year' && locale.lang.yearPlaceholder) {
+    return locale.lang.yearPlaceholder;
+  }
+  if (picker === 'quarter' && locale.lang.quarterPlaceholder) {
+    return locale.lang.quarterPlaceholder;
+  }
+  if (picker === 'month' && locale.lang.monthPlaceholder) {
+    return locale.lang.monthPlaceholder;
+  }
+  if (picker === 'week' && locale.lang.weekPlaceholder) {
+    return locale.lang.weekPlaceholder;
+  }
+  if (picker === 'time' && locale.timePickerLocale.placeholder) {
+    return locale!.timePickerLocale.placeholder;
+  }
+  return locale.lang.placeholder;
+}
+
+export function getRangePlaceholder(
+  picker: PickerMode | undefined,
+  locale: PickerLocale,
+  customizePlaceholder?: [string, string]
+) {
+  if (customizePlaceholder !== undefined) {
+    return customizePlaceholder;
+  }
+
+  if (picker === 'year' && locale.lang.yearPlaceholder) {
+    return locale.lang.rangeYearPlaceholder;
+  }
+  if (picker === 'month' && locale.lang.monthPlaceholder) {
+    return locale.lang.rangeMonthPlaceholder;
+  }
+  if (picker === 'week' && locale.lang.weekPlaceholder) {
+    return locale.lang.rangeWeekPlaceholder;
+  }
+  if (picker === 'time' && locale.timePickerLocale.placeholder) {
+    return locale!.timePickerLocale.rangePlaceholder;
+  }
+  return locale.lang.rangePlaceholder;
+}
diff --git a/packages/components/src/Modal/index.tsx b/packages/components/src/Modal/index.tsx
index 408239d9..871cd14d 100644
--- a/packages/components/src/Modal/index.tsx
+++ b/packages/components/src/Modal/index.tsx
@@ -1,4 +1,4 @@
 import Modal from './Modal';
-import { useModal, IModalContext } from './ModalProvider/ModalContext';
+import { useModal } from './ModalProvider/ModalContext';
 
-export { Modal, useModal, IModalContext };
+export { Modal, useModal };
diff --git a/packages/components/src/TimePicker/locales/en_US.tsx b/packages/components/src/TimePicker/locales/en_US.tsx
new file mode 100644
index 00000000..b13f40e2
--- /dev/null
+++ b/packages/components/src/TimePicker/locales/en_US.tsx
@@ -0,0 +1,8 @@
+import { TimePickerLocale } from '../TimePicker';
+
+const locale: TimePickerLocale = {
+  placeholder: 'Select time',
+  rangePlaceholder: ['Start time', 'End time'],
+};
+
+export default locale;
diff --git a/packages/components/src/TimePicker/locales/zh_CN.tsx b/packages/components/src/TimePicker/locales/zh_CN.tsx
new file mode 100644
index 00000000..b9e9ed32
--- /dev/null
+++ b/packages/components/src/TimePicker/locales/zh_CN.tsx
@@ -0,0 +1,8 @@
+import { TimePickerLocale } from '../TimePicker';
+
+const locale: TimePickerLocale = {
+  placeholder: '请选择时间',
+  rangePlaceholder: ['开始时间', '结束时间'],
+};
+
+export default locale;
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index fdb2c7d4..c0367249 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -25,7 +25,7 @@ export { Loading } from './Loading/Loading';
 export { Input } from './Input/Input';
 export { Form, FormItem, FormList, useForm } from './Form/Form';
 export { default as Select } from './Select/Select';
-export { Modal, useModal, IModalContext } from './Modal';
+export { Modal, useModal } from './Modal';
 export { CheckboxGroup, Checkbox } from './Checkbox/Checkbox';
 export { RadioGroup, Radio } from './Radio/Radio';
 export { Switch } from './Switch/Switch';
diff --git a/yarn.lock b/yarn.lock
index bbe7f6b6..f0bf64e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5412,6 +5412,16 @@ dataloader@^1.4.0:
   resolved "https://registry.yarnpkg.com/dataloader/-/dataloader-1.4.0.tgz#bca11d867f5d3f1b9ed9f737bd15970c65dff5c8"
   integrity sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==
 
+date-fns@2.x:
+  version "2.23.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.23.0.tgz#4e886c941659af0cf7b30fafdd1eaa37e88788a9"
+  integrity sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA==
+
+dayjs@1.x, dayjs@^1.10.7:
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
+  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
+
 dayjs@^1.10.5:
   version "1.10.6"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.6.tgz#288b2aa82f2d8418a6c9d4df5898c0737ad02a63"
@@ -9669,6 +9679,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+moment@^2.24.0:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 moo@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4"
@@ -11151,6 +11166,20 @@ rc-overflow@^1.0.0:
     rc-resize-observer "^1.0.0"
     rc-util "^5.5.1"
 
+rc-picker@^2.5.18:
+  version "2.5.18"
+  resolved "https://registry.yarnpkg.com/rc-picker/-/rc-picker-2.5.18.tgz#f84859815ef3f874ade689714a41151e709292c3"
+  integrity sha512-XyieTl8GOC5TeQFEvYbjx/Mtc0/CjruS7mKFT6Fy65FbGXmoFsWoWvIi+ylFx/BQHPGQi7a7vCNoZJ2TTqcZoA==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.1"
+    date-fns "2.x"
+    dayjs "1.x"
+    moment "^2.24.0"
+    rc-trigger "^5.0.4"
+    rc-util "^5.4.0"
+    shallowequal "^1.1.0"
+
 rc-resize-observer@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/rc-resize-observer/-/rc-resize-observer-1.0.1.tgz#ccd0986543ff1bf49f8a581e8ac4bb714ed24dcd"
@@ -11194,6 +11223,15 @@ rc-util@^5.0.0, rc-util@^5.0.7, rc-util@^5.2.1, rc-util@^5.3.0, rc-util@^5.5.0,
     react-is "^16.12.0"
     shallowequal "^1.1.0"
 
+rc-util@^5.4.0:
+  version "5.14.0"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.14.0.tgz#52c650e27570c2c47f7936c7d32eaec5212492a8"
+  integrity sha512-2vy6/Z1BJUcwLjm/UEJb/htjUTQPigITUIemCcFEo1fQevAumc9sA32x2z5qyWoa9uhrXbiAjSDpPIUqyg65sA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    react-is "^16.12.0"
+    shallowequal "^1.1.0"
+
 rc-virtual-list@^3.2.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-3.4.1.tgz#1f3b41391acf033a6c7e84c2f4e8a4ee0dc72807"