根据不同日期对应不同时间的数据设置

已于 2022-06-30 21:15:34 修改
阅读量236 收藏 1
点赞数
文章标签： vue.js 前端 elementui javascript
于 2022-06-27 23:25:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52933282/article/details/125493821
版权

项目场景：

 

比如说，老师的课程安排每一天的工作时间是不一样的。

周一10点到11点，14点到15点；周二9点到10点，15点到16点。

周二的时间点又不一样。那怎么处理呢？

我采用tag标签让用户自定义选择

主要代码如下：

<template>
  <div>
    我是首页
    <el-button type="primary" @click="outerVisible = true"
      >添加教师，值班时间和地点</el-button
    >

    <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="时间">
          <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>

          <el-button class="button-new-tag" size="small" @click="gettime"
            >+ 添加值班时间</el-button
          >
        </el-form-item>
      </el-form>

      <el-dialog
        width="80%"
        title="请选择时间"
        :visible.sync="innerVisible"
        append-to-body
      >
        请选择日期:
        <el-select v-model="form.days" multiple placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
        ><br /><br />
        请选择时间:
        <el-time-picker
          is-range
          v-model="form.time"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        >
        </el-time-picker>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="addTime">添加</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      outerVisible: false,
      innerVisible: false,
      form: {},
      dynamicTags: [],

      // 星期下拉选项
      options: [
        {
          value: "1",
          label: "星期一",
        },
        {
          value: "2",
          label: "星期二",
        },
        {
          value: "3",
          label: "星期三",
        },
        {
          value: "4",
          label: "星期四",
        },
        {
          value: "5",
          label: "星期五",
        },
      ],
    };
  },
  methods: {
    onSubmit() {
      console.log("提交的数据样子", this.dynamicTags);
    },
    // 获取时间
    gettime() {
      console.log("我要添加时间了");
      this.innerVisible = true;
    },
    // 添加时间
    addTime() {
      this.form.days.forEach((item) => {
        let times = "";
        this.form.time.forEach((val) => {
          let hh = val.getHours(); //时
          let mm = val.getMinutes(); //分
          times += `~${hh}:${mm}`;
        });
        let beforPush = `${this.changeWeek(item)} ${times.substring(1)}`;
        // 判断用户是否重复添加数据（去重操作）
        let isOk = this.dynamicTags.every((ishas) => {
          //console.log(ishas, beforPush);
          return ishas != beforPush;
        });
        // 如果没用重复的则添加
        if (isOk) {
          this.dynamicTags.push(beforPush);
        }
      });

      this.innerVisible = false;
    },
    // 将value对应返回星期几
    changeWeek(data) {
      let arr = ["星期一", "星期二", "星期三", "星期四", "星期五"];
      return `${arr[data - 1]}`;
    },
    // 删除时间
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
  },
};
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>

效果：

最终得到的数据:

 

配合其他表单：

<template>
  <div>
    我是首页
    <el-button type="primary" @click="outerVisible = true"
      >添加教师，值班时间和地点</el-button
    >

    <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker
              placeholder="选择时间"
              v-model="form.date2"
              style="width: 100%"
            ></el-time-picker>
          </el-col>
        </el-form-item> -->
        <el-form-item label="时间">
          <!--  ******* -->
          <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>

          <el-button class="button-new-tag" size="small" @click="gettime"
            >+ 添加值班时间</el-button
          >
        </el-form-item>
        <el-form-item label="即时配送">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源">
          <el-radio-group v-model="form.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

      <el-dialog
        width="80%"
        title="请选择时间"
        :visible.sync="innerVisible"
        append-to-body
      >
        请选择日期:
        <el-select v-model="form.days" multiple placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
        ><br /><br />
        请选择时间:
        <el-time-picker
          is-range
          v-model="form.time"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        >
        </el-time-picker>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="addTime">添加</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      outerVisible: false,
      innerVisible: false,
      form: {
        name: "",
        region: "",
        days: [],
        time: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      dynamicTags: ["标签一", "标签二", "标签三"],

      // 星期下拉选项
      options: [
        {
          value: "1",
          label: "星期一",
        },
        {
          value: "2",
          label: "星期二",
        },
        {
          value: "3",
          label: "星期三",
        },
        {
          value: "4",
          label: "星期四",
        },
        {
          value: "5",
          label: "星期五",
        },
      ],
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    // 获取时间
    gettime() {
      console.log("进入了");
      this.innerVisible = true;
    },
    // 添加时间
    addTime() {
      console.log("日期", this.form.days);
      console.log("时间", this.form.time);

      this.form.days.forEach((item) => {
        let times = "";
        this.form.time.forEach((val) => {
          let hh = val.getHours(); //时
          let mm = val.getMinutes(); //分
          times += `~${hh}:${mm}`;
        });
        let beforPush = `${this.changeWeek(item)} ${times.substring(1)}`;
        let isOk = this.dynamicTags.every((ishas) => {
          console.log(ishas, beforPush);
          return ishas != beforPush;
        });
        console.log(isOk);
        if (isOk) {
          this.dynamicTags.push(beforPush);
        }
      });

      this.innerVisible = false;
    },
    changeWeek(data) {
      let arr = ["星期一", "星期二", "星期三", "星期四", "星期五"];
      return `${arr[data - 1]}`;
    },
    // 删除时间
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
  },
};
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>

小白入道
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
有关日期参数匹配数据库数据的方法
GUOPENGJU的博客
11-15 1644
应用场景： 从前台传来一个时间段：开始日期 start （如2012-11-05） ， 结束时间  end（如2012-11-15）， 从数据库查询 从日期  start  到 日期end 之间所有符合条件的数据集合，返回一个  List 对象例如：/** * 返回指定 观测站某时间段内每天8时的水位集合 */ @Override public List getDataByStartA
根据不同的时间日期查询数据
锋子
07-26 1535
根据不同的时间段（日，周，月）获取数据
季度选择控件element-ui+vue组件
热门推荐
cmy0816的博客
06-04 2万+
季度选择器其实是很经常用到的控件，elementui里面居然没有，情急之下利用elementui里面的其他组件做了个类似的组件，需要自取~ <template> <el-form-item label="日期"> <mark style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(...
解决不同按日期展示对应时期数据的问题
weixin_41880919的博客
01-26 1125
很多猴儿们都遇到过这样的需求： 1、公司一年的业务数据，要根据月份统计显示出来 2、可以根据时间筛选，展示不同的数据 3、算了，第三就不说了 今天，我就跟大家聊聊我的开发思路吧 首先，你得知道你的数据结构里面有没有时间列，如果没有，你可以走了，如果有，请跟着一起走下去 1、设计页面格式 我也不知道你们怎么设计页面的，反正我是这样的 原因很简单，他要的是根据时间展示数据，这样展示，简单明了，但是，...
利用element日期组件，封装季度组件， 实现日、周、月、季度切换，默认禁用部分日期选择（附带：获取昨日、昨日所在周、昨日所在月、昨日所在季度等方法）
CuiCui_web的博客
01-21 4751
1、 季度组件封装，创建一个 quarterDate.vue文件 <!-- 季度组件 --> <template> <div> <el-popover placement="bottom" width="270" trigger="click"> <div class="el-date-picker__header"> <button
vs c++ 日志打印控件_Excel教程：日志管理不要慌，Excel套表帮你忙
weixin_39821035的博客
11-30 179
520因爱而购，为爱放价特推超级会员限时疯狂抢购点击了解支持微信公众号+小程序+APP+PC网站多平台学习雨夜被领导安排的事情，越来越多，经常性的一会忙这个一会忙那个，结果什么都没做好领导很生气，雨夜就很难过大鹅看了太不忍心了，我们帮帮她，就用Excel给她定制一个套表，专门管理她的工作先看看我们完成的效果：1， 根据年份和日期，自动变化日历2， 动态把不是本月的日期，变成浅灰色3， 当...
JAVA日期时间小结
neeleon的专栏
03-01 832
Java 语言的Calendar，GregorianCalendar (日历),Date(日期), 和DateFormat(日期格式)组成了Java标准的一个基本但是非常重要的部分. 日期是商业逻辑计算一个关键的部分. 所有的开发者都应该能够计算未来的日期, 定制日期的显示格式, 并将文本数据解析成日期对象。学习日期, 日期格式, 日期的解析和日期的计算。 我们将讨论下面的类: 1...
java获取指定开始时间与结束时间之间的所有日期
08-25
主要为大家详细介绍了java获取指定开始时间与结束时间之间的所有日期，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
python 将日期戳（五位数时间）转换为标准时间
01-20
5位数日期戳 读取 .mat 文件处理里面数据时，发现里面的...首先需拿一个“日期戳”对应的时间(标准日期)，减去这个日期戳，得出起始时间。 获取起始时间： 2018-05-02 对应的日期戳为：43222，接下来通过pandas 的Timed
根据日期和时间数组在数据中使用nan填充缺失数据：在时间序列测量中为缺失数据插入nan值-matlab开发
05-29
该代码有助于填补时间序列数据中的空白。 为此，它需要一个缺少日期和时间的 DateTime 数组以及具有相应缺失值... 它将检查日期数组中缺少的日期，并为测量数组中的相应日期填充 Nan，这将有助于获取连续的时间序列数据
python时间序列按频率生成日期的方法
01-20
有时候我们的数据是按某个频率收集的，比如每日、每月、每15分钟，那么我们怎么产生对应频率的索引呢？pandas中的date_range可用于生成指定长度的DatetimeIndex。 我们先看一下怎么生成日期范围：pd.date_range...
计算公历日期对应的星期几.c
05-03
* DayOfWeek * 根据提供的日期计算出星期 * * * 输入：三个参数依次为年，月，日 * 返回：所输入日期的星期
android 解析json 日期格式,关于android：从Json Response更改日期和时间时间格式
weixin_29214691的博客
05-26 186
如何从json响应中解析日期并在textview中设置。我的Json回应：{"createdate":"2016-03-14 04:00:01"}我想要在Textview中显示的内容：4:00PM 03/14我的listview适配器：import android.content.Context;import android.view.LayoutInflater;import android.v...
Element UI中的radio框切换年、月、日。
weixin_48053972的博客
05-24 656
Element UI中的radio框切换年、月、日。 今天上班写了年、月、日、的切换并且带有提示框的发请求获取数据，纠结了很久才想到可以定义一个方法来动态获取当前点击的数据来进行发请求。接口是一样的，只是参数发请求传的参数不一样。 效果如下： 点击每一个按钮会提示是否需要更改当前所点击的时间，可以取消或者确定。 取消和确定切换之后会进行提示。（因为此接口是内部接口外网访问不到，导致确定之后返回的是取消切换） 代码如下 <template> <div> <el-r
氚云学习1——表单
qq_42424228的博客
10-23 2800
首先，当打开一个氚云应用的表单，其地址如下。 其中，id为appcode，标示应用名，每一个氚云的应用都有唯一的id code为schmecode，标示一个表单名，相当于整个表单的实体类，而code用于标示这个表单的唯一标示。 https://www.h3yun.com/home.html#/app?id=czl93lpxl24nxaawwywe5ct66&code=A6714cc7929324c618f4a0382cf9fbf44&BizObjectId= 此外，还有如下的数据名： Biz
怎么用python对应符合日期的数据
最新发布
07-13
你可以使用Python中的datetime模块来处理日期和时间数据。下面是一个示例代码，演示如何筛选出符合特定日期的数据： ```python import datetime # 假设有一个包含日期和数据的列表 data = [ {'date': '2022-01-01', 'value': 10}, {'date': '2022-01-02', 'value': 15}, {'date': '2022-01-03', 'value': 20}, # ... ] # 将日期字符串转换为datetime对象 target_date_str = '2022-01-02' target_date = datetime.datetime.strptime(target_date_str, '%Y-%m-%d') # 筛选出符合日期的数据 filtered_data = [item for item in data if datetime.datetime.strptime(item['date'], '%Y-%m-%d') == target_date] # 打印筛选结果 for item in filtered_data: print(item) ``` 在代码中，我们首先使用`strptime()`函数将目标日期字符串转换为datetime对象。然后，我们遍历数据列表，并使用相同的方式将每个数据项的日期字符串转换为datetime对象。如果日期匹配，则将该数据项添加到筛选结果列表中。 请注意，上述示例中的日期格式是`%Y-%m-%d`，表示年份-月份-日期。你可以根据实际情况调整日期格式。 希望能对你有所帮助！如果有任何疑问，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值