elementUI+vue 时间及时段选择

最新推荐文章于 2024-05-07 19:36:48 发布
最新推荐文章于 2024-05-07 19:36:48 发布
阅读量745 收藏
点赞数
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ScqScbrOnly1/article/details/126253768
版权

 

dateChose.vue   选择时间组件

<template>

  <div class="search clearfix">

    <template>

      <el-form v-if="type === 1">

        <el-form-item label="时间选择" style="float: left;">

          <el-date-picker v-model="value" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="choseDay" />

        </el-form-item>

        <el-form-item style="float: left;">

          <el-button @click="eroDay" style="margin-left: 20px;">上一天</el-button>

        </el-form-item>

        <el-form-item style="float: left;">

          <el-button @click="nextDay" style="margin-left: 5px;">下一天</el-button>

        </el-form-item>

      </el-form>

    </template>

    <template v-if="type === 2">

      <el-form>

        <el-form-item label="时间选择" style="float: left;">

          <el-date-picker v-model="value" type="month" placeholder="选择月" value-format="yyyy-MM" @change="choseMouth" />

        </el-form-item>

        <el-form-item style="float: left;">

          <el-button @click="eroMouth" style="margin-left: 20px;">上一月</el-button>

        </el-form-item>

        <el-form-item style="float: left;">

          <el-button @click="nextMouth" style="margin-left: 5px;">下一月</el-button>

        </el-form-item>

      </el-form>

    </template>

    <template v-if="type === 3">

      <el-form>

        <el-form-item label="时间选择" style="float: left;">

          <el-date-picker v-model="value" type="year" placeholder="选择年" value-format="yyyy" @change="choseYear" />

        </el-form-item>

        <el-form-item style="float: left;">

          <el-button @click="eroYear" style="margin-left: 20px;">上一年</el-button>

        </el-form-item>

        <el-form-item style="float: left;">

          <el-button @click="nextYear" style="margin-left: 5px;">下一年</el-button>

        </el-form-item>

      </el-form>

    </template>

  </div>

</template>

<script>

  export default {

    props: {

      type: { // 显示选择时间类型

        type: Number, // 类型

        default: 1// 默认值

      }

    },

    data() {

      return {

        value: '',

        startTime: null,

        endTime: null

      };

    },

    created() {

      this.initPage();

    },

    mounted() {

    },

    methods: {

      // 初始化

      initPage() {

        switch (this.type) {

          case 1: {

            const now = new Date();

            const yy = now.getFullYear() + '-';

            const mm = (now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1) + '-';

            const dd = (now.getDate() < 10 ? '0' + now.getDate() : now.getDate());

            this.value = yy + mm + dd;

            this.choseDay();

            break;

          }

          case 2: {

            const now = new Date();

            const yy = now.getFullYear() + '-';

            const mm = (now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1);

            this.value = yy + mm;

            this.choseMouth();

            break;

          }

          case 3: {

            const now = new Date();

            const yy = now.getFullYear();

            this.value = String(yy);

            this.choseYear();

            break;

          }

        }

      },

      // 选择日

      choseDay() {

        // console.log(this.value)

        const time = ' 08:00:00';

        const end = ' 23:59:59';

        const endTime = this.value + end;

        this.startTime = this.value + time;

        const ende = Date.parse(new Date(endTime)) + 1000;

        var datechange = new Date(ende);

        const yy = datechange.getFullYear() + '-';

        const mm = (datechange.getMonth() + 1 < 10 ? '0' + (datechange.getMonth() + 1) : datechange.getMonth() + 1) + '-';

        const dd = (datechange.getDate() < 10 ? '0' + datechange.getDate() : datechange.getDate());

        this.endTime = yy + mm + dd + time;

        this.$emit('getStartDate', this.startTime);

        this.$emit('getEndDate', this.endTime);

        // console.log(this.startTime)

        // console.log(this.endTime)

      },

      // 选择月

      choseMouth() {

        // console.log(this.value)

        const time = '-01 08:00:00';

        this.startTime = this.value + time;

        const ende = Date.parse(new Date(this.startTime));

        var datechange = new Date(ende);

        let yy = datechange.getFullYear();

        let mm = (datechange.getMonth() + 1 < 10 ? '0' + (datechange.getMonth() + 1) : datechange.getMonth() + 1);

        // debugger

        if (Number(mm) === 12) {

          mm = '01';

          const NumberY = Number(yy) + 1;

          yy = String(NumberY) + '-';

          this.endTime = yy + mm + time;

        } else {

          const NumberM = Number(mm) + 1;

          mm = String(NumberM) < 10 ? '0' + String(NumberM) : String(NumberM);

          this.endTime = yy + '-' + mm + time;

        }

        this.$emit('getStartDate', this.startTime);

        this.$emit('getEndDate', this.endTime);

      },

      // 选择年

      choseYear() {

        const time = '-01-01 08:00:00';

        this.startTime = this.value + time;

        const ende = Date.parse(new Date(this.startTime));

        var datechange = new Date(ende);

        const yy = datechange.getFullYear() + 1;

        this.endTime = yy + time;

        this.$emit('getStartDate', this.startTime);

        this.$emit('getEndDate', this.endTime);

      },

      // 上一天

      eroDay() {

        let selectDate2 = this.value

        let date2 = new Date(selectDate2).getTime() - 3600 * 1000 * 24;

        selectDate2 = this.timestampToTime(date2).substring(0, 10);

        this.value = selectDate2

        this.choseDay();

      },

      // 下一天

      nextDay() {

        let selectDate2 = this.value

        let date4 = new Date(selectDate2).getTime() + 3600 * 1000 * 24;

        selectDate2 = this.timestampToTime(date4).substring(0, 10);

        this.value = selectDate2

        this.choseDay();

      },

      // 上一月

      eroMouth() {

        let selectDate2 = this.value

        let str = selectDate2.split('-')

        if (Number(str[1]) === 1) {

          this.value = (Number(str[0]) - 1) + '-' + '12'

        } else {

          this.value = str[0] + '-' + ((Number(str[1]) - 1) < 10 ? '0' + (Number(str[1]) - 1) : (Number(str[1]) - 1))

        }

        this.choseMouth();

      },

      // 下一月

      nextMouth() {

        let selectDate2 = this.value

        let str = selectDate2.split('-')

        if (Number(str[1]) === 12) {

          this.value = (Number(str[0]) + 1) + '-' + '01'

        } else {

          // debugger

          this.value = str[0] + '-' + ((Number(str[1]) + 1) < 10 ? '0' + (Number(str[1]) + 1) : (Number(str[1]) + 1))

        }

        this.choseMouth();

      },

      // 上一年

      eroYear() {

        let selectDate2 = Number(this.value) - 1;

        this.value = String(selectDate2);

        this.choseYear();

      },

      // 下一年

      nextYear() {

        let selectDate2 = Number(this.value) + 1;

        this.value = String(selectDate2);

        this.choseYear();

      },

      //将10位或者13位时间戳转化为日期格式

      timestampToTime(timestamp) {

        if (String(timestamp).length == 10) {

          var unixtimestamp = new Date(timestamp * 1000);

          var year = 1900 + unixtimestamp.getYear();

          var month = "0" + (unixtimestamp.getMonth() + 1);

          var date = "0" + unixtimestamp.getDate();

          var hour = "0" + unixtimestamp.getHours();

          var minute = "0" + unixtimestamp.getMinutes();

          var second = "0" + unixtimestamp.getSeconds();

          return (

            year +

            "-" +

            month.substring(month.length - 2, month.length) +

            "-" +

            date.substring(date.length - 2, date.length) +

            " " +

            hour.substring(hour.length - 2, hour.length) +

            ":" +

            minute.substring(minute.length - 2, minute.length) +

            ":" +

            second.substring(second.length - 2, second.length)

          );

        } else {

          let currentTime = new Date(timestamp);

          let year = currentTime.getFullYear(),

            month = currentTime.getMonth() + 1,

            day = currentTime.getDate(),

            hour = currentTime.getHours(),

            minute = currentTime.getMinutes(),

            second = currentTime.getSeconds(),

            millSeconds = currentTime.getMilliseconds();

          let months = month < 10 ? "0" + month : month,

            days = day < 10 ? "0" + day : day,

            hours = hour < 10 ? "0" + hour : hour,

            minutes = minute < 10 ? "0" + minute : minute,

            seconds = second < 10 ? "0" + second : second,

            millSecondss =

              millSeconds < 10

                ? "00" + millSeconds

                : millSeconds < 100

                  ? "0" + millSeconds

                  : millSeconds;

          return (

            year +

            "-" +

            months +

            "-" +

            days +

            " " +

            hours +

            ":" +

            minutes +

            ":" +

            seconds +

            "." +

            millSecondss

          );

        }

      },

    }

  };

</script>

<style>

  .search {

    padding: 25px 0;

    float: left;

  }

  .card {

    float: left;

    height: 100%;

  }

</style>

---------------------------------------------------------分割线----------------------------------------------------------

periodTime.vue   选择时段组件

<template>

  <div class="period clearfix">

    <el-form v-if="type === 1">

      <el-form-item label="时段选择">

        <el-select v-model="valueOne" placeholder="请选择时段" @change="typeOneChange">

          <el-option v-for="item in typeOne" :key="item.value" :label="item.label" :value="item.value" />

        </el-select>

      </el-form-item>

    </el-form>

    <el-form v-if="type === 2">

      <el-form-item label="时段选择">

        <el-select v-model="valueTwo" placeholder="请选择时段" @change="typeTwoChange">

          <el-option v-for="item in typeTwo" :key="item.value" :label="item.label" :value="item.value" />

        </el-select>

      </el-form-item>

    </el-form>

  </div>

</template>

<script>

export default {

  props: {

    type: { // 显示选择时间类型

      type: Number, // 类型

      default: 1// 默认值

    }

  },

  data() {

    return {

      typeOne: [{

        value: '15',

        label: '15分钟'

      }, {

        value: '30',

        label: '30分钟'

      }, {

        value: '60',

        label: '60分钟'

      }],

      valueOne: '15',

      // -------------------------------------

      typeTwo: [{

        value: 'ten',

        label: '10分钟'

      }, {

        value: 'thirty',

        label: '30分钟'

      }, {

        value: 'sixty',

        label: '60分钟'

      }],

      valueTwo: 'ten'

    };

  },

  mounted() {

    this.initPage();

  },

  methods: {

    initPage() {

      switch (this.type) {

        case 1: {

          this.$emit('postPeriodTime', this.valueOne);

          break;

        }

        case 2: {

          this.$emit('postPeriodTime', this.valueTwo);

          break;

        }

      }

    },

    typeOneChange() {

      this.$emit('postPeriodTime', this.valueOne);

    },

    typeTwoChange() {

      this.$emit('postPeriodTime', this.valueTwo);

    }

  }

};

</script>

<style>

    .period {

        padding: 25px 0;

        float: left;

    }

</style>

-----------------------------------------------------------分割线-------------------------------------------------------------

index.vue    主页

<template>

  <div>

    <div class="topSearch clearfix">

      <date-chose :type="dateType" @getStartDate="startDate" @getEndDate="endDate" />

      <period-time :type="periodType" @postPeriodTime="getPeriodTime" />

      <el-button @click="search" style="margin-left: 20px;margin-top:20px;" type="primary">查询</el-button>

    </div>

  </div>

</template>

<script>

  import dateChose from '@/views/reportSys/dateChose';

  import periodTime from '@/views/reportSys/periodTime';

  export default {

    components: { dateChose, periodTime },

    directives: {},

    filters: {

    },

    data() {

      return {

        dateType: 1, // 日期类型 1-年月日  2-年月  3-年

        periodType: 2, // 1-15min/30min/60min  2-10min/30min/60min

        startTime: null, // 开始时间

        endTime: null, // 结束时间

        periodTime: null// 时段

      };

    },

    created() {

    },

    mounted() {

      console.log(this.periodTime);

      console.log(this.startTime);

    },

    methods: {

      search() {

      },

      //获取时间组件 开始时间

      startDate(data) {

        this.startTime = data;

      },

      //获取时间组件 结束时间

      endDate(data) {

        this.endTime = data;

      },

      //获取时段组件 时段

      getPeriodTime(data) {

        this.periodTime = data;

      }

    }

  };

</script>

<style>

</style>

---------------------------------------------------------------------------------------------------------------------------------

ScqScbrOnly1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于Springboot+Vue+Element-ui的精美个人博客系统
11-24
数据库文件
vue2项目+elementui+axios+vueRouter+vuex+less初始化项目
05-23
vue2项目+elementui+axios+vueRouter+vuex+less初始化项目
VUE时间范围选择的组件
godflyfly的博客
11-02 2411
VUE时间范围选择的组件
elementUI+vue2 table滚动封装
08-04
elementUI+vue2 table滚动封装
商品列表（elementui+vue），在线预览地址请看描述
01-31
在线预览地址：http://120.79.17.80/product-list/ 商品列表（elementui+vue），在线预览地址若无法访问，可私聊作者获取最新在线预览地址 商品列表（elementui+vue），在线预览地址若无法访问，可私聊作者获取最新在线预览地址 商品列表（elementui+vue），在线预览地址若无法访问，可私聊作者获取最新在线预览地址 商品列表（elementui+vue），在线预览地址若无法访问，可私聊作者获取最新在线预览地址
时间段组件aTime——属性选择系列组件库（design by yRan）
littleOneYuan的博客
05-12 527
本组件二次封装iview的DatePicker，可以在全局安装了Iview的项目或者局部引入了DatePicker的页面中自由使用。 目录 效果展示 功能描述 结构代码 逻辑代码 组件应用 事件钩子 github 效果展示 从左到右分别是：属性名、时间选择器 功能描述 属性名和初始时间段均可由父组件传参到子组件 点击“确定”按钮，时间确定，点击“清空”按钮时间清空 左侧有快捷时间段选项，“上个月”/“本月”/“上周”等 结构代码 <template> <div
vue3 实现时间分段选择
m0_37715184的博客
09-21 2880
vue3 实现时间分段选择
elementUI el-date-picker 时间范围设置 固定时间段可选 配置
热门推荐
天渺(喵)工作室
06-13 2万+
废话不多说 上代码 <el-date-picker v-model="startTimeAndEndTime" @change='pickerTime' type="datetimerange" ...
vue实现时间段选择组件，分星期，最小粒度小时
xcc_2269861428的博客
12-29 1443
vue实现时间段选择组件，分星期，最小粒度小时
Vue+element ui 表格中时间选择器范围控制(两种方式)
咏絮
07-22 4123
1.页面 <el-table v-loading="loading" :data="tableList" border> <!-- 方法1 --> <el-table-column label="上午时间" align="center" prop="timeRange"> <template slot-scope="scope"> <el-time-picker is-range
vue+elementui+tinymce
03-27
vue2+elementUI引入tinymce组件，富文本组件。tinymce文件夹放在public下，在使用页面引入组件即可。弹窗二次打开无法获取焦点问题，在标签加v-if，让富文本组件在弹窗关闭时销毁（原因由于el-dialog弹窗销毁为key自增，实际富文本未被销毁，再次打开造成影响。可重写弹窗销毁策略。简单方法就添加v-if）
html + vue + elementUI + axios + echarts
04-08
单独页面数据统计，使用了html、 vue、elementUI、axios和echarts
vue ant-design中a-range-picker时间段组件值的获取和赋值（小记）
qq_574745116的博客
05-13 1万+
获取： 组件的引入： <a-range-picker @change="onChangeRangeDate" format="YYYY-MM-DD" :placeholder="['开始时间', '结束时间']"/> 获取起止时间值则通过 @change="onChangeRangeDate"函数实现，如下： onChangeRangeDate(value,dateString){ this.fields.startDate = dateString[0]; .
element 时间选择器（时分）不能用重复时间段（基于VUE）
weixin_44056717的博客
12-17 2089
elemet el-date-picker时间选择器，筛选已选择的时间段
基于Vue的时间段日期区间选择器,每半小时为一段
Simplegif的博客
08-08 708
基于Vue的时间段日期区间选择器, 可用于时间选择, 时间段选择
基于vue与element ui的vue-cron插件的使用及将定时任务cron表达式解析成中文
醉卧雕龙舫，的博客
10-26 1万+
vue-cron插件的使用及将cron解析成中文vue-cron插件的使用第一步：安装依赖第二步：引用第三步：在vue页面的用法效果去掉秒和年插入链接与图片定时任务cron解析成中文简易的工具类该插件存在的一个缺陷 vue-cron插件的使用 第一步：安装依赖 执行下面npm命令： npm install vue-cron --save 第二步：引用 在想使用cron的vue页面引入以下: import VueCron from ‘vue-cron’ import Vue from ‘vue’ Vue.us
时间段选择，时间轴选择，时间颗粒度为5分钟（vue）
weixin_45776308的博客
11-24 868
时间段选择
vue时间选择器
Marshall_Ma的博客
04-18 2万+
NUTUI VUE时间选择器
【在线OJ】Vue创建OJ管理系统
最新发布
qq_61903414的博客
05-07 250
vue ui命令创建项目项目创建完成后来到项目。
elementui+vue
10-17
element-ui 是一套基于 Vue.js 2.0 的 UI 组件库，它提供了一些常用的组件，如按钮、输入框、表格、弹窗等等，可以帮助开发者快速构建页面。Vue.js 是一个渐进式 JavaScript 框架，它可以帮助开发者构建用户界面。通过将 Vue.js 和 element-ui 结合使用，可以更加高效地开发 Web 应用程序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值