✏️
ougege
  • README
  • Docs
    • index
    • Articles
      • AI
        • 体验Chrome AI
        • 体验Cloudflare Workers AI
        • 体验deepseek
      • CSS
        • CSS优化-PurgeCSS
        • 实用效果
        • 开发常用样式
      • Deepin
        • deepin20安装mysql
        • deepin使用tensorflow入门机器学习
        • deepin安装cuda和cuDNN
        • deepin安装lamp
        • deepin安装nvidia驱动
        • deepin安装oh my Zsh
        • deepin安装p7zip
        • deepin换源
        • 安装deepin系统后要做的事
      • Docker
        • CI/CD搭建配置
        • deepin搭建docker环境
        • docker安装和使用gitlab
        • docker搭建nginx+php环境
      • Essay
        • IOS申请邓白氏编码
        • Markdown-Mermaid
        • Markdown Use
        • webview白屏的问题查找和修复
        • 前端开发对接问题和解决办法汇总
        • 国务院机构改革方案
        • 国家级智库
        • 实用网站推荐
        • 常用Markdown数学公式语法
        • 强烈推荐前端要安装的vscode扩展
        • 新建销售计划-页面卡死问题分析
        • 海淘入坑手册
        • 竞品研究
        • 足球知识速成
      • Git
        • GitBook安装和常用命令
        • GitKraken免费版本
        • Git安装和配置
        • Git异常处理
        • Git Worktree使用
        • 前端工程化相关的实用git命令
      • JS
        • ESM模块导出方式对比
        • Emoji多端统一处理
        • JS发布订阅模式
        • JS性能优化
        • JS标准内置对象
        • JS链式调用原理
        • Promise介绍和使用
        • Range的使用
        • Vue+Oauth登录实现
        • Vue实现富文本插入Emoji
        • chrome扩展入门
        • es5新特性
        • es6常用特性
        • es常用片段
        • uniapp使用eslint校验代码
        • 与移动端通信
        • 优秀js库moment
        • 使用vue-socketio
        • 实现一个中间件
        • 小程序webview调试
        • 常用snippets
        • 常用正则
        • 常用的设计模式
        • 微信jssdk封装使用
        • 浏览器宏任务和微任务
        • 浏览器的5种Observer
        • 深入理解赋值、浅拷贝、深拷贝
        • 解析vue指令clickoutside源码
        • 键盘事件与KeyBoardWrapper交互
        • 高德地图常用方法封装
        • 高阶函数片段
      • Network
        • 使用Lighthouse分析前端性能
        • 前后端启用https
        • 宝塔nginx安装ngx_brotli
        • 比较gz与br加载速度
        • 浏览器https提示不安全
        • 浏览器提示HSTS
        • 简单使用tcpdump
        • 静态资源gzip优化
      • Node
        • CommonJS模块导出方式对比
        • Taro command not found 多平台解决方案
        • koa使用和API实现
        • node安装报错Unexpected-token
        • 使用nvm和nrm
        • 使用uniapp给小程序添加云函数
        • 使用verdaccio搭建本地npm仓库
        • 使用vue-cli搭建vue项目
        • 安装Node.js和npm配置
        • 编译成cjs和mjs的思路解析
        • 让你的npmPackage同时支持cjs和mjs
        • 通过GithubAction将内容部署到vps
      • Python
        • Python源管理
        • Python版本管理
        • mitmproxy抓包
        • 微信公众平台开发爬坑经历
      • Shell
        • Ubuntu安装deepin桌面环境
        • Ubuntu安装flatpak软件
        • Ubuntu安装wireshark
        • Ubuntu常见问题汇总
        • dell G3装系统无法识别第二块硬盘
        • linux下virtualbox用gho还原系统
        • mysql常用命令
        • navicat连接一键集成环境的mysql
        • nginx常用命令
        • pm2常用命令
        • virtualbox虚拟机和宿主机互相复制粘贴
        • vps内资源通过mega快传到本地
        • vps报错temporary failure in name resolution
        • vscode修改文件监控数
        • windows+linux双系统引导修复
        • zsh常用插件和命令
        • 一键搭建ChatGPT web版
        • 使用V2ray,CloudFlare Warp解锁GPT
        • 使用vscode进行java开发
        • 利用zx和SSHKey发布代码到服务器
        • 反爬虫一些方案总结和尝试
        • 安装1Panel
        • 安装Bt面板
        • 安装Ubuntu22.04后要做的事
        • 无显示器linux设置默认分辨率
        • 特别实用的shell命令
        • 解决linux安装xmind缺少依赖报错
      • Standards
        • CSS格式化之stylelint
        • CSS规范
        • HTML规范
        • JS规范
        • commit规范
        • 使用husky+commitlint规范代码提交
        • 使用semantic-release自动管理版本号
        • 命名规范
        • 图片规范
        • 版本编号规范
      • Wall
        • 科学上网-Cloudflare-Pages
        • 科学上网-Cloudflare-Warp
        • 科学上网-Geph
        • 科学上网-RackNerd
        • 科学上网-Slicehosting
        • 科学上网-Surfshark
        • 科学上网-Tor
        • 科学上网-XX-NET
        • 科学上网-heroku
        • 科学上网-shadowsock
        • 科学上网-v2ray使用
        • 科学上网-v2ray搭建
        • 科学上网-浏览器代理
        • 科学上网-让终端走代理
      • Windows
        • SourceTree破解免登录(windows版)
        • git bash交互提示符不工作
        • nexus 7 2013 wifi 刷机
        • tree命令生成文件目录
        • 利用charles抓包app
        • 安装Openssl
        • 安装msi文件报错2503和2502
        • 神器vimium使用说明
        • 自用host
        • 解决win10扩展出来的屏幕模糊
        • 解决安装Adobe Air时发生错误
    • Snippets
      • zsh
        • docker
        • extract
        • git-commit
        • git
        • mysql-macports
        • npm
        • nvm
        • pip
        • pm2
        • systemd
        • ubuntu
        • vscode
Powered by GitBook
On this page
  • 介绍
  • 以往的解决方式
  • moment常用方法
  • 参考

Was this helpful?

  1. Docs
  2. Articles
  3. JS

优秀js库moment

介绍

在工作场景中,我们经常需要处理时间格式,尤其在写 h5 时,需要考虑到 ios 和 安卓 兼容性( ios 不支持 yyyy-MM-dd 格式),以往我们的解决方式是自定义一个 formatDate 方法,现在有了 moment ,更方便了

以往的解决方式

class Type {
  constructor (value) {
    this.typeList = ['Null', 'Undefined', 'Object', 'Array', 'String', 'Number', 'Boolean', 'Function', 'RegExp', 'Date']
    this.init()
  }
  type (value) {
    let s = Object.prototype.toString.call(value)
    return s.match(/\[object (.*?)\]/)[1].toLowerCase()
  }
  // 增加判断类型数据方法
  init () {
    this.typeList.forEach((t) => {
      this['is' + t] = (o) => {
        return this.type(o) === t.toLowerCase()
      }
    })
  }
}

let type = new Type()

function formatDate (dateIn, fmt) {
  if (!fmt) return false
  let newDate = type['isDate'](dateIn) ? dateIn : new Date(dateIn)
  let o = {
    'y+': newDate.getFullYear(), // 年份
    'M+': addZero(newDate.getMonth() + 1), // 月份
    'd+': addZero(newDate.getDate()), // 某一天
    'h+': addZero(newDate.getHours()), // 小时
    'm+': addZero(newDate.getMinutes()), // 分钟
    's+': addZero(newDate.getSeconds()) // 秒
  }
  for (let i in o) {
    if (new RegExp('(' + i + ')').test(fmt)) {
      fmt = fmt.replace(RegExp.$1, o[i])
    }
  }
  return fmt
}

function addZero (e) {
  return Number(e) < 10 ? `0${e}` : e
}

moment常用方法

引入 moment 并初始化

const moment = require('moment')
// 要获取当前的日期和时间,只需调用不带参数的 moment() 即可
var now = moment()
console.log(now)
  1. 时间字符串格式化

    // 支持的 ISO 8601 字符串
    var day = moment('2020-08-24')
    console.log(day)
  2. 格式化令牌

    var day = moment('12-25-1995', 'MM-DD-YYYY')
    console.log(day)
    // 从 2.3.0 版本开始,可以为最后一个参数指定一个布尔值,以使 Moment 使用严格的解析。
    moment('2012-05-25', 'YYYY-MM-DD', true).isValid()

    年份、月份、日期的令牌

    输入
    示例
    描述

    YYYY

    2014

    4 或 2 位数字的年份

    YY

    14

    2 位数字的年份

    Y

    -25

    带有任意数字和符号的年份

    Q

    1..4

    年份的季度。将月份设置为季度的第一个月

    M MM

    1..12

    月份数字

    MMM MMMM

    Jan..December

    语言环境中的月份名称,由 moment.locale() 设置

    D DD

    1..31

    月的某天

    Do

    1st..31st

    月的某天,带序数

    DDD DDDD

    1..365

    年的某天

    X

    1410715640.579

    Unix 时间戳

    x

    1410715640579

    Unix 毫秒时间戳

    周年、星期、工作日的令牌

    输入
    示例
    描述

    gggg

    2014

    语言环境的 4 位数字的周年

    gg

    14

    语言环境的 2 位数字的周年

    w ww

    1..53

    语言环境的年的第几周

    e

    0..6

    语言环境的星期几

    ddd dddd

    Mon...Sunday

    语言环境的星期几的名称,由 moment.locale() 设置

    GGGG

    2014

    ISO 的 4 位数字的周年

    GG

    14

    ISO 的 2 位数字的周年

    W WW

    1..53

    ISO 的年的第几周

    E

    1..7

    ISO 的星期几

    小时、分钟、秒钟、毫秒、偏移量的令牌

    输入
    示例
    描述

    H HH

    0..23

    小时(24 小时制)

    h hh

    1..12

    小时(使用 a A 的 12 小时制)

    k kk

    1..24

    小时(从 1 到 24 的 24 小时制)

    a A

    am pm

    上午或下午(单一字符 a p 也被视为有效)

    m mm

    0..59

    分钟

    s ss

    0..59

    秒钟

    S SS SSS

    0..999

    带分钟的秒钟

    Z ZZ

    +12:00

    从 UTC 偏移为 +-HH:mm、+-HHmm 或 Z

  3. 格式试探

    // 如果不知道输入字符串的确切格式,但是知道它可能是多种格式之一,则可以使用格式数组
    // 使用最后一种格式
    moment('29-06-1995', ['MM-DD-YYYY', 'DD-MM', 'DD-MM-YYYY'])
    // 使用第一种格式
    moment('05-06-1995', ["MM-DD-YYYY", "DD-MM-YYYY"])
  4. moment(Number)

    // 可以通过传入一个整数值来创建 moment,该整数值表示自 Unix 纪元(1970 年 1 月 1 日 12AM UTC)以来的毫秒数
    var day = moment(1318781876406)
    console.log(day)
  5. unix()

    // 从unix,自 Unix 纪元以来的秒数时间戳创建moment
    var day = moment.unix(1318781876)
    // 此函数在本地模式中创建了moment对象,如果需要UTC,则可以随后调用.utc()
    var day = moment.unix(1318781876).utc()
  6. moment(Date)

    // 可以使用预先存在的原生JS Date对象来创建moment
    var day = new Date(2011, 9, 16)
    var dayWrapper = moment(day)
  7. moment(Number[])

    // 可以使用数值的数组(映射传给new Date()的参数)来创建moment
    moment([2010, 1, 14, 15, 25, 50, 125]) // February 14th, 3:25:50.125 PM
    // 年份之后的任何职都是可选的,并且默认认为可能的最小值
    moment([2010])
    moment([2010, 6])
    moment([2010, 6, 10])
    // 如果数组代表的日期不存在,则moment#isValid将会返回false
    moment([2010, 12]).isValid()
    moment([2010, 10, 31]).isValid()
    moment([2010, 1, 29]).isValid()
  8. 克隆

    // 可以调用moment#clone克隆moment
    var a = moment([2012])
    var b = a.clone()
    a.year(2000)
    b.year()

参考

Previous与移动端通信Next使用vue-socketio

Last updated 10 months ago

Was this helpful?

官方仓库
Moment.js 文档