diff --git a/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue b/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue
new file mode 100644
index 00000000..72ed4a6b
--- /dev/null
+++ b/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue
@@ -0,0 +1,291 @@
+<template>
+  <el-date-picker
+    v-model="config.customize.value"
+    :picker-options="config.customize.pickerOptions"
+    type="datetimerange"
+    clearable
+    :class="['basic-component-date-picker', `date-picker-${config.code}`]"
+    :popper-class="'basic-component-date-picker date-picker-popper-' + config.code"
+    :value-format="config.customize.valueFormat"
+    @focus="focusEvent"
+    @change="changeValue"
+    @mouseenter.native="mouseenter"
+  />
+</template>
+
+<script>
+import cloneDeep from 'lodash/cloneDeep'
+import commonMixins from 'data-room-ui/js/mixins/commonMixins'
+import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+import { mapState } from 'vuex'
+window.dataSetFields = []
+export default {
+  name: 'BasicComponentSelect',
+  components: {},
+  mixins: [commonMixins, linkageMixins],
+  props: {
+    // 组件配置
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      value: '',
+      innerConfig: {}
+    }
+  },
+  computed: {
+    ...mapState({
+      chartList: state => state.bigScreen.pageInfo.chartList
+    }),
+    // placeholder () {
+
+    // },
+    isPreview () {
+      return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
+    }
+  },
+  watch: {
+    config: {
+      handler: function (val) {
+        if (val && val.customize && val.customize.formatType === 'custom') {
+          this.$nextTick(() => {
+            this.value = toString(this.value)
+          })
+        }
+      },
+      deep: true
+    }
+  },
+  created () { },
+  mounted () {
+    // if (!this.isPreview) {
+    //   document.querySelector(`.date-picker-${this.config.code}`).style.pointerEvents = 'none'
+    // }
+    this.changeStyle(this.config)
+  },
+  beforeDestroy () {
+  },
+  methods: {
+    dataFormatting (config, data) {
+      config.option.data = []
+      return config
+    },
+    changeStyle (config) {
+      config = { ...this.config, ...config }
+      // 样式改变时更新主题配置
+      config.theme = settingToTheme(cloneDeep(config), this.customTheme)
+      this.changeChartConfig(config)
+      this.innerConfig = config
+      // 时间选择器元素
+      const timePickerEl = document.querySelector(`.date-picker-${config.code}`)
+      timePickerEl.style.backgroundColor = config.customize.backgroundColor
+      // 时间选择器输入框元素
+      const timePickerInput = timePickerEl.querySelector('.el-input__inner')
+      if (timePickerInput) {
+        console.log(timePickerInput)
+        // 时间选择器输入框背景颜色
+        timePickerInput.style.backgroundColor = config.customize.backgroundColor
+        // 时间选择器输入框字体颜色
+        timePickerInput.style.color = config.customize.fontColor
+        // 时间选择器输入框字体大小
+        timePickerInput.style.fontSize = config.customize.fontSize + 'px'
+      }
+
+      // 时间范围选择器输入框元素
+      const timePickerRangeInput = timePickerEl.querySelectorAll('.el-range-input')
+      console.log(timePickerRangeInput)
+      timePickerRangeInput.forEach((el) => {
+        // 时间范围选择器输入框背景颜色
+        el.style.backgroundColor = config.customize.backgroundColor
+        // 时间范围选择器输入框字体颜色
+        el.style.color = config.customize.fontColor
+        // 时间范围选择器输入框字体大小
+        el.style.fontSize = config.customize.fontSize + 'px'
+      })
+      // 时间选择器图标
+      const timePickerCloseIcon = timePickerEl.querySelector('.el-input__icon')
+      if (timePickerCloseIcon) {
+        timePickerCloseIcon.style.fontSize = config.customize.fontSize + 'px'
+      }
+    },
+    // 组件联动
+    changeValue (val) {
+      this.linkage({ [this.config.code]: val })
+    },
+    focusEvent () {
+      this.$nextTick(() => {
+        const { code } = this.innerConfig
+        const { dropDownBackgroundColor, dropDownFontColor, dropDownHoverFontColor, dropDownHoverBackgroundColor, dropDownSelectedFontColor } = this.innerConfig.customize
+        const timePickerPopper = document.querySelector(`.date-picker-popper-${code}`)
+        if (timePickerPopper) {
+          // 去除边框
+          timePickerPopper.style.border = 'none'
+          // 确保下拉项的箭头颜色与下拉框的背景颜色保持一致
+          timePickerPopper.style.color = dropDownBackgroundColor
+        }
+        // 下拉项元素
+        const pickerDropdownPanleContent = document.querySelector(`.date-picker-popper-${code}`)
+        console.log(pickerDropdownPanleContent)
+        if (pickerDropdownPanleContent) {
+          // 文字颜色
+          pickerDropdownPanleContent.style.color = dropDownFontColor
+          // 背景颜色
+          pickerDropdownPanleContent.style.backgroundColor = dropDownBackgroundColor
+          // 下拉项添加var变量
+          pickerDropdownPanleContent.style.setProperty('--dropDownFontColor', dropDownFontColor)
+          pickerDropdownPanleContent.style.setProperty('--dropDownHoverFontColor', dropDownHoverFontColor)
+          pickerDropdownPanleContent.style.setProperty('--dropDownBackgroundColor', dropDownBackgroundColor)
+          pickerDropdownPanleContent.style.setProperty('--dropDownSelectedFontColor', dropDownSelectedFontColor)
+          pickerDropdownPanleContent.style.setProperty('--dropDownHoverBackgroundColor', dropDownHoverBackgroundColor)
+          // 选中项字体颜色
+          const selectedEl = pickerDropdownPanleContent.querySelector('.selected')
+          if (selectedEl) {
+            selectedEl.style.color = dropDownSelectedFontColor
+          }
+          // 选择过的，需要将选中颜色重置
+          const pickerItemEl = document.querySelectorAll(`.date-picker-popper-${code} .el-time-spinner__item`)
+          pickerItemEl.forEach((el) => {
+            el.style.color = dropDownFontColor
+          })
+        }
+      })
+    },
+    mouseenter () {
+      if (this.config.customize.value) {
+        setTimeout(() => {
+          // 清空图标
+          const timePickerCloseIcon = document.querySelector(`.date-picker-${this.innerConfig.code} .el-icon-circle-close`)
+          if (timePickerCloseIcon) {
+            timePickerCloseIcon.style.fontSize = this.innerConfig.customize.fontSize + 'px'
+          }
+        }, 25)
+      }
+    }
+  }
+
+}
+</script>
+
+<style lang="scss">
+.basic-component-date-picker {
+  color: '';
+
+  // 清空图标
+  .el-icon-circle-close {
+    width: 100% !important;
+    height: 100% !important;
+    display: flex !important;
+    align-items: center !important;
+  }
+  // 时间选择器
+  .el-icon-time{
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  // 选择日期 时间区域
+  .el-date-picker__time-header{
+    border-bottom:var(--dropDownBackgroundColor) !important;
+    .el-input__inner{
+      border: none !important;
+      // 添加一点阴影
+      box-shadow: 0 0 5px 0 rgba(0,0,0,0.1) !important;
+      background-color: red !important;
+    }
+    .el-time-panel{
+      border: none !important ;
+      background-color: var(--dropDownBackgroundColor) !important;
+    }
+  }
+  // 头部，修改文字颜色和图标颜色
+  .el-date-picker__header{
+    color: var(--dropDownFontColor) !important;
+    .el-date-picker__header-label{
+      color: var(--dropDownFontColor) !important;
+    }
+    // 左右箭头图标颜色
+    .el-picker-panel__icon-btn{
+      color: var(--dropDownFontColor) !important;
+    }
+  }
+  .el-picker-panel__content{
+    // 第一行tr 文字颜色
+  }
+  // 脚部
+  .el-picker-panel__footer{
+    background-color: var(--dropDownBackgroundColor) !important;
+  }
+
+  .el-time-spinner {
+    margin-bottom: 0px !important;
+
+    .el-time-spinner__item {
+      &:hover {
+        color: var(--dropDownHoverFontColor) !important;
+        background-color: var(--dropDownHoverBackgroundColor) !important;
+      }
+    }
+
+    .active {
+      color: var(--dropDownSelectedFontColor) !important;
+
+      &:hover {
+        color: var(--dropDownSelectedFontColor) !important;
+        background-color: transparent !important;
+      }
+    }
+  }
+
+  .popper__arrow {
+    bottom: -6px !important;
+    border-bottom-color: var(--dropDownBackgroundColor) !important;
+
+    &::after {
+      bottom: 0px !important;
+      border-bottom-color: var(--dropDownBackgroundColor) !important;
+    }
+  }
+
+  .cancel {
+    color: var(--dropDownFontColor) !important;
+  }
+
+  .confirm {
+    color: var(--dropDownSelectedFontColor);
+  }
+
+  .el-time-panel__footer {
+    border-top: 1px solid var(--dropDownFontColor) !important;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.basic-component-date-picker {
+  width: 100%;
+  height: 100%;
+  // 范围时间选择器连接符
+  ::v-deep .el-range-separator{
+    display: flex !important;
+    align-items: center !important;
+  }
+  .el-input--mini ::v-deep .el-input__inner {
+    height: 100% !important;
+    line-height: 100% !important;
+  }
+
+  .el-tag.el-tag--info {
+    color: var(--bs-el-text) !important;
+  }
+
+}
+
+::v-deep .el-input__inner {
+  height: 100% !important;
+  line-height: 100% !important;
+}
+</style>
diff --git a/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue b/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue
new file mode 100644
index 00000000..05959523
--- /dev/null
+++ b/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="100px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <div>
+        <slot name="top" />
+        <el-form
+          :model="config.customize"
+          label-position="left"
+          class="setting-body bs-el-form"
+          label-width="100px"
+        >
+          <SettingTitle>位置</SettingTitle>
+          <div class="lc-field-body">
+            <PosWhSetting :config="config" />
+          </div>
+          <SettingTitle>基础</SettingTitle>
+          <div class="lc-field-body">
+            <!-- 选择器背景颜色 -->
+            <el-form-item label="背景颜色">
+              <ColorPicker
+                v-model="config.customize.backgroundColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <!-- 字体大小 -->
+            <el-form-item label="字体大小">
+              <el-input-number
+                v-model="config.customize.fontSize"
+                class="bs-el-input-number"
+                :min="12"
+                :max="100"
+              />
+            </el-form-item>
+            <!-- 字体颜色 -->
+            <el-form-item label="字体颜色">
+              <ColorPicker
+                v-model="config.customize.fontColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+          </div>
+          <SettingTitle>下拉项</SettingTitle>
+          <!-- 选择器下拉框背景颜色 -->
+          <div class="lc-field-body">
+            <el-form-item label="背景颜色">
+              <ColorPicker
+                v-model="config.customize.dropDownBackgroundColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <el-form-item label="字体颜色">
+              <ColorPicker
+                v-model="config.customize.dropDownFontColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <!-- 下拉项悬浮背景颜色 -->
+            <el-form-item label="悬浮颜色">
+              <ColorPicker
+                v-model="config.customize.dropDownHoverBackgroundColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <!-- 下拉项悬浮字体颜色 -->
+            <el-form-item label="悬浮字体颜色">
+              <ColorPicker
+                v-model="config.customize.dropDownHoverFontColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <!-- 激活项文字颜色 -->
+            <el-form-item label="选中项文字颜色">
+              <ColorPicker
+                v-model="config.customize.dropDownSelectedFontColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+          </div>
+          <SettingTitle>时间格式</SettingTitle>
+          <div class="lc-field-body">
+            <el-form-item label="显示类型">
+              <el-select v-model="config.customize.type">
+                <el-option
+                  v-for="(type) in displayType"
+                  :key="type.value"
+                  :label="type.label"
+                  :value="type.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="时间格式化类型">
+              <el-select
+                v-model="config.customize.formatType"
+                class="bs-el-select"
+                popper-class="bs-el-select"
+                clearable
+                @change="selectFormatType"
+              >
+                <el-option
+                  v-for="(type) in formatTypeOptions"
+                  :key="type.value"
+                  :label="type.label"
+                  :value="type.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="config.customize.formatType === 'custom'"
+              label="自定义时间格式"
+            >
+              <div class="time-format-description">
+                <el-input
+                  v-model="config.customize.valueFormat"
+                  placeholder="例如：HH:mm:ss"
+                  clearable
+                />
+                <el-tooltip
+                  content="时间格式示例：HH表示小时（24小时制），mm表示分钟，ss表示秒"
+                  placement="top"
+                >
+                  <span
+                    class="el-icon-question"
+                    style="color:#9e9e9e"
+                  />
+                </el-tooltip>
+              </div>
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+export default {
+  name: 'Border14Setting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    SettingTitle
+  },
+  props: {
+    config: {
+      type: Object,
+      required: true
+    },
+    predefineThemeColors: {
+      type: Array,
+      default: () => {
+        return [
+          '#007aff',
+          '#1aa97b',
+          '#ff4d53',
+          '#1890FF',
+          '#DF0E1B',
+          '#0086CC',
+          '#2B74CF',
+          '#00BC9D',
+          '#ED7D32'
+        ]
+      }
+    }
+  },
+  data () {
+    return {
+      hour: 'HH',
+      minute: 'mm',
+      second: 'ss',
+      // 时间格式化类型选项
+      formatTypeOptions: [
+        { label: 'Date 对象', value: 'default' },
+        { label: '时间戳', value: 'timestamp' },
+        { label: '自定义', value: 'custom' }
+      ],
+      hourOptions: [
+        { label: '24小时制，不补0', value: 'H' },
+        { label: '24小时制，补0', value: 'HH' }
+      ],
+      minuteOptions: [
+        { label: '分钟，不补0', value: 'm' },
+        { label: '分钟，补0', value: 'mm' }
+      ],
+      secondOptions: [
+        { label: '秒，不补0', value: 's' },
+        { label: '秒，补0', value: 'ss' }
+      ]
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {
+    selectFormatType (type) {
+      if (type === 'default') {
+        this.config.customize.value = ''
+        this.config.customize.valueFormat = ''
+      } else if (type === 'timestamp') {
+        this.config.customize.value = 0
+        this.config.customize.valueFormat = 'timestamp'
+      } else if (type === 'custom') {
+        this.config.customize.valueFormat = 'HH:mm:ss'
+      }
+    }
+  }
+}
+</script>
+
+  <style lang="scss" scoped>
+  .lc-field-body {
+    width: 97%;
+    padding: 16px;
+  }
+  .time-format-description{
+    display: flex;
+    align-items: center;
+    .el-tooltip{
+      margin-left: 5px;
+    }
+  }
+  </style>
diff --git a/data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js b/data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js
new file mode 100644
index 00000000..c85ec70a
--- /dev/null
+++ b/data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js
@@ -0,0 +1,52 @@
+
+import { commonConfig, displayOption } from 'data-room-ui/js/config'
+
+export const settingConfig = {
+  // text内容
+  text: '时间选择器',
+  // 设置面板属性的显隐
+  displayOption: {
+    ...displayOption,
+    dataAllocation: { enable: true },
+    dataSourceType: { enable: false },
+    params: { enable: false }
+  }
+}
+
+const customConfig = {
+  type: 'dateTimePicker',
+  // 名称
+  title: '日期时间选择器',
+  root: {
+    version: '2023092101'
+  },
+  // 自定义属性
+  customize: {
+    value: '',
+    // 选择框背景颜色
+    backgroundColor: '#35393F',
+    // 选择框文字颜色
+    fontColor: '#FFFFFF',
+    // 选择框文字大小
+    fontSize: 20,
+    // 下拉框背景颜色
+    dropDownBackgroundColor: '#35393F',
+    // 下拉框字体颜色
+    dropDownFontColor: '#FFFFFF',
+    // 下拉项hover背景颜色 #6A7E9D
+    dropDownHoverBackgroundColor: 'red',
+    // 下拉项hover字体颜色
+    dropDownHoverFontColor: '#FFFFFF',
+    // 下拉项激活文字颜色 #409EFF
+    dropDownSelectedFontColor: 'yellow',
+    // 显示类型 year/month/date/week/ datetime/datetimerange/daterange
+    type: 'datetime',
+    // 时间格式化类型:Date 对象（default），时间戳（timestamp），自定义（custom）
+    formatType: 'default',
+    // 绑定值的格式
+    valueFormat: ''
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}
diff --git a/data-room-ui/packages/BasicComponents/TimePicker/index.vue b/data-room-ui/packages/BasicComponents/TimePicker/index.vue
index 523124ee..7760be4c 100644
--- a/data-room-ui/packages/BasicComponents/TimePicker/index.vue
+++ b/data-room-ui/packages/BasicComponents/TimePicker/index.vue
@@ -4,8 +4,8 @@
     :picker-options="config.customize.pickerOptions"
     placeholder="选择时间"
     clearable
-    :class="['basic-component-time-select', `time-picker-${config.code}`]"
-    :popper-class="'basic-component-time-select time-picker-popper-' + config.code"
+    :class="['basic-component-time-picker', `time-picker-${config.code}`]"
+    :popper-class="'basic-component-time-picker time-picker-popper-' + config.code"
     :value-format="config.customize.valueFormat"
     @focus="focusEvent"
     @change="changeValue"
@@ -65,13 +65,8 @@ export default {
       document.querySelector(`.time-picker-${this.config.code}`).style.pointerEvents = 'none'
     }
     this.changeStyle(this.config)
-    EventBus.$on('changeBusinessKey', () => {
-      window.dataSetFields = []
-    })
-  },
-  beforeDestroy () {
-    EventBus.$off('changeBusinessKey')
   },
+  beforeDestroy () { },
   methods: {
     dataFormatting (config, data) {
       // 数据返回成功则赋值
@@ -183,7 +178,7 @@ export default {
 </script>
 
 <style lang="scss">
-.basic-component-time-select {
+.basic-component-time-picker {
   color: '';
 
   // 清空图标
@@ -243,7 +238,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-.basic-component-time-select {
+.basic-component-time-picker {
   width: 100%;
   height: 100%;
 
diff --git a/data-room-ui/packages/js/config/basicComponentsConfig.js b/data-room-ui/packages/js/config/basicComponentsConfig.js
index d1474157..087c04c9 100644
--- a/data-room-ui/packages/js/config/basicComponentsConfig.js
+++ b/data-room-ui/packages/js/config/basicComponentsConfig.js
@@ -45,7 +45,7 @@ basicConfigList = basicConfigList.map((item) => {
 export function basicComponentsConfig (item) {
   return {
     ...item,
-    border:{type:'',titleHeight:60,fontSize:30,isTitle:true,padding:[0,0,0,0]},
+    border: { type: '', titleHeight: 60, fontSize: 30, isTitle: true, padding: [0, 0, 0, 0] },
     option: cloneDeep(setModules[item.type]),
     ...cloneDeep(dataModules[item.type])
   }
diff --git a/data-room-ui/packages/js/utils/getComponentConfig.js b/data-room-ui/packages/js/utils/getComponentConfig.js
index d014965e..4b4f7954 100644
--- a/data-room-ui/packages/js/utils/getComponentConfig.js
+++ b/data-room-ui/packages/js/utils/getComponentConfig.js
@@ -273,6 +273,18 @@ export default function getComponentConfig (type) {
         y: 0,
         type
       }
+    case 'dateTimePicker':
+      return {
+        name: '日期时间选择器',
+        title: '日期时间选择器',
+        icon: Icon.getNameList()[22],
+        className: 'com.gccloud.dataroom.core.module.chart.components.ScreenTimePickerChart',
+        w: 260,
+        h: 80,
+        x: 0,
+        y: 0,
+        type
+      }
     default:
       return {}
   }