vue日期时间工具类详解

最近做的一个项目对日期时间的处理比较多,最后整理到一个工具类里面,方便以后使用:

1. 在utils文件夹下新建一个dateTimeUtil.js文件:

// 获取当前时间并格式化
export function getCurrentTime(){
  var date = new Date()
  var month = date.getMonth() + 1
  var day = date.getDate()
  if (month <= 9) {
    month = '0' + month
  }
  if (day <= 9) {
    day = '0' + day
  }
  return date.getFullYear() + '-' + month + '-' + day + '  ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
}
 
// 时间格式化
export function formatTime(v) {
  var date = new Date(v)
  var month = date.getMonth() + 1
  var day = date.getDate()
  if (month <= 9) {
    month = '0' + month
  }
  if (day <= 9) {
    day = '0' + day
  }
  return date.getFullYear() + '-' + month + '-' + day + '  ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
}
 
// 日期格式化
export function formatDate(v) {
  var date = new Date(v)
  var month = date.getMonth() + 1
  var day = date.getDate()
  if (month <= 9) {
    month = '0' + month
  }
  if (day <= 9) {
    day = '0' + day
  }
  return date.getFullYear() + '-' + month + '-' + day
}
 
// 获取前、后n天 https://www.cnblogs.com/aoqizhonghua/p/11775982.html
export function getRangeDate(num, time){
  let n = num;
  let d = '';
  if (time) {
    d = new Date(time);
  } else {
    d = new Date();
  }
  let year = d.getFullYear();
  let mon = d.getMonth() + 1;
  let day = d.getDate();
  if(day <= n) {
      if(mon > 1) {
          mon = mon - 1;
      } else {
          year = year - 1;
          mon = 12;
      }
  }
  d.setDate(d.getDate() - n);
  year = d.getFullYear();
  mon = d.getMonth() + 1;
  day = d.getDate();
  let s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
  return s;
}
 
//获取某个月的起始、终止日期
export function getMonthDate(y, m){
  let start = new Date(y, m-1, 1)
  let year = start.getFullYear();
  let mon = start.getMonth() + 1;
  let day = start.getDate();
  let startDate = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day)
 
  let end = new Date((new Date(y, m, 0).getTime() + 24*60*60*1000)-1)
  let year1 = end.getFullYear();
  let mon1 = end.getMonth() + 1;
  let day1 = end.getDate();
  let endDate = year1 + "-" + (mon1 < 10 ? ('0' + mon1) : mon1) + "-" + (day1 < 10 ? ('0' + day1) : day1)
 
  return startDate + ' —— ' + endDate
}
 
/*
  当前日期是年的第几周
  date1是当前日期
  date2是当年第一天
  d是当前日期是今年第多少天
  用d + 当前年的第一天的周差距的和在除以7就是本年第几周
*/
export function getYearWeek(a, b, c){
  var date1 = new Date(a, parseInt(b) - 1, c),
      date2 = new Date(a, 0, 1),
      d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000)
      
  return Math.ceil((d + ((date2.getDay() + 1) - 1)) / 7)
}
 
// 计算某年某周的日期范围 https://blog.csdn.net/lyhuo/article/details/82661063
export function weekGetDate(year, weeks){
  var date = new Date(year, "0", "1")
  var time = date.getTime() // 获取当前星期几,0:星期一     
  var _week = date.getDay()    //当这一年的1月1日为周日时则本年有54周,否则没有54周,没有则去除第54周的提示    
  if(_week!=0){//一年53周情况
    if(weeks==54){
      return '-1' //今年没有54周
    }    
    var cnt=0// 获取距离周末的天数    
    if(_week==0){
      cnt = 7  
    }else if(_week==1){
      cnt = 6  
    }else if(_week==2){   
      cnt = 5
    }else if(_week==3){   
      cnt = 4
    }else if(_week==4){    
      cnt = 3
    }else if(_week==5){    
      cnt = 2
    }else if(_week==6){    
      cnt = 1
    }    
    cnt += 1//加1表示以星期一为一周的第一天    // 将这个长整形时间加上第N周的时间偏移    
    time += cnt*24*3600000 //第2周开始时间 
    var nextYear = new Date(parseInt(year,10)+1,"0","1")  
    var nextWeek = nextYear.getDay()
    var lastcnt = 0//获取最后一周开始时间到周末的天数    
    if(nextWeek==0){    
      lastcnt = 6  
    }else if(nextWeek==1){    
      lastcnt = 0 
    }else if(nextWeek==2){    
      lastcnt = 1 
    }else if(nextWeek==3){ 
      lastcnt = 2 
    }else if(nextWeek==4){    
      lastcnt = 3 
    }else if(nextWeek==5){    
      lastcnt = 4 
    }else if(nextWeek==6){    
      lastcnt = 5
    }    
    if(weeks==1){//第1周特殊处理    // 为日期对象 date 重新设置成时间 time
      // var start = date.Format("yyyy-MM-dd");
      var start = date.toLocaleDateString().split('/').join('-')
      date.setTime(time-24*3600000)
      var end = date.toLocaleDateString().split('/').join('-')
      return start + "-----" + end
    }else if(weeks==53){//第53周特殊处理    
      var start = time+(weeks-2)*7*24*3600000 //第53周开始时间    
      var end = time+(weeks-2)*7*24*3600000 + lastcnt*24*3600000 - 24*3600000 //第53周结束时间
      date.setTime(start)
      // var _start = date.Format("yyyy-MM-dd");
      var _start = date.toLocaleDateString().split('/').join('-')
      date.setTime(end)
      // var _end = date.Format("yyyy-MM-dd");
      var _end = date.toLocaleDateString().split('/').join('-')
      return _start + "---"  + _end
    }else{    
      var start = time+(weeks-2)*7*24*3600000 //第n周开始时间    
      var end = time+(weeks-1)*7*24*3600000 - 24*3600000 //第n周结束时间
      date.setTime(start)
      // var _start = date.Format("yyyy-MM-dd");
      var _start = date.toLocaleDateString().split('/').join('-')
      date.setTime(end)
      // var _end = date.Format("yyyy-MM-dd");
      var _end = date.toLocaleDateString().split('/').join('-')
      return _start + "---"  + _end
    } 
  }else{//一年54周情况    
    var cnt=0// 获取距离周末的天数    
    if(_week==0 && weeks==1){//第一周    
      cnt = 0  
    }else if(_week==0){    
      cnt = 7 
    }else if(_week==1){    
      cnt = 6   
    }else if(_week==2){    
      cnt = 5 
    }else if(_week==3){    
      cnt = 4  
    }else if(_week==4){    
      cnt = 3
    }else if(_week==5){    
      cnt = 2  
    }else if(_week==6){    
      cnt = 1  
    }    
    cnt += 1//加1表示以星期一为一周的第一天    
    // 将这个长整形时间加上第N周的时间偏移    
    time += 24*3600000 //第2周开始时间    
    var nextYear = new Date(parseInt(year,10)+1,"0","1")   
    var nextWeek = nextYear.getDay()   
    var lastcnt = 0 //获取最后一周开始时间到周末的天数    
    if(nextWeek==0){    
      lastcnt = 6
    }else if(nextWeek==1){    
      lastcnt = 0    
    }else if(nextWeek==2){ 
      lastcnt = 1
    }else if(nextWeek==3){    
      lastcnt = 2
    }else if(nextWeek==4){    
      lastcnt = 3   
    }else if(nextWeek==5){    
      lastcnt = 4   
    }else if(nextWeek==6){    
      lastcnt = 5 
    }    
    if(weeks==1){//第1周特殊处理
      // var start = date.Format("yyyy-MM-dd");
      var start = date.toLocaleDateString().split('/').join('-')
      date.setTime(time-24*3600000)
      alert(start +'--'+ date)
      return _start + "---"  + date
    }else if(weeks==54){//第54周特殊处理    
      var start = time+(weeks-2)*7*24*3600000 //第54周开始时间    
      var end = time+(weeks-2)*7*24*3600000 + lastcnt*24*3600000 - 24*3600000 //第53周结束时间
      date.setTime(start)
      // var _start = date.Format("yyyy-MM-dd"); 
      var _start = date.toLocaleDateString().split('/').join('-')
      date.setTime(end)
      // var _end = date.Format("yyyy-MM-dd");
      var _end = date.toLocaleDateString().split('/').join('-')
      return _start + "---"  + _end
    }else{    
      var start = time+(weeks-2)*7*24*3600000 //第n周开始时间    
      var end = time+(weeks-1)*7*24*3600000 - 24*3600000 //第n周结束时间
      date.setTime(start)
      // var _start = date.Format("yyyy-MM-dd");
      var _start = date.toLocaleDateString().split('/').join('-')
      date.setTime(end)
      // var _end = date.Format("yyyy-MM-dd");
      var _end = date.toLocaleDateString().split('/').join('-')
      return _start + "---"  + _end
    }    
  }    
}
 
// 计算某年某月的日期范围
export function monthGetDate(year, months) {
  var year = year
  var month = months
  month = month < 10 ? "0" + month: month
  var firstday = year + "-" + month + "-" + "01"
  var lastday = ""
  if (month == "01" || month == "03" || month == "05" || month == "07" || month == "08" || month == "10" || month == "12") {
    lastday = year + "-" + month + "-" + 31
  } else if (month == "02") {
    if ((year % 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0)) {
      lastday = year + "-" + month + "-" + 29
    } else {
      lastday = year + "-" + month + "-" + 28
    }
  } else {
    lastday = year + "-" + month + "-" + 30
  }
  return firstday + '---' + lastday
}
 
//生成随机字符串方法
export function getString() {
  let time = new Date()
  time = time.getTime()
 
  return `${Math.random().toString(36).substr(2, 10)}${time}`
}
 
//升序排序
export function bubbleSortUp(arr, flag) {
  for (var i = 0; i < arr.length; i++) {
    for (var j = 0; j < arr.length - i - 1; j++) {
      if (arr[j][flag] > arr[j + 1][flag]) {
        var c = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = c;
      }
    }
  }
 
  return arr;
}
 
//降序排序
export function bubbleSortDown(arr, flag) {
  for (var i = 0; i < arr.length; i++) {
    for (var j = 0; j < arr.length - i - 1; j++) {
      if (arr[j][flag] < arr[j + 1][flag]) {
        var c = arr[j + 1];
        arr[j + 1] = arr[j];
        arr[j] = c;
      }
    }
  }
 
  return arr;
}
 
//减法精度处理
export function floatSub(arg1, arg2) {
  var r1, r2, m, n;
  try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
  try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
  m = Math.pow(10, Math.max(r1, r2));
  n = (r1 >= r2) ? r1 : r2;
 
  return ((arg1 * m - arg2 * m) / m).toFixed(n);
}

2. 在需要的文件中引入使用:

获取七天前的日期:

let day7 = util.getRangeDate(7)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue filter格式化时间戳时间成标准日期格式的方法

    调用实例:yyyy-MM-dd或者yyyy-MM-dd hh:mm:ss进行格式 <div>{{data | dataFormat('yyyy-MM-dd hh:mm:ss')}}</div> 代码: import Vue from 'vue' Vue.filter('dataFormat', function (value, fmt) { let getDate = new Date(value); let o = { 'M+': getDate.getMonth() + 1,

  • vue2.0 自定义日期时间过滤器

    方法一: // template {{a | data}} //script data:{ a: Date.now() } filters: { data:function (input) { var d = new Date(input); var year = d.getFullYear(); var month = d.getMonth() + 1; var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate(); var

  • Vue日期时间选择器组件使用方法详解

    本文实例为大家分享了Vue日期时间选择器组件的具体代码,供大家参考,具体内容如下 1.效果图如下 单选日期选择器 多选日期选择器 日期时间选择器 2.准备 Date原型格式化工具方法 Date.prototype.format = function(fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": thi

  • Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能

    具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue.js中使用iView日期选择器并设置开始时间结束时间校验</title> <!-- import Vue.js --> <script src="//vuejs.org/js/vue.min.js"></script

  • vue获取时间戳转换为日期格式代码实例

    vue获取时间戳转换为日期格式. 方法一为转载黄轶老师的format方法:出处(黄轶老师github    https://github.com/ustbhuangyi): // date.js export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); }

  • vue将后台数据时间戳转换成日期格式

    前言 在项目中,经常会有后台返回一个时间戳,页面展示用的却是日期格式的情况 不同组件多次使用的话,那么建议在 src 下新建一个 common 文件夹,创建 date.js 文件,方便多次复用 在组件中使用 <template> <div> <p>{{date1 | formatDate}}</p> <p>{{date1 | formatDate2}}</p> <p>{{date1 | formatDate3}}</

  • ant design vue中日期选择框混合时间选择器的用法说明

    首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode.parentNode" format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'pu

  • Vue自定义验证之日期时间选择器详解

    目录 Vue自定义验证之日期时间选择器 今日需求 期望效果 干货 效果 vue项目时间选择器 html里面 js里面 Vue自定义验证之日期时间选择器 自定义验证 今日需求期望效果干货value-format 效果推荐 今日需求 查询条件中 当开始时间 和 结束时间 一致时 提示结束时间大于开始时间 期望效果 干货 <el-form :inline="true" :rules="rules"> <el-form-item label="创

  • vue filter 完美时间日期格式的代码

    vue filter时间日期格式的实例代码如下所示: <template> <div>{{msg | compFilter('yyyy-MM-dd hh:mm') }}</div> </template> <script> export default { data() { return { msg: new Date() // msg: 10, } }, filters: { compFilter: function(value, format

  • vue.js将时间戳转化为日期格式的实现代码

    看看下面的代码吧,具体代码如下所示: <!-- value 格式为13位unix时间戳 --> <!-- 10位unix时间戳可通过value*1000转换为13位格式 --> export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } l

随机推荐