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
    评论
专栏目录
解决iView中时间控件选择的时间总是少一天的问题
08-27
下面小编就为大家分享一篇解决iView中时间控件选择的时间总是少一天的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
iView开始结束时间组件
weixin_30478619的博客
10-23 90
演示地址：https://run.iviewui.com/TGIKGkIt 测试页面文件： 1 <template> 2 <div> 3 <startEndTime @newEndTime="newEndTimeData" :startEndTimeData="timeDataObj"></startEndTime&gt...
iview render Datepicker开始--结束时间
最新发布
2401_85124837的博客
05-27 329
{title: ‘时间段’, slot: ‘times’,width: 200,align: ‘center’},{title: ‘时间段’, key: ‘times’,width: 200,align: ‘center’,params.row.planDateTo) { // 不存在时，取消禁用。title: ‘结束时间’,
iView中的DatePicker日期选择控件（开始时间和结束时间约束，结束时间加一天）
G_X73的博客
06-29 2069
iView中的DatePicker日期选择控件（开始时间和结束时间约束） 前言：最近做项目需要用到日期选择控件，来做个总结，其中包括开始时间和结束时间的约束，直接上代码（Vue项目） 实现效果图： template： <span class="item"> 检测时间： <DatePicker type="date" :options="startTimeOptions" @on-change="startTimeChange" placeholde
iview日期选择器的日期值获取
weixin_44167504的博客
12-16 688
iview日期选择框的日期值获取 控件： method方法：
iview封装时间控件
浩星
09-21 1360
前言： 对iview的时间控件下来进行二次封装，里面可以实现input的那种，也有点击自定义的下拉效果； 效果图： 1、input+时间控件 2、定制+时间控件 下面来贴下我们的组件代码cdate.vue <template> <div class="dateDiv"> <!-- input框版本 --> ...
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语言，它允许我们编写更简洁、可维护的样式代码。以下...
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 {...
前端开发VUE使用iView的DatePicker 设置默认值
03-02
我们在用Vue做前端时，经常会用到iView的UI控件，比如说日期选择器就是比较常用的。官方文档都提供了源码，但未提供设置默认值的代码。所以就得我们自己开看控件说明自己编写实现。本文档就是说明怎么在使用iView 的DatePicker控件时自己设置想要的默认值。
iview.min.js iview组件开发文件
03-31
iview的文件下载
关于iview表单校验 date校验 多选日期校验问题
Taurus_666
06-10 2639
遇到的问题 在使用iview框架时，在后端管理系统中，通常会使用到form表单组件，当然日期也通常出现在搜索框表单中，但是有时候会出现日期组件校验错误的情况 问题分析 首先，iview采用的是async-validator的校验规则，校验类型一般分为以下几种：string、number、boolean、array、object； 其次，默认表单校验类型是string，但是日期组件 type...
VUE iview date-picker取时间范围...
weixin_33826609的博客
11-12 723
x HTML &lt;script src="//unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;script src="//unpkg.com/iview/dist/iview.min.js"&gt;&lt;/script&gt; &lt;div id="app"&gt; &lt;row&g
iview组件之DatePicker日期格式,显示格式化，后台传值也格式化特定格式如（yyyy-MM-dd）
jieweiwujie的博客
12-07 876
其中on-change的作用就是把value值和format格式联系起来。value1的值就是format格式的。这样前台展示，和给后太传值都是固定格式字符串 "yyyy-MM-dd" 的格式，使用value替代model。
iview的时间实时限制
weixin_43021174的博客
09-10 1469
html部分 &amp;lt;FormItem prop=&quot;messageFrequency&quot; label='消息有效期开始时间：'&amp;gt; &amp;lt;Date-picker type=&quot;datetime&quot; placeholder=&quot;选择日期和时间&quot; style=&quot;width: 200px;disp
Vue iView时间组件DatePicker，设置开始时间和结束时间约束、初始值和格式（年月日）
qq_36649922的博客
05-31 3643
html代码： <FormItem label="开始时间"> <DatePicker type="date" :options="startOption" v-model="createForm.startDate" ></DatePicker> </FormItem> <FormItem label="结束时间"> <DatePicker
iview中Date-picker的使用 不可选择除今日外往后的日期
weixin_53578451的博客
06-20 822
iview中Date-picker的使用 不可选择除今日外往后的日期
vue+iview 实现父组件在子组件表格中添加日期选择器
05-25
可以通过在子组件的表格列定义中使用`scoped-slot`来自定义渲染日期选择器，然后在父组件中传递一个日期选择器的`props`给子组件，在子组件中使用该`props`来控制日期选择器的显示和隐藏。 以下是一个简单的示例...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值