DatePicker 日期选择器

用于选择或输入日期。

TIP

有关 DatePicker 组件支持的浏览器列表，请参阅 MDN。

选择某一天

以“日”为基本单位，基础的日期选择控件。

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

vue

<!-- basic.vue -->
<template>
  <DatePicker label="Pick a day" v-model="date.value" @change="on_change"></DatePicker>
</template>

<script src="./basic_setup.py"></script>
<script setup>
import DatePicker from "../../../src/ipywui/components/DatePicker";
</script>

python

# ./basic_setup.py

from vuepy import ref


def setup(props, ctx, vm):
    date = ref(None)

    def on_change(event):
        print(event) # {'new': datetime.date(2025, 3, 22), 'old': None, 'owner': DatePicker(...)}

    return locals()

限制时间选择范围

可以限制时间选择范围。

通过 min 和 max 限制可选时间范围。

vue

<!-- basic-range.vue -->
<template>
  <Input :value="str(min_day) + ' to ' + str(max_day)"></Input>
  <DatePicker label="Pick a day"
              v-model="day.value"
              :min="min_day"
              :max="max_day"
  ></DatePicker>
</template>

<script src="./basic_range_setup.py"></script>
<script setup>
import DatePicker from "../../../src/ipywui/components/DatePicker";
import Input from "../../../src/ipywui/components/Input";
</script>

python

# ./basic_range_setup.py

import datetime

from vuepy import ref


def setup(props, ctx, vm):
    day = ref(None)

    min_day = datetime.date(2021, 1, 1)
    max_day = datetime.date(2024, 1, 1)

    return locals()

禁用状态

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

vue

<!-- disabled.vue -->
<template>
  <DatePicker label="Disabled" disabled></DatePicker>
</template>

<script setup>
import DatePicker from "../../../src/ipywui/components/DatePicker";
</script>

自定义样式

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

description-width：label的宽度。

vue

<!-- custom.vue -->
<template>
  <DatePicker label="Description-width 150px"
              style="description-width: 150px"
  ></DatePicker>

  <DatePicker label="Description-width 180px"
              style="description-width: 180px"
  ></DatePicker>
</template>

<script setup>
import DatePicker from "../../../src/ipywui/components/DatePicker";
</script>

DatePicker API

DatePicker 属性

属性名	说明	类型	默认值
v-model/value	绑定值	`datetime.date`	—
label	标签文字	`str`	—
min	允许选择的最小日期	`datetime.date`	—
max	允许选择的最大日期	`datetime.date`	—
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

Events

事件名	说明	类型
change	当绑定值变化时触发的事件	`Callable`

DatePicker 方法

属性名	说明	类型

src/examples/ipywui/component/date-picker

在 GitHub 上编辑此页

#header-mark# ​

DatePicker 日期选择器 ​

选择某一天 ​

限制时间选择范围 ​

禁用状态 ​

自定义样式 ​

DatePicker API ​

DatePicker 属性 ​

Events ​

DatePicker 方法 ​

#header-mark#