vant时间控件的使用「建议收藏」

vant时间控件的使用「建议收藏」<template><divclass=”shoukuan”><!–头部公共搜索框–><tabbartitle=”添加团队活动”></tabbar><divclass=”con”><van-cell-group><van-fi…

大家好,又见面了,我是你们的朋友全栈君。

在这里插入图片描述

<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>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/142577.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 云计算与边缘计算协同 九大应用场景

    云计算与边缘计算协同 九大应用场景来源:物联网报告中心前言2019年边缘计算备受产业关注,一度引起了资本市场的投资热潮,很多人把2019年称作边缘计算的元年。理性来看,造成如此火爆局势难免有…

  • 国产操作系统: 盘点8款国产Linux桌面操作系统[通俗易懂]

    国产操作系统: 盘点8款国产Linux桌面操作系统[通俗易懂]2014年4月8日起,美国微软公司停止了对WindowsXPSP3操作系统提供服务支持,这引起了社会和广大用户的广泛关注和对信息安全的担忧。在这种背景下,国家出于计算机安全考虑,加大了针对操作系统开发力度,各软件企业纷纷开发自主操作系统。国产操作系统多以Linux为基础二次开发,今天我们为大家盘点一下二零一八年值得用户使用的国产Linux桌面操作系统。1.深度操作系统…

  • sql调用存储过程exec用法_sqlserver存储过程执行日志

    sql调用存储过程exec用法_sqlserver存储过程执行日志一、【存储过程】存储过程的T-SQL语句编译以后可多次执行,由于T-SQL语句不需要重新编译,所以执行存储过程可以 提高性能。存储过程具有以下特点:• 存储过程已在服务器上存储• 存储过程具有安全特性• 存储过程允许模块化程序设计• 存储过程可以减少网络通信流量• 存储过程可以提高运行速度 存储过程分为用户存储过程、系统存储过程和扩展存储过程。存储过程Procedure是一组为了完成…

  • Windows 7定时关机命令

    Windows 7定时关机命令Windows7定时关机命令(很实用)  在 Win7中,shutdown实现自动关机的方法如下:   【方法一:计划任务法】   开始>>>在搜索框输入cmd>>>回车 >>>调出DOS窗口或直接Windows键+R,直接调出运行栏>>>输入

  • 机器学习总结(一):线性回归、岭回归、Lasso回归

    机器学习总结(一):线性回归、岭回归、Lasso回归线性回归作为一种回归分析技术,其分析的因变量属于连续型变量,如果因变量转变为离散型变量,将转换为分类问题。回归分析属于有监督学习问题,本博客将重点回顾标准线性回归知识点,并就线性回归中可能出现的问题进行简单探讨,引出线性回归的两个变种岭回归以及Lasso回归,最后通过sklearn库模拟整个回归过程。目录结构线性回归的一般形式线性回归中可能遇到的问题过拟合问题及其解决方法线性回归代码实现

  • C# ListView_winform数据库增删改查

    C# ListView_winform数据库增删改查C#winform中listview排序本文解决方案是采用下面链接中的解决方案。十分感谢这篇文章的作者bright:http://blog.163.com/shensc@126/blog/static/1312896522010614103538287/看到网上的许多解决方案(其实就是一种,只不过被转载和粘贴,所以没什么用。同时那么多的代码居然屌用没有(原谅我说脏话了)(

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号