uniapp制作日期时间选择控件

2022年6月22日 487次阅读 来源: 柯sky

参考uniapp官方文档：https://ext.dcloud.net.cn/plugin?id=592

 

1、打开官方文档导入插件

《uniapp制作日期时间选择控件》

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}`;
      }
   }
};

 效果：

《uniapp制作日期时间选择控件》《uniapp制作日期时间选择控件》

补充：官方只提供了年月日时分的格式，下面是加上了秒

demo下载地址：https://download.csdn.net/download/qq_45056953/18179387

如果有那么不对请多多指教

 

 

    原文作者：柯sky
    原文地址: https://blog.csdn.net/qq_45056953/article/details/116031027
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞