首页 > 其他分享 >vue中使用Moment日期格式化

vue中使用Moment日期格式化

时间:2022-09-05 13:55:17浏览次数:79  
标签:10 vue 格式化 format 05 moment Moment 2021 15

vue中使用Moment日期格式化

moment.js是一个JavaScript 日期处理类库。

由于用ant design日期组件取得的值是moment类型,而往数据库中保存需要的是字符串类型.这里就用到了moment日期转换

Moment.js官网:http://momentjs.cn/

安装插件

npm install moment

format就是格式化函数,参数’YYYY-MM-DD HH:mm:ss’定义了返回日期的格式

转换示例

日期格式化

moment().format('MMMM Do YYYY, h:mm:ss a'); // 十月 22日 2021, 3:05:48 下午
moment().format('dddd');                    // 星期五
moment().format("MMM Do YY");               // 10月 22日 21
moment().format('YYYY [escaped] YYYY');     // 2021 escaped 2021
moment().format();                          // 2021-10-22T15:05:48+08:00

相对时间

moment("20111031", "YYYYMMDD").fromNow(); // 10 年前
moment("20120620", "YYYYMMDD").fromNow(); // 9 年前
moment().startOf('day').fromNow();        // 15 小时前
moment().endOf('day').fromNow();          // 9 小时内
moment().startOf('hour').fromNow();       // 6 分钟前

日历时间

moment().subtract(10, 'days').calendar(); // 2021/10/12
moment().subtract(6, 'days').calendar();  // 上星期六15:05
moment().subtract(3, 'days').calendar();  // 上星期二15:05
moment().subtract(1, 'days').calendar();  // 昨天15:05
moment().calendar();                      // 今天15:05
moment().add(1, 'days').calendar();       // 明天15:05
moment().add(3, 'days').calendar();       // 下星期一15:05
moment().add(10, 'days').calendar();      // 2021/11/01

多语言支持

moment.locale();         // zh-cn
moment().format('LT');   // 15:05
moment().format('LTS');  // 15:05:48
moment().format('L');    // 2021/10/22
moment().format('l');    // 2021/10/22
moment().format('LL');   // 2021年10月22日
moment().format('ll');   // 2021年10月22日
moment().format('LLL');  // 2021年10月22日下午3点05分
moment().format('lll');  // 2021年10月22日 15:05
moment().format('LLLL'); // 2021年10月22日星期五下午3点05分
moment().format('llll'); // 2021年10月22日星期五 15:05

antdesign

import moment from 'moment'
async function GetFySortTitle() {
  
  await article.GetFyTitleAsync(1, 1000, true, false).then((result: any) => {
  //遍历日期
    result.data.forEach((res: any) => {
      res.timeCreate = moment(res.timeCreate).format('YYYY-MM-DD')
      res.timeModified = moment(res.timeModified).format('YYYY-MM-DD')
    })
    state.dataResult = result.data
  })
}

函数封装

//封装momentData
function momentData(result: any) {
  result.data.forEach((res: any) => {
    res.timeCreate = moment(res.timeCreate).format('YYYY-MM-DD')
    res.timeModified = moment(res.timeModified).format('YYYY-MM-DD')
  })
}
//调用
momentData(result)

标签:10,vue,格式化,format,05,moment,Moment,2021,15
From: https://www.cnblogs.com/ouyangkai/p/16657872.html

相关文章

  • 关于vuex的个人理解
    Vuex数据状态持久化的插件(vuex-persistedstate--save)在store项目下的index,js使用 importcreatePersistedStatefrom"vuex-persistedstate"1.store:{}存储变量,(vue......
  • vue3——readonly 与 shallowReadonly
    readonly:让一个响应式数据变为只读的(深只读)。shallowReadonly:让一个响应式数据变为只读的(浅只读,只读第一层)。isReadonly:判断一个数据是不是只读数据应用场景:......
  • 063_末晨曦Vue技术_过渡 & 动画之显性的过渡持续时间
    显性的过渡持续时间点击打开视频讲解更加详细在很多情况下,Vue可以自动得出过渡效果的完成时机。默认情况下,Vue会等待其在过渡效果的根元素的第一个transitionend或a......
  • vue项目里地图组件截图快照的实现方法---html2Canvas
    一、前言最近项目里要求要把当前地图截图展示在小窗里,之前没接触这种请求,于是我就百度了一下,发现有这么一块插件html2Canvas,它能够将dom元素转换成canvas进行截图保存,而......
  • vue+websocket
    一、websocket是什么WebSocket通信协议于2011年被IETF定为标准RFC6455,并由RFC7936补充规范。WebSocketAPI也被[W3C]定为标准。它算是html5规范中的一个部分,算是一种协......
  • vue3——shallowReactive 与 shallowRef
    shallowReactive:只处理对象最外层属性的响应式(浅响应式)。shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理。什么时候使用?如果有一个对象数据,结......
  • JavaScript日期处理类库-Moment.js
    JavaScript日期处理类库-Moment.js参考链接日期格式化moment().format('MMMMDoYYYY,h:mm:ssa');//九月5日2022,10:00:10上午moment().format('dddd');......
  • 在 Ruby/Rails 中重新格式化时间戳
    在Ruby/Rails中重新格式化时间戳ImagebyPexels,PixaBay.com,LicensedunderCC0任何在Ruby/Rails应用程序上工作的程序员都见过t.timestamps在他们的Active......
  • vue3——toRef
    一.ref与toRef的区别:ref:复制,修改响应式数据不会影响原始数据toRef引用,修改响应式数据会影响原始数据ref:数据发生改变,界面会自动更新toRef:数据发生改变,界面也不会自......
  • Vue学习之--------深入理解Vuex之getters、mapState、mapGetters(2022/9/3)
    这一篇博客的内容是在上一篇博客的基础上进行:深入理解Vuex、原理详解、实战应用@目录1、getters的使用1.1概念1.2用法1.3如何读取数据2、getters在项目中的实际应用3......