Datetime Picker 日期时间选择器

在同一选择器中选择日期与时间。

TIP

DateTimePicker 由 DatePicker 与 TimePicker 派生而来；属性细节可对照日期选择器与时间选择器。

日期与时间

将 type 设为 datetime 即可同时选择日期与时间；快捷项用法与日期选择器相同。

Default

With shortcuts

With default time

vue

<template>
  <div class="demo-datetime-picker">
    <div class="block">
      <span class="demonstration">Default</span>
      <u-date-picker
        v-model="value1"
        type="datetime"
        placeholder="Select date and time"
      />
    </div>
    <div class="block">
      <span class="demonstration">With shortcuts</span>
      <u-date-picker
        v-model="value2"
        type="datetime"
        placeholder="Select date and time"
        :shortcuts="shortcuts"
      />
    </div>
    <div class="block">
      <span class="demonstration">With default time</span>
      <u-date-picker
        v-model="value3"
        type="datetime"
        placeholder="Select date and time"
        :default-time="defaultTime"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 1)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 7)
      return date
    },
  },
]
</script>

<style scoped>
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--u-border-color);
  flex: 1;
  min-width: 300px;
}
.demo-datetime-picker .block:last-child {
  border-right: none;
}
.demo-datetime-picker .demonstration {
  display: block;
  color: var(--u-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .demo-datetime-picker .block {
    flex: 100%;
    border-right: none;
    border-bottom: solid 1px var(--u-border-color);
  }

  .demo-datetime-picker .block:last-child {
    border-bottom: none;
  }

  :deep(.u-date-editor.u-input) {
    width: 100%;
  }

  :deep(.u-date-editor.u-input__wrapper) {
    width: 100%;
    max-width: 300px;
  }
}
</style>

日期时间格式

使用 format 控制输入框展示格式，使用 value-format 控制绑定值格式。

默认接受并向外抛出 Date 对象。

Day.js 占位符列表见此处。

WARNING

注意大小写。

Emits Date object

Value:

Use value-format

Value：

Timestamp

Value：

vue

<template>
  <div class="demo-datetime-picker">
    <div class="block">
      <span class="demonstration">Emits Date object</span>
      <div class="demonstration">Value: {{ value1 }}</div>
      <u-date-picker
        v-model="value1"
        type="datetime"
        placeholder="Pick a Date"
        format="YYYY/MM/DD HH:mm:ss"
      />
    </div>
    <div class="block">
      <span class="demonstration">Use value-format</span>
      <div class="demonstration">Value：{{ value2 }}</div>
      <u-date-picker
        v-model="value2"
        type="datetime"
        placeholder="Pick a Date"
        format="YYYY/MM/DD hh:mm:ss"
        value-format="YYYY-MM-DD h:m:s a"
      />
    </div>
    <div class="block">
      <span class="demonstration">Timestamp</span>
      <div class="demonstration">Value：{{ value3 }}</div>
      <u-date-picker
        v-model="value3"
        type="datetime"
        placeholder="Pick a Date"
        format="YYYY/MM/DD hh:mm:ss"
        value-format="x"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
</script>

<style scoped>
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--u-border-color);
  flex: 1;
  min-width: 300px;
}
.demo-datetime-picker .block:last-child {
  border-right: none;
}
.demo-datetime-picker .demonstration {
  display: block;
  color: var(--u-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .demo-datetime-picker .block {
    flex: 100%;
    border-right: none;
    border-bottom: solid 1px var(--u-border-color);
  }

  .demo-datetime-picker .block:last-child {
    border-bottom: none;
  }

  :deep(.u-date-editor.u-input) {
    width: 100%;
  }

  :deep(.u-date-editor.u-input__wrapper) {
    width: 100%;
    max-width: 300px;
  }
}
</style>

面板内的日期时间格式

使用 date-format 与 time-format 控制下拉面板内输入区域的展示格式。

日期时间范围

将 type 设为 datetimerange 可选择日期时间范围。

Default

With shortcuts

vue

<template>
  <div class="demo-datetime-picker">
    <div class="block">
      <span class="demonstration">Default</span>
      <u-date-picker
        v-model="value1"
        type="datetimerange"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
      />
    </div>
    <div class="block">
      <span class="demonstration">With shortcuts</span>
      <u-date-picker
        v-model="value2"
        type="datetimerange"
        :shortcuts="shortcuts"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref<[Date, Date]>([
  new Date(2000, 10, 10, 10, 10),
  new Date(2000, 10, 11, 10, 10),
])
const value2 = ref('')

const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]
</script>

<style scoped>
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--u-border-color);
  flex: 1;
  min-width: 300px;
}

.block:last-child {
  border-right: none;
}

.block .demonstration {
  display: block;
  color: var(--u-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .block {
    flex: 100%;
    border-right: none;
    border-bottom: solid 1px var(--u-border-color);
  }

  .block:last-child {
    border-bottom: none;
  }

  :deep(.u-date-editor.u-input) {
    width: 100%;
  }

  :deep(.u-date-editor.u-input__wrapper) {
    width: 100%;
    max-width: 300px;
  }
}
</style>

范围选择的默认时间

在 datetimerange 下，起止日期默认时间为 00:00:00，可通过 default-time 修改。该属性为最多两个 Date 组成的数组：第一项对应开始日期的时间，第二项对应结束日期的时间。

Start and end date time 12:00:00

Start date time 12:00:00, end date time 08:00:00

自定义图标

可通过插槽自定义图标。

vue

<template>
  <div class="demo-datetime-picker-icon">
    <div class="block">
      <u-date-picker
        v-model="value1"
        type="datetime"
        placeholder="Pick a Date"
        format="YYYY-MM-DD HH:mm:ss"
        date-format="MMM DD, YYYY"
        time-format="HH:mm"
      >
        <template #prev-month>
          <u-icon><CaretLeft /></u-icon>
        </template>
        <template #next-month>
          <u-icon><CaretRight /></u-icon>
        </template>
        <template #prev-year>
          <u-icon>
            <svg
              viewBox="0 0 20 20"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g stroke-width="1" fill-rule="evenodd">
                <g fill="currentColor">
                  <path
                    d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
                  />
                </g>
              </g>
            </svg>
          </u-icon>
        </template>
        <template #next-year>
          <u-icon>
            <svg
              viewBox="0 0 20 20"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g stroke-width="1" fill-rule="evenodd">
                <g fill="currentColor">
                  <path
                    d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
                  />
                </g>
              </g>
            </svg>
          </u-icon>
        </template>
      </u-date-picker>
    </div>
    <div class="line" />
    <div class="block">
      <u-date-picker
        v-model="value2"
        type="datetimerange"
        start-placeholder="Start date"
        end-placeholder="End date"
        format="YYYY-MM-DD HH:mm:ss"
        date-format="YYYY/MM/DD ddd"
        time-format="A hh:mm:ss"
        unlink-panels
      >
        <template #prev-month>
          <u-icon><CaretLeft /></u-icon>
        </template>
        <template #next-month>
          <u-icon><CaretRight /></u-icon>
        </template>
        <template #prev-year>
          <u-icon>
            <svg
              viewBox="0 0 20 20"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g stroke-width="1" fill-rule="evenodd">
                <g fill="currentColor">
                  <path
                    d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
                  />
                </g>
              </g>
            </svg>
          </u-icon>
        </template>
        <template #next-year>
          <u-icon>
            <svg
              viewBox="0 0 20 20"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g stroke-width="1" fill-rule="evenodd">
                <g fill="currentColor">
                  <path
                    d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
                  />
                </g>
              </g>
            </svg>
          </u-icon>
        </template>
      </u-date-picker>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { CaretLeft, CaretRight } from '@uniboot/icons-vue'

const value1 = ref('')
const value2 = ref('')
</script>

<style scoped>
.demo-datetime-picker-icon {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}
.demo-datetime-picker-icon .block {
  padding: 30px 0;
  text-align: center;
  min-width: 300px;
  flex: 1;
}
.line {
  width: 1px;
  background-color: var(--u-border-color);
}

@media (max-width: 768px) {
  .demo-datetime-picker-icon .block {
    flex: 100%;
    border-bottom: solid 1px var(--u-border-color);
  }

  .demo-datetime-picker-icon .block:last-child {
    border-bottom: none;
  }

  .line {
    display: none;
  }

  :deep(.u-date-editor.u-input) {
    width: 100%;
  }

  :deep(.u-date-editor.u-input__wrapper) {
    width: 100%;
    max-width: 300px;
  }
}
</style>

API

属性

名称	说明	类型	默认值
model-value / v-model	绑定值；范围选择时为长度 2 的数组	`number` / `string` / `Date` / `array`	''
readonly	是否只读	`boolean`	false
disabled	是否禁用	`boolean`	false
editable	输入是否可编辑	`boolean`	true
clearable	是否显示清空按钮	`boolean`	true
size	输入框尺寸	`enum`	default
placeholder	非范围模式占位符	`string`	—
start-placeholder	范围模式开始占位符	`string`	—
end-placeholder	范围模式结束占位符	`string`	—
arrow-control	是否使用箭头按钮选择时间	`boolean`	false
type	选择器类型	`enum`	date
format	输入框展示格式	`string` 参见日期格式	YYYY-MM-DD HH:mm:ss
popper-class	下拉面板的自定义类名	`string`	—
popper-style	下拉面板的自定义样式	`string` / `object`	—
popper-options	Popper 配置，详见 popper.js	`object`	{}
fallback-placements	Tooltip 可能的位置列表	`array`	['bottom', 'top', 'right', 'left']
placement	下拉出现位置	`Placement`	bottom
range-separator	范围分隔符	`string`	'-'
default-value	可选，日历默认定位的日期	`object`	—
default-time	选中日期后的默认时间；未指定时为 `00:00:00`	`object`	—
value-format	可选，绑定值格式；未指定时为 `Date`	`string` 见 day.js 格式	—
date-format	可选，面板内日期展示格式	`string` 见 day.js 格式	YYYY-MM-DD
time-format	可选，面板内时间展示格式	`string` 见 day.js 格式	HH:mm:ss
id	同原生 `id`	`string` / `array`	—
name	同原生 `name`	`string`	—
unlink-panels	范围选择时是否解除左右面板联动	`boolean`	false
prefix-icon	自定义前缀图标组件	`string` / `Component`	Date
clear-icon	自定义清空图标组件	`string` / `Component`	CircleClose
shortcuts	快捷选项数组	`array`	—
disabled-date	判断某日是否禁用	`Function`	—
disabled-hours	返回不可选的小时数组	`Function`	—
disabled-minutes	返回不可选的分钟数组	`Function`	—
disabled-seconds	返回不可选的秒数组	`Function`	—
cell-class-name	单元格自定义类名	`Function`	—
teleported	是否将弹层挂载到 `body`	`boolean`	true
empty-values	视为空的取值，见 config-provider	`array`	—
value-on-clear	清空后的绑定值，见 config-provider	`string` / `number` / `boolean` / `Function`	—
show-now	是否显示「此刻」按钮	`boolean`	true
show-footer	类型为 `enum` 时是否显示底部栏	`boolean`	true
show-confirm	是否显示确认按钮	`boolean`	true
show-week-number	是否显示周数	`boolean`	false

事件

名称	说明	类型
change	用户确认或点击外部关闭时触发	`Function`
blur	输入框失焦时触发	`Function`
focus	输入框聚焦时触发	`Function`
clear	点击清空时触发	`Function`
calendar-change	日历所选日期变化，仅 `range` 模式	`Function`
panel-change	点击导航切换年月时触发	`Function`
visible-change	下拉显示/隐藏时触发	`Function`

插槽

名称	说明
default	自定义单元格内容
range-separator	自定义范围分隔符
prev-month	上一月图标
next-month	下一月图标
prev-year	上一年图标
next-year	下一年图标

暴露

方法	说明	类型
focus	聚焦组件	`Function`
blur	使组件失焦	`Function`

类型声明

展开类型声明

type Placement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'

Date Picker 日期选择器

Form 表单

Datetime Picker 日期时间选择器 ​

日期与时间 ​

日期时间格式 ​

面板内的日期时间格式 ​

日期时间范围 ​

范围选择的默认时间 ​

自定义图标 ​

API ​

属性 ​

事件 ​

插槽 ​

暴露 ​

类型声明 ​