uniapp 小程序 picker 日期时间段选择（精确到年月日时分）
发布人：shili8
发布时间：2025-02-07 08:43
阅读次数：0
**日期时间段选择器**
在 UniApp 中，日期时间段选择是非常常见的需求。下面我们将介绍如何实现一个精确到年月日时分的日期时间段选择器。
###1. 安装依赖首先，我们需要安装 `@uni/choose-date` 这个插件，它提供了一个简单易用的日期选择器组件。
bashnpm install @uni/choose-date
###2. 导入组件在你的 UniApp项目中，导入 `@uni/choose-date` 这个模块。
javascriptimport chooseDate from '@uni/choose-date';
###3. 创建选择器组件创建一个新的 Vue 组件，例如 `date-picker.vue`。
html<template>
<view class="picker-container">
<text class="picker-title">请选择日期时间段</text>
<choose-date :start-date.sync="startDate"
:end-date.sync="endDate"
@confirm="onConfirm"
/>
</view>
</template>
<script>
export default {
data() {
return {
startDate: '',
endDate: ''
};
},
methods: {
onConfirm({ start, end }) {
this.startDate = start;
this.endDate = end;
}
}
};
</script>
<style scoped>
.picker-container {
padding:20px;
}
.picker-title {
font-size:16px;
color: #333;
}
</style>
###4. 使用选择器组件在你的页面中，使用 `date-picker` 组件。
html<template>
<view class="page">
<text class="page-description">请选择日期时间段</text>
<date-picker />
</view>
</template>
<script>
import datePicker from './date-picker.vue';
export default {
components: { datePicker }
};
</script>
###5. 获取选择结果在 `onConfirm` 方法中，获取选择的起始和结束日期时间。
javascriptonConfirm({ start, end }) {
this.startDate = start;
this.endDate = end;
}
###6. 使用选择结果使用选择的起始和结束日期时间做你想做的事情。
### 示例代码下面是完整的示例代码：
html<!-- date-picker.vue -->
<template>
<view class="picker-container">
<text class="picker-title">请选择日期时间段</text>
<choose-date :start-date.sync="startDate"
:end-date.sync="endDate"
@confirm="onConfirm"
/>
</view>
</template>
<script>
export default {
data() {
return {
startDate: '',
endDate: ''
};
},
methods: {
onConfirm({ start, end }) {
this.startDate = start;
this.endDate = end;
}
}
};
</script>
<style scoped>
.picker-container {
padding:20px;
}
.picker-title {
font-size:16px;
color: #333;
}
</style>
html<!-- index.vue -->
<template>
<view class="page">
<text class="page-description">请选择日期时间段</text>
<date-picker />
</view>
</template>
<script>
import datePicker from './date-picker.vue';
export default {
components: { datePicker }
};
</script>
### 结论通过以上步骤，我们成功地实现了一个精确到年月日时分的日期时间段选择器。这个选择器可以用于各种场景，例如选择订单有效期、预约时间等。
希望这篇文章对你有所帮助。如果你有任何问题或建议，请随时告诉我！
粤公网安备 44011102002787号