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

格式介绍

moment对象

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

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

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

字符串

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

日期对象

通过 new Date() 获得。

Thu Apr 14202220:40:11GMT+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:00moment().endOf(‘year’)设置为今年的12月31号的23:59:59moment().startOf(‘day’);设置为今天的00:00:00moment().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');},}

字符串转换为字符串

<scriptsrc="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-01moment().format('HH:mm:ss');// 示例：00:00:00

获取昨天的字符串

假设今天的日期为

2022-1-1

，将得到

2021-12-31

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

日期转换为moment

const today =newDate()const momentObj =moment(newDate())

原生

新建日期对象

① newDate()
② newDate(year, month, day, hours, minutes, seconds, milliseconds)
③ newDate(milliseconds)
④ newDate(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 =newDate(str1.replace(/-/g,'/'))const result2 =newDate(str2.replace(/-/g,'/'))const result3 =newDate(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 =newDate()
console.log(myDate)// 此时的日期对象
myDate.setDate(myDate.getDate()+1)
console.log(myDate)// 明天此时的日期对象

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

日期对象自增一时

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

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

日期对象-获取当日零点

//获取当天零点的时间const stamp1 =newDate(newDate().setHours(0,0,0,0));//获取当天23:59:59的时间const stamp2 =newDate(newDate().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:ssdateToTime(date){constY= date.getFullYear()+'-'constM=(date.getMonth()+1<10?'0'+(date.getMonth()+1): date.getMonth()+1)+'-'constD= 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()returnY+M+D+ h + m + s
},

// 日期对象转化为 YYYY-MM-DD HH:mmdateToTime1(date){constY= date.getFullYear()+'-'constM=(date.getMonth()+1<10?'0'+(date.getMonth()+1): date.getMonth()+1)+'-'constD= 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()returnY+M+D+ h + m 
},

// 日期对象转化为 HH:mmdateToTime2(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:sstimestampToTime(timestamp){const date =newDate(timestamp)// 时间戳为10位需*1000，时间戳为13位的话不需乘1000constY= date.getFullYear()+'-'constM=(date.getMonth()+1<10?'0'+(date.getMonth()+1): date.getMonth()+1)+'-'constD= 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()returnY+M+D+ h + m + s
},

导出格式：

YYYY-MM-D H:m:s

// 时间戳转化为 YYYY-MM-DD hh:mm:sstimestampToTime(timestamp){const date =newDate(timestamp)// 时间戳为10位需*1000，时间戳为13位的话不需乘1000constY= date.getFullYear()+'-'constM=(date.getMonth()+1<10?'0'+(date.getMonth()+1): date.getMonth()+1)+'-'constD= date.getDate()+' 'const h = date.getHours()+':'const m = date.getMinutes()+':'const s = date.getSeconds()returnY+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 }
 */exportfunctionfomrtatCountDown(time, showDay =true){
  time =parseInt(time /1000)let oneMinute =60let 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位
 */constgetDiffTimes=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 %60if(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

，感谢！