前端常见需求整理 - 日期处理（包含moment、时间戳、日期对象）

格式介绍

moment对象

使用 UI 框架的时间相关组件时（如 ant-design），默认的绑定值的格式往往为这种。

/* 控制台的打印效果 */
Moment {...}

Moment {
  _d: (...)
  _isAMomentObject: true
  _isUTC: (...)
  _isValid: (...)
  _locale: (...)
  _pf: (...)
}

字符串

部分栗子	对应
YYYY-MM-DD HH:mm:ss	2022-04-12 20:30:00
YYYY/MM/DD HH:mm:ss	2022/04/12 20:30:00
YYYY/MM/DD hh:mm:ss	2022/04/12 08:30:00
YYYY/M/D HH:mm:ss	2022/4/12 20:30:00
YYYY/MM/DD HH:mm	2022/04/12 20:30

日期对象

通过 new Date() 获得。

Thu Apr 14 2022 20:40:11 GMT+0800 (中国标准时间)

两个日期对象间可以比较大小

全文本字符串格式

moment.js库

moment自增一天

// 自增一天
moment().add(1,'days')

// 自减一天
moment().subtract(1, 'days')

// 年月时分秒，将第二个参数替换为以下字符串
years months hours minutes seconds

// 同时自增日和月
moment().add({ days:7, months:1 });

moment设置为头尾

表达式	含义
moment().startOf(‘year’)	设置为今年的1月1日的00:00:00
moment().endOf(‘year’)	设置为今年的12月31号的23:59:59
moment().startOf(‘day’);	设置为今天的00:00:00
moment().endOf(‘day’);	设置为今天的23:59:59

类似的参数还有 month、quarter、week、hour、minute、second

moment转换为字符串

import moment from 'moment';

methods: {
  moment,
  handleDemo(momentObj) {
    /* moment 转化为 字符串，如 '2021-12-30 20:00:00' */
    const demo = moment(momentObj).format('YYYY-MM-DD HH:mm:ss')
  },
}

自定义时分秒

startTime = `${moment(start).format('YYYY-MM-DD')} 00:00:00`;
endTime = `${moment(end).format('YYYY-MM-DD')} 23:59:59`;

字符串转换为moment

import moment from 'moment';

methods: {
  moment,
  handleDemo() {
    let demo = '2021-12-30 20:00:00'
    /* 字符串 转化为 moment */
    const startTime = moment(demo, 'YYYY-MM-DD HH:mm:ss');
  },
}

字符串转换为字符串

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js">script>
<script>

var str = '2021/11/15 11:20:00'; 
var momentObj = moment(str, 'YYYY/MM/DD HH:mm:ss'); 
momentObj.format('YYYY-MM-DD');                    // 2021-11-15
momentObj.format('HH:mm:ss');                       // 11:20:00
script>

HH 代表24小时制，hh 代表12小时制

获取当前时间的字符串

moment().format('YYYY-MM-DD'); // 示例：2022-01-01
moment().format('HH:mm:ss');   // 示例：00:00:00

获取昨天的字符串

假设今天的日期为 2022-1-1，将得到 2021-12-31

const today = new Date();
today.setTime(today.getTime() - 24 * 60 * 60 * 1000);  // 减上一天的日期对象
const yesterday = moment(today).format('YYYY-MM-DD');

日期转换为moment

const today = new Date()
const momentObj = moment(new Date())

原生

新建日期对象

① new Date()
② new Date(year, month, day, hours, minutes, seconds, milliseconds)
③ new Date(milliseconds)
④ new Date(date string)

①：用当前日期和时间创建新的日期对象
②：按顺序分别指定年、月、日、小时、分钟、秒和毫秒；至少要有年和月，否则会被视作毫秒
③：创建零时加毫秒的新日期对象

④：从日期字符串创建一个新的日期对象

new Date("October 13, 2014 11:13:00")
new Date("2019-03-02 12:46:00")
new Date("2019-3-2 12:46:00")   // 在某些浏览器中，不带前导零的月或其会产生错误
new Date("2018-02-19")
new Date("2018-02")
new Date("2018")

零时区为 1970 年 1 月 1 日 00:00:00 UTC

JavaScript 从 0 到 11 计算月份；需要注意月份的设置和 getMonth 方法

新建日期对象-适配ios

从日期字符串创建一个新的日期对象时，需要额外注意：

const str1 = '2022-2-12 12:00:00'
const str2 = '2022-02-12 12:00:00'
const str3 = '2022/02/12 12:00:00'

/* 结果相同 */
const result1 = new Date(str1.replace(/-/g, '/'))
const result2 = new Date(str2.replace(/-/g, '/'))
const result3 = new Date(str3.replace(/-/g, '/'))

ios 不能解析 YYYY-MM-DD 的格式，需要转化为 YYYY/MM/DD

日期获取方法

方法	描述
getDate()	获取天（1-31）
getDay()	获取一周的某一天的数字（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

注意：对于 getDay() 的返回值，星期天为 0, 星期一为 1, 以此类推。

日期设置方法

方法	描述
setDate()	以数值（1-31）设置日
setFullYear()	设置年（可选月和日）
setHours()	设置小时（0-23）；必选时，可选分、秒、毫秒；-1为昨天最后时，24为明日首时
setMilliseconds()	设置毫秒（0-999）
setMinutes()	设置分（0-59）
setMonth()	设置月（0-11）
setSeconds()	设置秒（0-59）
setTime()	设置时间（从 1970 年 1 月 1 日至今的毫秒数）

对于 setHours，在 EMCAScript 标准化之前，不支持后面几个参数，也许也不支持-1等。

日期对象自增一天

const myDate = new Date()
console.log(myDate)         // 此时的日期对象
myDate.setDate(myDate.getDate() + 1)
console.log(myDate)         // 明天此时的日期对象

涉及到跨月/跨年时，也会自动处理。

日期对象自增一时

const myDate = new Date()
console.log(myDate) // 此时的日期对象
myDate.setHours(myDate.getHours() + 1)
console.log(myDate) // 一小时后的日期对象

涉及到跨月/跨年/跨日时，也会自动处理。

日期对象-获取当日零点

//获取当天零点的时间
const stamp1 = new Date(new Date().setHours(0, 0, 0, 0)); 

//获取当天23:59:59的时间
const stamp2 = new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1);

日期对象转化为时间戳

毫秒

const timestamp = dateObj.getTime()

日期对象转化为字符串

导出格式： YYYY-MM-DD HH:mm:ss

// 日期对象转化为 YYYY-MM-DD HH:mm:ss
dateToTime (date) {
  const Y = date.getFullYear() + '-'
  const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  const D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
  const h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':'
  const m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':'
  const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
  return Y + M + D + h + m + s
},

// 日期对象转化为 YYYY-MM-DD HH:mm
dateToTime1 (date) {
  const Y = date.getFullYear() + '-'
  const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  const D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
  const h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':'
  const m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
  return Y + M + D + h + m 
},

// 日期对象转化为 HH:mm
dateToTime2 (date) {
  const h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':'
  const m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
  return h + m
},

时间戳加一天

毫秒

const Next = timestamp + 24 * 60 * 60 * 1000

时间戳转化为字符串