直接跳到内容

DataTimePicker 日期时间选择器

在同一个选择器里选择日期和时间

TIP

日期时间选择器来自日期选择器和时间选择器的组合。 关于属性的更详细解释,请参阅日期选择器和时间选择器。

::: top 有关 DateTimePicker 组件支持的浏览器列表,请参阅 MDN。对于不支持的浏览器,会尝试回退到单独的日期和时间输入。 :::

基本用法

在同一个选择器里同时进行日期和时间的选择。

v-model 的值为 datetime.datetime 类型。

限制时间选择范围

可以限制时间选择范围。

通过 minmax 限制可选时间范围。

禁用状态

你可以使用 disabled 属性来定义是否被禁用。
使用 disabled 属性来控制是否为禁用状态。该属性接受一个 bool 类型的值。

自定义样式

您可以自定义输入框样式。
使用 style 属性额外配置样式:

  • description-width:label的宽度。

DateTimePicker API

DateTimePicker 属性

属性名说明类型默认值
v-model/value绑定值datetime.datetime 
label标签文字str 
min允许选择的最小时间datetime.datetime 
max允许选择的最大时间datetime.datetime 
step时间选择器的步长float 
disabled按钮是否为禁用状态boolean false
style自定义css样式str -

TIP

style 支持的其它css属性

Sizes相关

  • height
  • width
  • max_height
  • max_width
  • min_height
  • min_width

Display相关

  • visibility
  • display
  • overflow

Box model相关

  • border
  • margin
  • padding

Positioning相关

  • top
  • left
  • bottom
  • right

DateTimePicker 方法

属性名说明类型

src/examples/ipywui/component/datetime-picker

DataTimePicker 日期时间选择器已经加载完毕