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 相关文章推荐
asp批量修改记录的代码
Jun 25 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
AngularJS实现多级下拉框
Mar 25 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
VBScript版代码高亮
2006/06/26 Javascript
Prototype Class对象学习
2009/07/19 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
Python内置的字符串处理函数整理
2013/01/29 Python
python列表去重的二种方法
2014/02/14 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
Python3中详解fabfile的编写
2018/06/24 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
优秀学生党员先进事迹材料
2014/05/29 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
专家推荐信怎么写
2015/03/25 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
基于Python的EasyGUI学习实践
2021/05/07 Python
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
Python上下文管理器Content Manager
2021/06/26 Python