vant时间控件使用方法详解


Posted in Javascript onDecember 24, 2020

本文实例为大家分享了vant时间控件的使用方法,供大家参考,具体内容如下

vant时间控件使用方法详解

代码:

<template>
 <div class="shoukuan">
  <!-- 头部公共搜索框 -->
  <tabbar title="添加团队活动"></tabbar>
  <div class="con">
   <van-cell-group>
    <van-field v-model="name" clearable label="活动名称" placeholder="请选择活动名称" />
    <van-field v-model="starttime" clearable label="开始时间" placeholder="请输入开始时间" @focus="start" />
    <van-field v-model="endtime" clearable label="结束时间" placeholder="请输入结束时间" @focus="end" />
   </van-cell-group>
   <van-cell-group>
    <van-field
     v-model="message"
     rows="2"
     autosize
     label="活动详情"
     type="textarea"
     maxlength="50"
     placeholder="请输入"
     show-word-limit
    />
   </van-cell-group>
  </div>
  <van-button type="primary" size="large" @click="add">确认添加</van-button>
  <!-- 开始时间控件 -->
  <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>
  <!-- 结束时间控件 -->
  <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: "", //活动名称
   message: "", //活动详情
   show: false, //开始时间弹窗
   show1: false, //结束时间弹窗
   minHour: 10,
   maxHour: 20,
   minDate: new Date(),
   maxDate: new Date(2020, 11, 31),
   currentDate: new Date(), //开始标准时间
   currentDate1: new Date(), //结束标准时间
   starttime: "", //开始时间
   starttime1: "", //开始时间时间戳
   endtime: "", //结束时间
   endtime1: "" //结束时间时间戳
  };
 },
 components: {
  tabbar
 },
 mounted() {},
 methods: {
  // 选择开始时间
  start() {
   this.show = true;
  },
  // 选择结束时间
  end() {
   this.show1 = true;
  },
  // 点击确定
  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;
  },
  // 点击取消
  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;
  },
  // 处理控件显示的时间格式
  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}时`;
   } else if (type === "minute") {
    return `${value}分`;
   }
   return value;
  },
  // 点击添加按钮
  add() {
   if (
    !this.name.trim() ||
    !this.starttime.trim() ||
    !this.starttime.trim() ||
    !this.message.trim()
   ) {
    this.$toast("请输入完整的活动信息");
   } 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("添加活动成功");
      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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 #Javascript
原生jQuery实现只显示年份下拉框
Dec 24 #jQuery
js制作提示框插件
Dec 24 #Javascript
vue+openlayers绘制省市边界线
Dec 24 #Vue.js
在HTML中使用JavaScript的两种方法
Dec 24 #Javascript
vue项目中openlayers绘制行政区划
Dec 24 #Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 #Vue.js
You might like
15种PHP Encoder的比较
2007/03/06 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
js定时器(执行一次、重复执行)
2014/03/07 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
Python 忽略warning的输出方法
2018/10/18 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
python和c语言的主要区别总结
2019/07/07 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
如何手工释放资源
2013/12/15 面试题
Ajax主要包含了哪些技术
2014/06/12 面试题
质量管理标语
2014/06/12 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
离婚案件上诉状
2015/05/23 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
Django程序的优化技巧
2021/04/29 Python
Golang 遍历二叉树
2022/04/19 Golang