Vue 日期获取的示例代码

 更新时间:2023年01月10日 12:00:25   作者:梦之归途  
moment.js是一款现在对时间处理的强大的函数,这篇文章主要介绍了Vue 日期获取的示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

 获取前几天的时间

moment.js是一款现在对时间处理的强大的函数
如果没有安装的话先执行npm install moment命令

  import moment from 'moment';
 
  export default {
 
    data() {
      return {
        // 写在data中或者写在methods里面,一定要写不然会报错
        moment
      }
    },
 
    methods: {
      changeRecent(value) {
        // 开始日期
        moment(new Date()).format('YYYY-MM-DD')+' '+'23:59:59'  
        // 结束日期  value 3、7、30
        moment(new Date().getTime() - value * 1000 * 24 * 60 * 60).format('YYYY-MM-DD')+' '+'00:00:00');
      },
    }
  }

 vue 根据指定日期 获取日期所在月份的第一天和最后一天

将当前时间格式化
dateFormat(time) {
let date = new Date(time);
let year = date.getFullYear();
let wk = date.getDay()
/* 在日期格式中,月份是从0开始的,因此要加0
* 使用三元表达式在小于10的前面加0,以达到格式统一  如 09:11:05
* */
let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
let week = weeks[wk]
// 拼接
return year + "年" + month + "月" + day + "日" + " " + hours + ":" + minutes + ":" + seconds + ' ' + week;
},
使用:this.newDate = this.dateFormat(new Date());
 
 
import moment from 'moment';
// 写在data中或者写在methods里面,一定要写不然会报错
moment,
// 获取当前月的开始结束时间
getCurrMonthDays() {
let obj = {
   starttime: '',
   endtime: ''
}
obj.starttime = moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss');
obj.endtime = moment(moment().month(moment().month()).endOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss');
return obj
},
使用:console.log(this.getCurrMonthDays())

获取系统当天日期以及前一天和前一月前一年

1、首先vue项目中要安装到moment.js

获取前一天的日期

 moment().subtract(1, 'day').format('YYYY-MM-DD') //1,day就代表前一天

如果要获取前一个月或者前一年就将day换成month或者year,剩下的时间可以根据实际情况来定
例如前一月

moment().subtract(1, 'month').format('YYYY-MM-DD')

前一年

 moment().subtract(1, 'year').format('YYYY-MM-DD')

如果要按照具体的时间来的话,在’moment()'中加入对应格式的日期字符串比如’moment(‘2022-3-21’).subtract(2, ‘day’).format(‘YYYY-MM-DD’))

2、使用原生js

<script>
    let a = getFMdate(0)
    let b = getFMdate(-1)
    let c = getFMdate(8)
    console.log(a, b, c)
 
    function getFMdate (number, separator) {
      let n = parseInt(number)
      let nd = new Date()
      let day = nd.getDate()
      let setd = new Date(nd.setDate(day + n))
      let ryear = setd.getFullYear()
      let rmonth = setd.getMonth() + 1
      let rday = setd.getDate()
      let frmonth, frday;
      // month day + '0'
      if (rmonth < 10) {
        frmonth = '0' + rmonth
      } else {
        frmonth = rmonth
      }
      if (rday < 10) {
        frday = '0' + rday
      } else {
        frday = rday
      }
      // separator
      let sep = separator ? separator : '-'
      return ryear + sep + frmonth + sep + frday
    }
  </script>

传入 0 , 获取今天日期

传入负数, 获取过去N天日期

传入整数, 获取未来N天日期

这里主要是对setDate / setMonth / setYear的一个运用,笔者还是建议直接使用vue的moment()方法,底层已经帮我们封装好,不用计算跨月第一天的前一天或者跨年的前一天,省去了代码的冗余度,提高效率。

3、也是vue获取,但是没有第一种那么简单暴力

// 前一天
    beforeDay() {
      //前一天
      let beforeDay = new Date(
        new Date(this.alarmformSearch.date).getTime() - 24 * 60 * 60 * 1000
      ); //计算当前日期 -1
      this.alarmformSearch.date = this.convertToDate(beforeDay); //格式化日期并赋值
 
      this.getWarnInfo();
    },
// 前两天
    beforeTwoDay() {
      //前一天
      let beforeTwoDay = new Date(
        new Date(this.alarmformSearch.date).getTime() -
          24 * 60 * 60 * 1000 -
          24 * 60 * 60 * 1000
      ); //计算当前日期 -1
      this.alarmformSearch.date = this.convertToDate(beforeTwoDay); //格式化日期并赋值
 
      this.getWarnInfo();
    },
convertToDate(date) {
      var date = new Date(date);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      var d = date.getDate();
      m = m < 10 ? "0" + m : m; //月小于10,加0
      d = d < 10 ? "0" + d : d; //day小于10,加0
      return y + "-" + m + "-" + d;
    },

对比下来感觉第三种还不如写原生js,哈哈,还好vue底层帮我们封装好了现成的moment()方法,很方便

 el-date-picker设置默认时间为当前时间

<el-form-item
   label="创建时间"
   :label-width="formLabelWidth"
>
  <el-date-picker
    v-model="addForm.createDate"
    style="width:100%"
     type="datetime"
     placeholder="选择日期"
   />
</el-form-item>
//data里的数据
data(){
    addForm:{
        createDate:new Date() // 只需要在这里声明的时候直接值赋为 new Date()
    }
}
 
 
dingdKpData:"",
this.dingdKpData = [this.date_start,this.date_end]
 
 
getdate(){
		//年
		let year = new Date().getFullYear();
		//月份是从0月开始获取的,所以要+1;
		let month = new Date().getMonth() +1;
		//日
		let day = new Date().getDate();
		//时
		let hour = new Date().getHours();
		//分
		let minute = new Date().getMinutes();
		//秒
		let second = new Date().getSeconds();
		return year + '-' + month + '-' + day;
	},
<el-form-item label="收款日期" prop="collection_date">
<el-date-picker v-model="baseInfoObj.collection_date" size="small" type="date" placeholder="收款日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%">
   </el-date-picker>
   </el-form-item>
 
 
this.baseInfoObj.collection_date = this.dateFormat('YYYY-mm-dd', new Date())
 
 
==>main.js
import { dateFormat } from './utils/day'
Vue.prototype.dateFormat = dateFormat
 
==>utils=>day.js
 
//获取当前日期     参数 "YYYY-mm-dd HH:MM:SS"  new Date()
export function dateFormat(fmt, date) {
    let ret;
    const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加,必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
}

到此这篇关于Vue 日期获取的文章就介绍到这了,更多相关Vue 日期获取内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue实现简单的登录弹出框

    vue实现简单的登录弹出框

    这篇文章主要为大家详细介绍了vue实现简单的登录弹出框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • Vue中Mustache引擎插值语法使用详解

    Vue中Mustache引擎插值语法使用详解

    在Vue中通过Mustache模板引擎将data中的文本数据插入到HTML中,下面这篇文章主要给大家介绍了关于Vue中Mustache模板引擎插值语法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue+springboot实现登录功能

    vue+springboot实现登录功能

    这篇文章主要为大家详细介绍了vue+springboot实现登录功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • elementui 开始结束时间可以选择同一天不同时间段的实现代码

    elementui 开始结束时间可以选择同一天不同时间段的实现代码

    这篇文章主要介绍了elementui 开始结束时间可以选择同一天不同时间段的实现代码,需要先在main.js中导入相应代码,代码简单易懂,需要的朋友可以参考下
    2024-02-02
  • vue项目中按需引入element-ui的正确实现方法

    vue项目中按需引入element-ui的正确实现方法

    这篇文章主要介绍了vue项目中按需引入element-ui的正确实现方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue中的echarts图表如何实现loading效果

    Vue中的echarts图表如何实现loading效果

    这篇文章主要介绍了Vue中的echarts图表如何实现loading效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 基于Vue3+TypeScript实现图片预览组件

    基于Vue3+TypeScript实现图片预览组件

    在现代的 Web 应用中,图片预览是一个常见的需求,本文将介绍如何使用 Vue3 和 TypeScript 开发一个图片预览组件,支持展示单张或多张图片,并提供了丰富的配置选项,需要的朋友可以参考下
    2024-04-04
  • vue与bootstrap实现时间选择器的示例代码

    vue与bootstrap实现时间选择器的示例代码

    本篇文章主要介绍了vue与bootstrap实现时间选择器的示例代码,非常具有实用价值,需要的朋友可以参考下
    2017-08-08
  • vue2前端调用WebSocket有消息进行通知代码示例

    vue2前端调用WebSocket有消息进行通知代码示例

    在Vue项目中实现全局的消息链接监听主要涉及到了WebSocket技术,这是一种双向通信协议,允许客户端与服务器之间实时、高效地交换数据,这篇文章主要给大家介绍了关于vue2前端调用WebSocket有消息进行通知的相关资料,需要的朋友可以参考下
    2024-07-07
  • VUE在线调用阿里Iconfont图标库的方法

    VUE在线调用阿里Iconfont图标库的方法

    这篇文章主要介绍了VUE在线调用阿里Iconfont图标库的方法,内容是围绕VUE前端和阿里Iconfont图标库展开的,经历了从网站上东拼西凑图标的时代,大概是15~16年左右我开始解除阿里Iconfont图标库,刚开始就只会下载图标使用,需要的朋友可以参考下
    2021-10-10

最新评论