瞬间搞定uni-app uview u-datetime-picker时间选择器日期时间默认当前时间

前端

2022-12-01 06:16:59

使用uni-app uview时间选择器打造个性化应用

时间选择器的应用场景

时间选择器是前端开发中一个必不可少的组件，它允许用户选择日期和时间，在各种场景中都非常实用，如：

预约管理：预约时间选择
活动策划：活动日期和时间设定
日程管理：记录事件和任务的时间

uni-app uview时间选择器

uni-app uview提供了强大的时间选择器组件u-datetime-picker，它提供了丰富的功能和灵活的配置选项。

基本使用

要使用时间选择器，只需引入组件并在模板中使用即可：

<template>
  <u-datetime-picker
    v-model="date"
    type="date"
  />
</template>

<script>
export default {
  data() {
    return {
      date: new Date()
    }
  }
}
</script>

自定义默认时间

默认情况下，时间选择器从当前时间开始。可以通过default-value属性设置默认时间：

<template>
  <u-datetime-picker
    v-model="date"
    type="date"
    :default-value="defaultDate"
  />
</template>

<script>
export default {
  data() {
    return {
      date: new Date(),
      defaultDate: '2023-05-01' // 默认日期
    }
  }
}
</script>

设置日期和时间范围

使用min-date和max-date属性可以限制可选择的日期和时间范围：

<template>
  <u-datetime-picker
    v-model="date"
    type="datetime"
    :min-date="minDate"
    :max-date="maxDate"
  />
</template>

<script>
export default {
  data() {
    return {
      date: new Date(),
      minDate: '2023-05-01', // 最小日期
      maxDate: '2023-06-30' // 最大日期
    }
  }
}
</script>