首页Uniapp:实现日期时间选择，要求格式为yyyy-MM-dd HH:mm

Uniapp:实现日期时间选择，要求格式为yyyy-MM-dd HH:mm

时间: 2025-06-08 17:31:39 浏览: 14

在UniApp中实现日期时间选择，并指定格式为`yyyy-MM-dd HH:mm`，可以利用内置组件`<picker>`来完成这个需求。下面是一个简单的示例代码段： ```html <template> <view>  <button @click="showPicker = true">选择日期时间</button>  <text v-if="selectedDateTime">您选择了：{{ selectedDateTime }}</text>  <picker mode="datetime" :value="dateTime" @change="bindDateChange" v-show="showPicker"> <view class="picker"> 请选择日期时间 </view> </picker> </view> </template> <script> export default { data() { return { showPicker: false, dateTime: '', // 存储用户选择的时间值 selectedDateTime: '' // 格式化后的最终显示结果 } }, methods: { bindDateChange(e) { this.showPicker = false; // 关闭选择器 const dateValue = e.detail.value; // 使用js原生函数将时间字符串转成想要的格式 let formattedTime = new Date(dateValue); let year = formattedTime.getFullYear(); let month = ("0"+(formattedTime.getMonth()+1)).slice(-2); // 获取月份并保证两位数 let day = ("0"+formattedTime.getDate()).slice(-2); // 获取日份并保证两位数 let hour = ("0"+formattedTime.getHours()).slice(-2); // 获取小时并保证两位数 let minute = ("0"+formattedTime.getMinutes()).slice(-2); // 获取分钟并保证两位数 this.selectedDateTime = `${year}-${month}-${day} ${hour}:${minute}`; } } } </script> ``` 本实例展示了如何结合Vue.js框架语法以及UniApp特有的<picker>组件，在移动应用内创建一个能够挑选特定格式(`yyyy-MM-dd HH:mm`)的日期时间控件。

阅读全文