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

格式介绍

moment对象

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

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

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

字符串

日期对象

通过 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设置为头尾

🐳 类似的参数还有 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

日期获取方法

注意：对于 getDay() 的返回值，星期天为 0, 星期一为 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

时间戳转化为字符串

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

// 时间戳转化为 YYYY-MM-DD hh:mm:ss
timestampToTime (timestamp) {
  const date = new Date(timestamp) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
  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-D H:m:s

// 时间戳转化为 YYYY-MM-DD hh:mm:ss
timestampToTime (timestamp) {
  const date = new Date(timestamp) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
  const Y = date.getFullYear() + '-'
  const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  const D = date.getDate() + ' '
  const h = date.getHours() + ':'
  const m = date.getMinutes() + ':'
  const s = date.getSeconds()
  return Y + M + D + h + m + s
},

时间戳转(天)时分秒

毫秒

• 默认返回天数，返回格式 ‘1天12:05:00’

• 默认时长小于一天时，返回格式 ‘23:00:00’

• 会将天数、时、分、秒返回，可自由拼接

/**
 * 将时长转成xx天HH:mm:ss格式
 * @param { Number } time 时长，单位ms
 * @param { Boolean } showDay 是否显示【天】
 * @return 返回时间，也可以根据自己需要组装格式，例如{ time2: xxx }
 */
export function fomrtatCountDown(time, showDay = true) {
  time = parseInt(time / 1000)
  let oneMinute = 60
  let oneHour = 60 * oneMinute
  let oneDay = 24 * oneHour
  let day = parseInt(time / oneDay)
  if (showDay) {
    day = day > 0 ? day : ''
    time = time - day * oneDay
  }

  let hour = parseInt(time / oneHour)
  hour = hour >= 10 ? hour : '0' + hour
  time = time - hour * oneHour

  let minute = parseInt(time / oneMinute)
  minute = minute >= 10 ? minute : '0' + minute

  let second = time - minute * oneMinute
  second = second >= 10 ? second : '0' + second
  return {
    time: (showDay && day ? `${day}天` : '') + `${hour}:${minute}:${second}`,
    day,
    hour,
    minute,
    second
  }
}

🐳 如果不需要获取到天，即允许小时数大于23，第二参传false即可。

更多

日期对象差转(天)时分秒

传入今天和明天同一时间（默认），返回 [1, 0, 0, 0]

传入今天和明天同一时间（补位），返回 [‘01’, ‘00’, ‘00’, ‘00’]

/**
 * 得到两个时间相关的天数、小时、分钟、秒
 * @return {Array} 返回数组固定4个
 * @param {Object} startData
 * @param {Object} endDate
 * @param {Boolean} fixed_2 是否将每个单位补为2位
 */
const getDiffTimes = function(startData, endDate, fixed_2 = false) {
  //相差的总秒数
  let totalSeconds = parseInt((endDate - startData) / 1000)
  // 取天数后取模（余数）
  let days = Math.floor(totalSeconds / (60 * 60 * 24))
  let modulo = totalSeconds % (60 * 60 * 24)
  // 取小时数后取模（余数）
  let hours = Math.floor(modulo / (60 * 60))
  modulo = modulo % (60 * 60)
  // 分钟
  let minutes = Math.floor(modulo / 60)
  // 秒（通过取模获取）
  let seconds = modulo % 60
  if (fixed_2) {
    days = days < 10 ? '0' + days : days
    hours = hours < 10 ? '0' + hours : hours
    minutes = minutes < 10 ? '0' + minutes : minutes
    seconds = seconds < 10 ? '0' + seconds : seconds
  }
  //输出到页面
  //console.log(days + "天" + hours + "：" + minutes + "：" + seconds);
  return [days, hours, minutes, seconds]
}

🐳 如果不需要获取两个日期对象间的天数，即允许小时数大于23，去除去天数及其后的取模即可。

补充的话

在仓库，还提供了许多前端常见需求及实现的归纳整理，欢迎客官看看~

如果这篇笔记能够帮助到你，请帮忙在 github 上点亮 star，感谢！文章来源地址https://www.toymoban.com/news/detail-703179.html

到了这里，关于前端常见需求整理 - 日期处理（包含moment、时间戳、日期对象）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！