Vue中如何轻松获取日期
创始人
2024-05-10 13:05:28
0

目录

简介

获取前几天的时间

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

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

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

2、使用原生js

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

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


简介

Vue.js 是一个用于构建用户界面和单页应用程序的开源 JavaScript 框架。它由 Evan You 于 2014 年创建,此后成为用于构建 Web 应用程序的最流行的 JavaScript 框架之一。

Vue 以其简单性和灵活性着称,使各种技能水平的开发人员都可以轻松使用。它还具有体积小和开销低的特点,使其非常适合较小的项目和渐进式增强。

Vue 使用模板语法,允许开发人员以声明方式在 DOM 中呈现动态数据,从而轻松推断应用程序的状态。Vue 还使用虚拟 DOM,它提供了一种高性能机制,可以在底层数据发生变化时更新视图。

Vue 的架构基于一组可组合的组件,这些组件可以组合起来创建复杂的用户界面。Vue 还有一个内置的反应系统,可以轻松处理和管理状态,并支持指令、过滤器和一组强大的开发人员工具和插件。

总的来说,Vue.js 是构建动态、交互式用户界面和单页应用程序的绝佳选择。

获取前几天的时间

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、30moment(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

传入 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); //计算当前日期 -1this.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); //计算当前日期 -1this.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,加0d = d < 10 ? "0" + d : d; //day小于10,加0return y + "-" + m + "-" + d;},

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

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



//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;},

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;
}

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF,目录中的页码并非PDF中直接索引的页码...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
修复 爱普生 EPSON L4... L4151 L4153 L4156 L4158 L4163 L4165 L4166 L4168 L4...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...