如何正確的使用vant時(shí)間控件

如何正確的使用vant時(shí)間控件？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

具體內(nèi)容如下

<template>
 <div class="shoukuan">
  <!-- 頭部公共搜索框 -->
  <tabbar title="添加團(tuán)隊(duì)活動(dòng)"></tabbar>
  <div class="con">
   <van-cell-group>
    <van-field v-model="name" clearable label="活動(dòng)名稱" placeholder="請(qǐng)選擇活動(dòng)名稱" />
    <van-field v-model="starttime" clearable label="開始時(shí)間" placeholder="請(qǐng)輸入開始時(shí)間" @focus="start" />
    <van-field v-model="endtime" clearable label="結(jié)束時(shí)間" placeholder="請(qǐng)輸入結(jié)束時(shí)間" @focus="end" />
   </van-cell-group>
   <van-cell-group>
    <van-field
     v-model="message"
     rows="2"
     autosize
     label="活動(dòng)詳情"
     type="textarea"
     maxlength="50"
     placeholder="請(qǐng)輸入"
     show-word-limit
    />
   </van-cell-group>
  </div>
  <van-button type="primary" size="large" @click="add">確認(rèn)添加</van-button>
  <!-- 開始時(shí)間控件 -->
  <van-popup v-model="show" position="bottom">
   <van-datetime-picker
    v-model="currentDate"
    type="datetime"
    :min-date="minDate"
    :max-date="maxDate"
    @confirm="confirm"
    @cancel="cancel"
    :formatter="formatter"
   />
  </van-popup>
  <!-- 結(jié)束時(shí)間控件 -->
  <van-popup v-model="show1" position="bottom">
   <van-datetime-picker
    v-model="currentDate1"
    type="datetime"
    :min-date="minDate"
    :max-date="maxDate"
    @confirm="confirm1"
    @cancel="cancel1"
    :formatter="formatter"
   />
  </van-popup>
 </div>
</template>
<script>
import tabbar from "../../components/navbar";
export default {
 data() {
  return {
   name: "", //活動(dòng)名稱
   message: "", //活動(dòng)詳情
   show: false, //開始時(shí)間彈窗
   show1: false, //結(jié)束時(shí)間彈窗
   minHour: 10,
   maxHour: 20,
   minDate: new Date(),
   maxDate: new Date(2020, 11, 31),
   currentDate: new Date(), //開始標(biāo)準(zhǔn)時(shí)間
   currentDate1: new Date(), //結(jié)束標(biāo)準(zhǔn)時(shí)間
   starttime: "", //開始時(shí)間
   starttime1: "", //開始時(shí)間時(shí)間戳
   endtime: "", //結(jié)束時(shí)間
   endtime1: "" //結(jié)束時(shí)間時(shí)間戳
  };
 },
 components: {
  tabbar
 },
 mounted() {},
 methods: {
  // 選擇開始時(shí)間
  start() {
   this.show = true;
  },
  // 選擇結(jié)束時(shí)間
  end() {
   this.show1 = true;
  },
  // 點(diǎn)擊確定
  confirm() {
   this.show = false;
   this.starttime =
    this.currentDate.getFullYear() +
    "年" +
    (Number(this.currentDate.getMonth()) + 1) +
    "月" +
    this.currentDate.getDate() +
    "日 " +
    this.currentDate.getHours() +
    ":" +
    this.currentDate.getMinutes();
   this.starttime1 = new Date(this.currentDate).getTime() / 1000;
  },
  // 點(diǎn)擊取消
  cancel() {
   this.show = false;
  },
  confirm1() {
   this.show1 = false;
   this.endtime =
    this.currentDate1.getFullYear() +
    "年" +
    (Number(this.currentDate1.getMonth()) + 1) +
    "月" +
    this.currentDate1.getDate() +
    "日 " +
    this.currentDate1.getHours() +
    ":" +
    this.currentDate1.getMinutes();
   this.endtime1 = new Date(this.currentDate1).getTime() / 1000;
  },
  cancel1() {
   this.show1 = false;
  },
  // 處理控件顯示的時(shí)間格式
  formatter(type, value) {
   // 格式化選擇器日期
   if (type === "year") {
    return `${value}年`;
   } else if (type === "month") {
    return `${value}月`;
   } else if (type === "day") {
    return `${value}日`;
   } else if (type === "hour") {
    return `${value}時(shí)`;
   } else if (type === "minute") {
    return `${value}分`;
   }
   return value;
  },
  // 點(diǎn)擊添加按鈕
  add() {
   if (
    !this.name.trim() ||
    !this.starttime.trim() ||
    !this.starttime.trim() ||
    !this.message.trim()
   ) {
    this.$toast("請(qǐng)輸入完整的活動(dòng)信息");
   } else {
    this.axios
     .post("/api/agent_team/addTeamActivity", {
      activity_name: this.name,
      activity_content: this.message,
      start_time: this.starttime1,
      end_time: this.endtime1
     })
     .then(data => {
      this.$toast("添加活動(dòng)成功");
      setTimeout(() => {
       this.$router.go(-1);
      }, 1000);
     });
   }
  }
 }
};
</script>

<style lang="less" scoped>
.shoukuan {
 padding-top: 44px;
 .van-button--large {
  width: 92%;
  margin-left: 4%;
  margin-top: 25%;
 }
}
</style>

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。