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 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
浅谈JS的原型和继承
May 08 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
详解vue v-model
Aug 31 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
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
Python字符编码判断方法分析
2016/07/01 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
总经理办公室主任岗位职责
2013/11/12 职场文书
质检员的岗位职责
2013/11/15 职场文书
服务员岗位职责
2014/01/29 职场文书
政风行风建设整改方案
2014/10/27 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
领导欢送会主持词
2015/07/06 职场文书
学生会招新宣传语
2015/07/13 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python