Vue+iView时间组件的使用

最新推荐文章于 2024-05-27 15:52:51 发布
最新推荐文章于 2024-05-27 15:52:51 发布
阅读量1.4k 收藏 4
点赞数 1
分类专栏： Vue UI框架踩坑指南 文章标签： vue.js iView datepicker 时间戳 日期转换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44794123/article/details/122688444
版权

一，iView时间组件：DatePicker封装使用
官网参考：DatePicker属性

a，Date-picker封装为时间查询范围的组件：

<template>
  <span>
    <slot />
    <FormItem>
      <DatePicker
        v-model="condition.S_createTime_GTOE"
        confirm
        clearable
        placement="bottom"
        class="select-width"
        :type="type"
        :format="format"
        :options="pickerStart"
        transfer
        @on-change="onStartDateChange"
      ></DatePicker>
    </FormItem>
    <span class="search-label">至</span>
    <FormItem>
      <DatePicker
        v-model="condition.S_createTime_LTOE"
        confirm
        clearable
        placement="bottom"
        :type="type"
        :format="format"
        class="select-width"
        :options="pickerEnd"
        transfer
        @on-change="onEndDateChange"
      ></DatePicker>
    </FormItem>
  </span>
</template>

引入时间处理方法

import { convertUTCTimeToLocalTime } from "@/libs/tools";

/**
 * @param {Number} UTCDateString 传入的UTC时间格式
 */
export const convertUTCTimeToLocalTime = (UTCDateString, second) => {
  if(!UTCDateString){
    return '-';
  }
  function formatFunc(str) {    //格式化显示
    return str > 9 ? str : '0' + str
  }
  let date2 = new Date(UTCDateString);
  let year = date2.getFullYear();
  let mon = formatFunc(date2.getMonth() + 1);
  let day = formatFunc(date2.getDate());
  let hour = date2.getHours();

  hour = formatFunc(hour);
  let min = formatFunc(date2.getMinutes());
  let ss = formatFunc(date2.getSeconds())
  let dateStr = year+'-'+mon+'-'+day+' '+hour+':'+min + (second ? `:${ss}` : '');
  return dateStr;
}

组件方法

<script>

import { convertUTCTimeToLocalTime } from "@/libs/tools";
export default {
  props: {
    format: {
      type: String,
      default: "yyyy-MM-dd HH:mm:ss"
    },
    type: {
      type: String,
      default: "datetime"
    },
    defaultTime: {
      type: Boolean,
      default: true
    },
    searchField: {
      type: String,
      default: "createTime"
    }
  },
  data(){
    return {
      condition: {
        S_createTime_GTOE: "",
        S_createTime_LTOE: ""
      },
    }
  },
  methods: {
    getDefaultTime(end) {
      //返回当前时间和前一小时
      function format(str) {
        return str < 10 ? "0" + str : str;
      }
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let time = end ? " 23:59:59" : " 00:00:00"
      return (
        year +
        "-" +
        format(month) +
        "-" +
        format(day) +
        time
      );
    },
    getDateSearch(){
      const defaultTime = this.defaultTime
      let valid = true;
      let { S_createTime_GTOE, S_createTime_LTOE } = this.condition
      if (S_createTime_GTOE && typeof S_createTime_GTOE === "object") {
        S_createTime_GTOE = convertUTCTimeToLocalTime(S_createTime_GTOE, true);
      }
      if (S_createTime_LTOE && typeof S_createTime_LTOE === "object") {
        S_createTime_LTOE = convertUTCTimeToLocalTime(S_createTime_LTOE, true);
      }
      if(defaultTime){
         if (!S_createTime_GTOE) {
          this.$Message.warning("查询起始时间不能为空");
          valid = false;
        } else if (!S_createTime_LTOE) {
          this.$Message.warning("查询结束时间不能为空");
          valid = false;
        } else if(S_createTime_LTOE < S_createTime_GTOE){
          this.$Message.warning("结束时间不能早于起始时间");
          valid = false;
        } /* else if(S_createTime_GTOE.split(' ')[0] != S_createTime_LTOE.split(' ')[0]){
          this.$Message.warning("起始和结束需为同一天");
          valid = false;
        } */
      }else{
        if(S_createTime_LTOE && (S_createTime_LTOE < S_createTime_GTOE)){
          this.$Message.warning("结束时间不能早于起始时间");
          valid = false;
        }
      }
     
      return {
        valid,
        [`S_${this.searchField}_GTOE`]: this.formatDateTime(S_createTime_GTOE),
        [`S_${this.searchField}_LTOE`]: this.formatDateTime(S_createTime_LTOE)
      }
    },

    formatDateTime(date){
      if(date){
        switch(this.format){
          case "yyyy-MM-dd":
            date = date.split(" ")[0]
            break;
          case "yyyy-MM-dd HH:mm:ss":
          default:
            break;
        }
      }
      return date
    },

    onStartDateChange(date) {
      this.condition.S_createTime_GTOE = date;
    },

    onEndDateChange(date) {
      if(date && date.split(" ")[1] === "00:00:00"){
        this.condition.S_createTime_LTOE = date.split(" ")[0] + " 23:59:59";
        return
      }
      this.condition.S_createTime_LTOE = date;
    },
    resetDateSearch(){
      if(this.defaultTime){
        this.condition.S_createTime_GTOE = this.getDefaultTime(),
        this.condition.S_createTime_LTOE = this.getDefaultTime('end')
      }else{
        this.condition.S_createTime_GTOE = ""
        this.condition.S_createTime_LTOE = ""
      }
    }
  },
  created(){
    this.resetDateSearch()
  }
  
}
</script>

b，页面中使用
引入组件

import Common from "_c/common.vue";
import DateSearchEnv from "_c/date-search-env";

export default {
  mixins: [Common],
  components: { DateSearchEnv},
  data() {}
  }

页面使用

<date-search-env ref="dateSearch">
          <span class="search-label">发送时间</span>
 </date-search-env>

页面获取参数

  let { valid, S_createTime_LTOE, S_createTime_GTOE } =this.$refs.dateSearch.getDateSearch();

c,效果
在这里插入图片描述

二，获取初始时间

获取初始时间
获取本月及上月
获取今天及昨天

a，/libs/tools.js中加

/**
 * @returns {date} 获取当月及上月
 */
 export const getNowMonth=()=>{
  var date = new Date(); 
  var nowY = date.getFullYear() + "-";
  var nowM =
  date.getMonth() + 1 < 10
    ? "0" + (date.getMonth() + 1)
    : date.getMonth() + 1;
  var getNowMonth=nowY+nowM;
  // var getBeforeMonth=nowY+date.getMonth();
  let getBeforeMonth="";
  if(nowM==1){
     getBeforeMonth= date.getFullYear()-1+ "-"+12;
  }else{
    getBeforeMonth=nowY+date.getMonth();
  }
  return [getBeforeMonth,getNowMonth]
}

/**
 * @returns {date} 获取今天及昨天
 */
export const getNowDate=()=>{
      var date = new Date(); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var nowY = date.getFullYear() + "-";
      var nowM =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1) + "-"
          : date.getMonth() + 1 + "-";
      var nowDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var time = new Date().getTime() - 24 * 60 * 60 * 1000;
      var yesterday = new Date(time);
      var getToday = nowY + nowM + nowDate;
      var getyesterday = yesterday;
      return [getyesterday,getToday]
}

b，commponents/common.vue引入

import {
convertUTCTimeToLocalTime,
convertUTCTimeToDate,
convertUTCTimeToMonth,
convertUTCTimeToSecond, 
distanceMonth,
getTimestampToDate,
getTimestampToMonth,
getNowMonth,
getNowDate, 
numberValidator 
} from "@/libs/tools";

import axios from "@/libs/api.request.js";

    //初始月份(当月及上月)
    initMonth(){
      return getNowMonth();
    },
    //初始日期(今天及昨天)
    initDate(){
      return getNowDate();
    },

c，页面中引入使用

import Common from "_c/common";
import { convertUTCTimeToLocalTime, numberFixed } from "@/libs/tools";
export default {
  mixins: [Common],
  data() {
    return {
    }}
    }

d，效果

初始日期

  created() {
    this.condition.S_date_GTOE = this.initDate()[0];
    this.condition.S_date_LTOE = this.initDate()[1];
    }

在这里插入图片描述

初始月份

  created() {
        this.condition.S_month_GTOE=this.initMonth()[0]
        this.condition.S_month_LTOE=this.initMonth()[1]
        }

在这里插入图片描述

三，时间范围校验

a，/libs/tools.js中加

/**
 * @returns {Number} 月份间隔数
 */
export const  distanceMonth=(startTime,endTime)=>{
      startTime = new Date(startTime)
      endTime = new Date(endTime)
      var dateToMonth = 0
      var startDate=startTime.getDate() + startTime.getHours()/24 + startTime.getMinutes()/24/60;
      var endDate=endTime.getDate()  +endTime.getHours()/24 + endTime.getMinutes()/24/60;
      if(endDate >= startDate){
        dateToMonth = 0
      }else{
        dateToMonth = -1
      }
      let yearToMonth = (endTime.getYear() - startTime.getYear()) * 12
      let monthToMonth = endTime.getMonth() - startTime.getMonth()
      return yearToMonth + monthToMonth + dateToMonth
}

b，commponents/common.vue引入后封装

    //获取日期间隔月份
 getMonthsapart(startTime,endTime){
      return distanceMonth(startTime,endTime);
 },

c，页面中使用：

日期查询限制一个月内

    if (
        this.getMonthsapart(this.condition.S_date_GTOE,this.condition.S_date_LTOE)>0
      ) {
        return this.$Message.warning("起始和结束区间需为一个月");
      }

日期查询范围限制一个自然年内

      if(
        this.getMonthsapart(this.condition.S_month_GTOE,this.condition.S_month_LTOE)>12
        ){
         return  this.$Message.warning("起始和结束区间需为一年");
       }

d，其他校验

同年同月校验

    if(
       S_date_GTOE.split("-")[1] != S_date_LTOE.split("-")[1] ||
       S_date_GTOE.split("-")[0] != S_date_LTOE.split("-")[0]||
        ){
        return this.$Message.warning("起始和结束需为同年同月");
   }

同年校验

  if(
       this.condition.S_countMonth_GTOE.split('-')[0] != this.condition.S_countMonth_LTOE.split('-')[0]
        ){
        return  this.$Message.warning("起始和结束需为同一年");
   }

非空校验

 if (!this.condition.S_date_GTOE ) {
        this.$Message.error("开始时间不能为空");
        return;
 }

顺序校验

 if (S_date_GTOE > S_date_LTOE) {
        return this.$Message.warning("结束时间不能早于起始时间");
  }

四，时间格式化处理

（1）时区转换：

a，commponents/common.vue引入后封装

  //格式化日期
    timestampToDate(timestamp){
      return getTimestampToDate(timestamp);
    },
    //格式化月份
    timestampToMonth(timestamp){
      return getTimestampToMonth(timestamp);
    },

b，/libs/tools.js中加方法：

/**
 * @returns {date} 格式化日期
 */
export const getTimestampToDate=(timestamp)=> {
    var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var Y = date.getFullYear() + "-";
    var M =
      date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1;

    var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    return Y + M + "-" + D;
}
/**
 * @returns {date} 格式化月份
 */
export const getTimestampToMonth=(timestamp)=> {
  var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + "-";
  var M =
    date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1;
  return Y + M;
}

c，页面中使用：

日期

   S_date_GTOE = this.timestampToDate(S_date_GTOE);
   S_date_LTOE = this.timestampToDate(S_date_LTOE);

月份

 this.condition.S_month_GTOE = this.timestampToMonth(
            this.condition.S_month_GTOE
);
 this.condition.S_month_LTOE = this.timestampToMonth(
            this.condition.S_month_LTOE
  );

（2）时间截取显示

a，commponents/common.vue引入后封装

    //将UTC时间转换为当地时间
    getTranslateDate(date) {
      return convertUTCTimeToLocalTime(date);
    },
     getTranslateByDate(date) {
      return convertUTCTimeToDate(date);
    },
    getTranslateByMonth(date) {
      return convertUTCTimeToMonth(date);
    },
    getTranslateBySecond(date) {
      return convertUTCTimeToSecond(date);
    },

b，/libs/tools.js中加方法：

//时间到日期(年/月/日)
export const convertUTCTimeToDate = (UTCDateString) => {
  if(!UTCDateString){
    return '-';
  }
  function formatFunc(str) {    //格式化显示
    return str > 9 ? str : '0' + str
  }
  let date2 = new Date(UTCDateString);     //这步是关键
  let year = date2.getFullYear();
  let mon = formatFunc(date2.getMonth() + 1);
  let day = formatFunc(date2.getDate());
  let hour = date2.getHours();

  hour = formatFunc(hour);
  let min = formatFunc(date2.getMinutes());
  let second = formatFunc(date2.getSeconds());//获取秒
  //let dateStr = year+'-'+mon+'-'+day+' '+noon +' '+hour+':'+min;
  let dateStr = year+'-'+mon+'-'+day;
  return dateStr;
}

//时间到月(年/月)
export const convertUTCTimeToMonth = (UTCDateString) => {
  if(!UTCDateString){
    return '-';
  }
  function formatFunc(str) {    //格式化显示
    return str > 9 ? str : '0' + str
  }
  let date2 = new Date(UTCDateString);     //这步是关键
  let year = date2.getFullYear();
  let mon = formatFunc(date2.getMonth() + 1);
  let day = formatFunc(date2.getDate());
  let hour = date2.getHours();

  hour = formatFunc(hour);
  let min = formatFunc(date2.getMinutes());
  let second = formatFunc(date2.getSeconds());//获取秒
  //let dateStr = year+'-'+mon+'-'+day+' '+noon +' '+hour+':'+min;
  let dateStr = year+'-'+mon;
  return dateStr;
}

/**
 * @param {Number} UTCDateString 传入的UTC时间格式
 */
export const convertUTCTimeToLocalTime = (UTCDateString, second) => {
  if(!UTCDateString){
    return '-';
  }
  function formatFunc(str) {    //格式化显示
    return str > 9 ? str : '0' + str
  }
  let date2 = new Date(UTCDateString);     //这步是关键
  let year = date2.getFullYear();
  let mon = formatFunc(date2.getMonth() + 1);
  let day = formatFunc(date2.getDate());
  let hour = date2.getHours();

  hour = formatFunc(hour);
  let min = formatFunc(date2.getMinutes());
  let ss = formatFunc(date2.getSeconds())

  let dateStr = year+'-'+mon+'-'+day+' '+hour+':'+min + (second ? `:${ss}` : '');
  return dateStr;
}

//时间到秒(年/月/日 时:分:秒)
export const convertUTCTimeToSecond = (UTCDateString) => {
  if(!UTCDateString){
    return '-';
  }
  function formatFunc(str) {    //格式化显示
    return str > 9 ? str : '0' + str
  }
  let date2 = new Date(UTCDateString);     //这步是关键
  let year = date2.getFullYear();
  let mon = formatFunc(date2.getMonth() + 1);
  let day = formatFunc(date2.getDate());
  let hour = date2.getHours();

  hour = formatFunc(hour);
  let min = formatFunc(date2.getMinutes());
  let second = formatFunc(date2.getSeconds());//获取秒

  let dateStr = year+'-'+mon+'-'+day+' '+hour+':'+min+':'+second;
  return dateStr;
}

c，页面中使用

columns：[
 {
          title: "创建时间",
          align: "center",
          slot: "createTime",
        },
      ],

 <Table :columns="columns" :data="tableList" size="small" :row-class-name="rowClassName" @on-selection-change="getSelectItems">
        <template slot-scope="{row}" slot="weak">
          {{ row.weak ? "强" : "弱"}}
        </template>
        <template
          slot-scope="{ row}"
          slot="createTime"
        >{{getTranslateDate(row.createTime)}}</template>
  </Table>

d，效果图：
在这里插入图片描述

沐风拂千渔
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
inputAuto.vue 基于vue+iview的搜索下拉选择组件
04-02
iview中的select和AutoComplete不能满足我的需求，故自己写。
vue+iview+less 实现换肤功能
10-18
在本文中，我们将探讨如何使用Vue.js、iView和Less实现一个动态换肤功能。Vue.js是一个流行的前端框架，iView是一个基于Vue的UI组件库，而Less是一种预处理器CSS语言，它允许我们编写更简洁、可维护的样式代码。以下...
iview.min.js官方4.7.0版本
03-11
iview.min.js官方4.7.0版本
iview+vue时间选择器组件选择范围1月
weixin_50194471的博客
04-12 550
样式中定义两个选择时间组件。
iview render Datepicker开始--结束时间
最新发布
2401_85124837的博客
05-27 334
{title: ‘时间段’, slot: ‘times’,width: 200,align: ‘center’},{title: ‘时间段’, key: ‘times’,width: 200,align: ‘center’,params.row.planDateTo) { // 不存在时，取消禁用。title: ‘结束时间’,
vue+iview实现日历日期选择（多月份多选）
LBJSagiri的博客
06-08 1783
选择本年某月某天（可多选不同月份，不同日期）
iview DatePicker 选择年月日时分，展示年月日时分秒
zhazhawei9527的博客
07-26 638
iview DatePicker 选择年月日时分，展示年月日时分秒
已解决：iview & elementui 关于datepicker日期选择器的一些注意事项，比如v-model绑定值会比选定日期少一天（实际是8小时），日期默认值表单校验无法通过等
Spy003的博客
05-08 933
直接用v-model可以绑定值，渲染页面结果日期是正确的，但是绑定的值的日期会少8小时，这个主要是他的时区处理的遗留问题，其实我认为这个问题他们很好解决，但是这么多年了，他们好像也没有想要解决的意思，iview给的建议是使用@on-change方法配合v-model使用，这样可以处理编辑时的默认值回显也可以处理新值的正确显示（不少8小时），如图iview官方文档，其实只需要处理这个少一天的问题就好了，我们最好是走一个三方库moment，用他来处理最好不过了，就在提交表单的时候处理就可以。
Vue+iView自适应后台模板.rar
11-12
Vue+iView自适应后台模板是一款基于Vue.js框架和iView UI组件库的高效、美观的后台管理系统模版。它专为构建支持PC端和移动端的Web应用设计，提供了丰富的功能和优秀的用户体验。以下是对这套模板及其相关技术栈的...
vue+iview后台管理模板 它基于Vue.js并使用UI工具包iView
01-07
在模板中，开发者可以通过简单地引入和配置iView组件，快速构建出专业级别的后台界面。 3. 后台管理模板结构：通常，一个后台管理模板会包含登录注册、权限管理、路由配置、布局设置、主页面、侧边栏、顶部导航、...
vue+iview分页组件的封装
01-18
vue+iview的分页组件封装 1.在components中创建pagination文件夹，接着创建src，index.js,index.less文件 2.index.less文件 //需要修改的样式 .ivu-page-options { margin-left: 10px; .ivu-page-options-sizer {...
iview.min.js
06-10
uino-iview的压缩文件
script引用vue，iview入门实战
我的小熊不见了
06-29 4656
iview大体上可以分为两种使用方式： 1，直接使用script引用iview的js。 2，使用iview提供的脚手架。 第一种方式使用iview和vue比较简单，适合刚上手vue和iview以及想体验vue特性但是又不想搭建webpack的小伙伴。 <!-- import Vue.js --> <script src="https://cdn.jsdelivr.ne...
iview踩坑日记（一）——DatePicker
小罗伯特
11-02 1156
DatePicker解决坑
iView-DatePicker时间控件的使用及格式化
芃蓉蓁蓁的博客
05-22 1969
<FormItem label="开始日期" prop="startTime"> <Date-picker type="datetime" v-model="log.startDate" :key="log.startDate" format="yyyy-MM-dd HH:mm:SS" @on-change="log.startTime=$event" style="width: 175px" placeholder="选择开始时间" ></Date-picker&
iView DatePicker v-model和@on-change同时使用的坑
程序员雅痞的博客
12-07 1137
iView DatePicker v-model和@on-change同时使用 on-change无效
iview中日期选择器DatePicker- - 限制选择年份范围
slient033的博客
09-16 2418
iview中日期选择器DatePicker- - 限制选择年份范围
vue之打包优化
追梦&天空的博客
10-17 739
最近写项目，4个平台的项目由一个代码库管理，超过50个.vue文件，导致代码量过大，每次构建打包速度都很慢， 下面是针对vue打包构建优化的一些测试结果： 第一次npm run dev : 第一次npm run dev 第一次npm run build构建: 第一次npm run build构建优化修改如下： 1，采用cdn加载UI库，把不常改变的库放到index.html中，通过......
vue+iview 实现父组件在子组件表格中添加日期选择器
05-25
可以通过在子组件的表格列定义中使用`scoped-slot`来自定义渲染日期选择器，然后在父组件中传递一个日期选择器的`props`给子组件，在子组件中使用该`props`来控制日期选择器的显示和隐藏。 以下是一个简单的示例代码： 在父组件中： ``` <template> <div> <DatePicker v-model="selectedDate" /> <Table :data="tableData"> <Table-column prop="name" label="姓名" /> <Table-column prop="age" label="年龄" /> <Table-column label="生日"> <template slot-scope="{row}"> <Date-Picker v-show="row.showDatePicker" v-model="row.birthday" type="date" @on-ok="hideDatePicker(row)" /> <div v-else @click="showDatePicker(row)">{{ row.birthday }}</div> </template> </Table-column> </Table> </div> </template> <script> import { DatePicker, Table } from "iview"; export default { components: { DatePicker, Table }, data() { return { selectedDate: null, tableData: [ { name: "张三", age: 20, birthday: "1999-01-01", showDatePicker: false }, { name: "李四", age: 22, birthday: "1997-06-15", showDatePicker: false }, { name: "王五", age: 25, birthday: "1994-11-30", showDatePicker: false } ] }; }, methods: { showDatePicker(row) { row.showDatePicker = true; }, hideDatePicker(row) { row.showDatePicker = false; } } }; </script> ``` 在子组件中： ``` <template> <div> <Table :data="tableData"> <Table-column prop="name" label="姓名" /> <Table-column label="生日"> <template slot-scope="{row}"> <Date-Picker v-model="row.birthday" type="date" /> </template> </Table-column> </Table> </div> </template> <script> import { DatePicker, Table } from "iview"; export default { components: { DatePicker, Table }, props: { datePickerProps: Object }, data() { return { tableData: [ { name: "张三", birthday: "1999-01-01" }, { name: "李四", birthday: "1997-06-15" }, { name: "王五", birthday: "1994-11-30" } ] }; } }; </script> ``` 在父组件中使用子组件时，传递日期选择器的`props`： ``` <template> <div> <DatePicker v-model="selectedDate" /> <ChildComponent :datePickerProps="datePickerProps" /> </div> </template> <script> import ChildComponent from "./components/ChildComponent.vue"; export default { components: { ChildComponent }, data() { return { selectedDate: null, datePickerProps: { type: "date" } }; } }; </script> ``` 这样就可以在子组件的表格列中渲染日期选择器，并且可以根据`props`来控制日期选择器的显示和隐藏了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值