layui/example/docs/zh-CN/components/datePicker.md

::: anchor :::

::: title 基本介绍 :::

::: describe 高级 Web 日历组件，完全开源无偿且颜值与功能兼备，足以应对日期相关的各种业务场景。 :::

::: title 基础使用 :::

::: demo

选择的时间：{{endTime}} <script> import { ref } from 'vue' export default { setup() { const endTime = ref("2022-03-14 17:35:00"); return { endTime } } } </script>

:::

::: title 日期时间 :::

::: demo

选择的时间：{{endTime2}} <script> import { ref } from 'vue' export default { setup() { const endTime2 = ref("2022-03-04 17:35:00"); return { endTime2 } } } </script>

:::

::: title 禁止修改 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const endTime3 = ref("2022-03-04 17:35:00"); return { endTime3 } } } </script>

:::

::: title 年份选择 :::

::: demo

选择的时间：{{endTime3}} <script> import { ref } from 'vue' export default { setup() { const endTime3 = ref("2022-03-04 17:35:00"); return { endTime3 } } } </script>

:::

::: title 月份选择 :::

::: demo

选择的时间：{{endTime4}} <script> import { ref } from 'vue' export default { setup() { const endTime4 = ref("2022-03-04 17:35:00"); return { endTime4 } } } </script>

:::

::: title 时间选择 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const endTime5 = ref("2022-03-04 17:35:00"); return { endTime5 } } } </script>

:::

::: title 年月选择 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const endTime6 = ref("2022-03-04 17:35:00"); return { endTime6 } } } </script>

:::

::: title Date Picker 属性 :::

::: table

属性	描述	类型	默认值	可选值
v-model	当前时间	string	--	—
type	选择类型	string	date	date datetime year month time yearmonth
disabled	是否禁止修改	boolean	false	—

:::

::: previousNext transfer :::