参考uniapp官方文档:https://ext.dcloud.net.cn/plugin?id=592
1、打开官方文档导入插件
2、在 templates中:
<view style="border: #D9D9D9 1px solid; border-radius: 10upx;width: 350upx; text-align: center;" @click="openDatetimePicker">{
{datetime}}</view>
<view class="line upPic" style="margin-left: 60upx;" @click="openDatetimePicker">选择</view>
<simple-datetime-picker ref="myPicker" @submit="handleSubmit":start-year="1900":end-year="2080" color="#007AFF"></simple-datetime-picker>
3、在 javascript 中:
import simpleDatetimePicker from "../../../components/buuug7-simple-datetime-picker/simple-datetime-picker";
export default {
components: {
simpleDatetimePicker
},
data() {
return {
datetime: ""
};
},
methods: {
// 打开picker
openDatetimePicker() {
this.$refs.myPicker.show();
},
// 关闭picker
closeDatetimePicker() {
this.$refs.myPicker.hide();
},
handleSubmit(e) {
console.log(e); // {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
this.completeDate.now = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
}
}
};
效果:
补充:官方只提供了年月日时分的格式,下面是加上了秒
demo下载地址:https://download.csdn.net/download/qq_45056953/18179387
如果有那么不对请多多指教