当前位置: 首页 > news >正文

【前端】日期转换

记录项目中需要处理的日期格式 默认vue2

初级版

将后端传来的数组

['2024/01/29 08:55:18', '2024/01/29 09:55:18', '2024/01/29 10:11:18']

转为

 ['2024-01-29 08:55', '2024-01-29 09:55', '2024-01-29 10:11']

方法

    convertDateTimeFormat(arr) {var tempArr = arr.map(function (dateTime) {var date = new Date(dateTime)var formattedDateTime =date.getFullYear() +'-' +('0' + (date.getMonth() + 1)).slice(-2) +'-' +('0' + date.getDate()).slice(-2) +' ' +('0' + date.getHours()).slice(-2) +':' +('0' + date.getMinutes()).slice(-2)return formattedDateTime})return tempArr},

如果只传入

 '2024/01/29 08:55:18'  

 '2024-01-29 08:55'
    convertDateTimeFormat(dateTime) {var date = new Date(dateTime)var formattedDateTime =date.getFullYear() +'-' +('0' + (date.getMonth() + 1)).slice(-2) +'-' +('0' + date.getDate()).slice(-2) +' ' +('0' + date.getHours()).slice(-2) +':' +('0' + date.getMinutes()).slice(-2)return formattedDateTime},

传入时间戳数字类型

 var curveTimestamp = 1706753478000    

  '2024-02-01 10:11'

方法

    convertDateTimeFormat(timestamp) {var date = new Date(timestamp)var formattedDateTime =date.getFullYear() +'-' +('0' + (date.getMonth() + 1)).slice(-2) +'-' +('0' + date.getDate()).slice(-2) +' ' +('0' + date.getHours()).slice(-2) +':' +('0' + date.getMinutes()).slice(-2)return formattedDateTime},

高级版

Day.js是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间。

Day.js中文网

vue2中安装 ,yarn安装报错,选择用npm

npm i dayjs

全局main.js引入

import dayjs from 'dayjs'
Vue.prototype.dayjs = dayjs

使用案例

<template><div></div>
</template><script>
// import dayjs from 'dayjs'
export default {methods: {init() {//基础调用Start-----------------------------------------------------------------------------------var nowTime0 = this.dayjs().unix()console.log('🚀 ~ convertDateTimeFormat ~ 时间戳(秒)nowTime0:', nowTime0) //1706749967var nowTime2 = this.dayjs().format('YYYY/MM/DD')console.log('🚀 ~ convertDateTimeFormat ~ 年月日格式化nowTime2:', nowTime2) // 2024/02/01var nowTime3 = this.dayjs().format('YYYY-MM-DD HH:mm:ss')console.log('🚀 ~ convertDateTimeFormat ~ 年月日时分秒nowTime:', nowTime3) //2024-02-01 09:12:15var nowTime4 = this.dayjs().valueOf()console.log('🚀 ~ convertDateTimeFormat ~ 时间戳(毫秒)nowTime4:', nowTime4) //1706750110311const nowStartDay = this.dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss.SSS')console.log('🚀 ~ convertDateTimeFormat ~ 获取当天的开始时间格式化nowStartDay:', nowStartDay)const nowEndDay = this.dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss.SSS')console.log('🚀 ~ convertDateTimeFormat ~ 当天的结束时间格式化nowEndDay:', nowEndDay)const date1 = this.dayjs('2023-01-10')const date2 = this.dayjs('2023-11-10')const diffDay = date2.diff(date1, 'd') //D是day的缩写也可以,月日都是首字母大写缩写.其他年、周、小时分都是小写,全拼则都是小写console.log('🚀 ~ convertDateTimeFormat ~ 时间差(天)dif:', diffDay)//基础调用END-----------------------------------------------------------------------------------//传值,通过案例去举一反三const convertTime1 = this.dayjs(1706753478000).format('YYYY-MM-DD HH:mm')console.log('🚀 ~ convertDateTimeFormat ~ 时间戳转日期格化convertTime:', convertTime1) // 2024-02-01 10:11const convertTime2 = this.dayjs('2024/01/29 08:55:18').format('YYYY-MM-DD HH:mm')console.log('🚀 ~ convertDateTimeFormat ~ 日期字符串格化convertTime:', convertTime2) // 2024-01-29 08:55// console.log('如果不想全局引入就把main.js那删了,这里引入即可,不需要加this即可使用:' + dayjs())},},created() {this.init()},
}
</script>
<style>
</style>

相关文章:

【前端】日期转换

记录项目中需要处理的日期格式 默认vue2 初级版 将后端传来的数组 [2024/01/29 08:55:18, 2024/01/29 09:55:18, 2024/01/29 10:11:18]转为 [2024-01-29 08:55, 2024-01-29 09:55, 2024-01-29 10:11]方法 convertDateTimeFormat(arr) {var tempArr arr.map(function (dateT…...

Git 怎么设置用户的权限

在团队协作的软件开发中&#xff0c;对于版本控制系统Git来说&#xff0c;确保代码与数据的安全性至关重要。为了实现这一目标&#xff0c;Git提供了灵活且可定制的用户权限管理机制。下面将简单的探讨一下Git如何设置用户的权限&#xff0c;以及如何保护代码和数据。 用户身份…...

大端和小端模式介绍

介绍 “大端”和“小端”通常指的是字节序&#xff08;Byte Order&#xff09;的两种类型&#xff0c;也被称为端序&#xff08;Endianness&#xff09;。在多字节的数据类型&#xff08;如整数&#xff09;中&#xff0c;字节可以以不同的顺序存储&#xff0c;这影响了计算机…...

【vue】报错 Duplicate keys detected 解决方案

错误描述&#xff1a;Duplicate keys detected. This may cause an update error.错误直译&#xff1a;检测到重复的键。这可能会导致错误。错误原因&#xff1a;有相同父元素的多个子元素的v-for有相同的key值。 解决方法&#xff1a; return:{dataList:[{name:张三&#xf…...

机器学习_13_SVM支持向量机、感知器模型

文章目录 1 感知器模型1.1 感知器的思想1.2 感知器模型构建1.3 损失函数构建、求解 2 SVM3 线性可分SVM3.1 线性可分SVM—概念3.2 线性可分SVM —SVM 模型公式表示3.3 线性可分SVM —SVM 损失函数3.4 优化函数求解3.5 线性可分SVM—算法流程3.6 线性可分SVM—案例3.7 线性可分S…...

OpenCV学习记录——轮廓检测

文章目录 前言一、寻找、绘制轮廓二、具体应用代码 前言 寻找目标图像的轮廓并绘制出该轮廓是我们进行图像识别时常用的手段&#xff0c;轮廓是图像中连续的边界线&#xff0c;可以用于物体检测、形状分析等应用。为了获取更高的准确性&#xff0c;会先进行二值化处理&#xff…...

FreeRTOS任务挂起以及延时部分源码分析

layout: post title: “任务状态” date: 2023-7-19 15:39:08 0800 tags: FreeRTOS 任务状态 fireRTOS代码分析 任务挂起 //把一个任务挂起 void vTaskSuspend( TaskHandle_t xTaskToSuspend ) {TCB_t *pxTCB;taskENTER_CRITICAL();//进入临界区{/* 参数是NULL的时候设置为当…...

oracle数据库慢查询SQL

目录 场景&#xff1a; 环境&#xff1a; 慢SQL查询一&#xff1a; 问题一&#xff1a;办件列表查询慢 分析&#xff1a; 解决方法&#xff1a; 问题二&#xff1a;系统性卡顿 分析&#xff1a; 解决方法&#xff1a; 慢SQL查询二 扩展&#xff1a; 场景&#xff1a; 线…...

C语言搭配EasyX实现贪吃蛇小游戏

封面展示 内部展示 完整代码 #define _CRT_SECURE_NO_WARNINGS #include<easyx.h> #include<stdio.h> #include<mmsystem.h> #pragma comment (lib,"winmm.lib") #define width 40//宽有40个格子 #define height 30//长有40个格子 #define size 2…...

# 软件安装-Linux搭建nginx(单机版)

软件安装-Linux搭建nginx(单机版) 安装版本:nginx-1.24.0 文章目录 软件安装-Linux搭建nginx(单机版)一、Nginx包下载二、创建用户1.新建组和用户2.设置用户密码3.登录自己创建的目录三、安装依赖组件四、安装Nginx五、启动Nginx六、配置Nginx一、Nginx包下载 1. nginx-1.24下…...

成熟的汽车制造供应商协同平台 要具备哪些功能特性?

汽车行业是一个产业链长且“重”的行业&#xff0c;整个业务流程包括了研发、设计、采购、库存、生产、销售、售后等一系列环节&#xff0c;在每一个环节都涉及到很多信息交换的需求。对内要保证研发、采购、营销等业务环节信息流通高效安全&#xff0c;对外要与上、下游合作伙…...

React16源码: React中处理ref的核心流程源码实现

ref的实现过程 1 &#xff09;概述 在更新流程当中如何去设置ref上面的对象的过程在我们创建fiber的时候去处理ref这个属性那我们什么时候创建fiber对象? 就是我们去更新某一个节点&#xff0c;然后要去调和它的子节点的时候这个时候我们会对每一个子节点去创建这个fiber对象…...

ref和reactive

看尤雨溪说&#xff1a;为什么Vue3 中应该使用 Ref 而不是 Reactive&#xff1f;...

掌握数据预测的艺术:线性回归模型详解

线性回归是统计学中用于建模两个或多个变量之间线性关系的一种方法,广泛应用于数据分析、机器学习等领域。从数学建模的角度出发,线性回归旨在找到一个线性方程,最好地描述自变量(或称为解释变量、特征变量)和因变量(或称为目标变量)之间的关系。本文将通过Python代码示…...

STM32F407移植OpenHarmony笔记8

继上一篇笔记&#xff0c;成功开启了littlefs文件系统&#xff0c;能读写FLASH上的文件了。 今天继续研究网络功能&#xff0c;让控制台的ping命令能工作。 轻量级系统使用的是liteos_m内核lwip协议栈实现网络功能&#xff0c;需要进行配置开启lwip支持。 lwip的移植分为两部分…...

C++:输入流/输出流

C流类库简介 C为了克服C语言中的scanf和printf存在的缺点。&#xff0c;使用cin/cout控制输入/输出。 cin&#xff1a;表示标准输入的istream类对象&#xff0c;cin从终端读入数据。cout&#xff1a;表示标准输出的ostream类对象&#xff0c;cout向终端写数据。cerr&#xff…...

十、Qt三维图表

一、Data Visualization模块概述 Data Visualization的三维显示功能主要有三种三维图形来实现&#xff0c;三各类的父类都是QAbstract3DGraph&#xff0c;从QWindow继承而来。这三类分别是&#xff1a;三维柱状图Q3DBar三维空间散点Q3DScatter三维曲面Q3DSurface 1、相关类的…...

CMake官方教程中文翻译 Step 6: Adding Support for a Testing Dashboard

鉴于自己破烂的英语&#xff0c;所以把cmake的官方文档用 谷歌翻译 翻译下来方便查看。 英语好的同学建议直接去看cmake官方文档&#xff08;英文&#xff09;学习&#xff1a;地址 点这里 或复制&#xff1a;https://cmake.org/cmake/help/latest/guide/tutorial/index.html …...

【leetcode】完全背包总结

本文内容参考了代码随想录&#xff0c;并进行了自己的总结。 完全背包 关键点 ● 每件物品有若干种状态&#xff1a;不选、选 1 件、选 2 件、…、选 n 件 代码 在代码上&#xff0c;只有重量的遍历方向和 01 背包不一样&#xff1a; for(int i 0; i < nums.length; i…...

【Linux】理解系统中一个被打开的文件

文件系统 前言一、C语言文件接口二、系统文件接口三、文件描述符四、struct file 对象五、stdin、stdout、stderr六、文件描述符的分配规则七、重定向1. 重定向的原理2. dup23. 重谈 stderr 八、缓冲区1. 缓冲区基础2. 深入理解缓冲区3. 用户缓冲区和内核缓冲区4. FILE 前言 首…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

针对药品仓库的效期管理问题,如何利用WMS系统“破局”

案例&#xff1a; 某医药分销企业&#xff0c;主要经营各类药品的批发与零售。由于药品的特殊性&#xff0c;效期管理至关重要&#xff0c;但该企业一直面临效期问题的困扰。在未使用WMS系统之前&#xff0c;其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...

算法—栈系列

一&#xff1a;删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...

起重机起升机构的安全装置有哪些?

起重机起升机构的安全装置是保障吊装作业安全的关键部件&#xff0c;主要用于防止超载、失控、断绳等危险情况。以下是常见的安全装置及其功能和原理&#xff1a; 一、超载保护装置&#xff08;核心安全装置&#xff09; 1. 起重量限制器 功能&#xff1a;实时监测起升载荷&a…...

FTXUI::Dom 模块

DOM 模块定义了分层的 FTXUI::Element 树&#xff0c;可用于构建复杂的终端界面&#xff0c;支持响应终端尺寸变化。 namespace ftxui {...// 定义文档 定义布局盒子 Element document vbox({// 设置文本 设置加粗 设置文本颜色text("The window") | bold | color(…...