vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
类别:编程学习 浏览量:611
时间:2022-04-01 21:11:50 vue实现一个炫酷的日历组件
vue利用Moment插件格式化时间的实例代码moment是一款多语言支持的日期处理类库, 在vue中如何使用呢?首先附上官网地址:http://momentjs.cn/, 毕竟查找api才是学习正途!
使用npm命令安装moment
npm install moment --save
在main.js文件里引用moment
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import Moment from 'moment' // 定义全局时间戳过滤器 Vue.filter('formatDate', function(value) { return Moment(value).format('YYYY-MM-DD HH:mm:ss') }) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
在组件里使用
<li class="time">{{item.rateTime | formatDate}}</li>
常用的一些日期格式化方法
日期格式化
moment().format('MMMM Do YYYY, h:mm:ss a'); // 四月 16日 2019, 12:24:48 中午 moment().format('dddd'); // 星期二 moment().format("MMM Do YY"); // 4月 16日 19 moment().format('YYYY [escaped] YYYY'); // 2019 escaped 2019 moment().format(); // 2019-04-16T12:24:48+08:00
相对时间
moment("20111031", "YYYYMMDD").fromNow(); // 7 年前 moment("20120620", "YYYYMMDD").fromNow(); // 7 年前 moment().startOf('day').fromNow(); // 12 小时前 moment().endOf('day').fromNow(); // 12 小时内 moment().startOf('hour').fromNow(); // 28 分钟前
日历时间
moment().subtract(10, 'days').calendar(); // 2019年4月6日 moment().subtract(6, 'days').calendar(); // 上周三中午12点28 moment().subtract(3, 'days').calendar(); // 上周六中午12点28 moment().subtract(1, 'days').calendar(); // 昨天中午12点28分 moment().calendar(); // 今天中午12点28分 moment().add(1, 'days').calendar(); // 明天中午12点28分 moment().add(3, 'days').calendar(); // 本周五中午12点28 moment().add(10, 'days').calendar(); // 2019年4月26日
多语言支持
moment().format('L'); // 2019-04-16 moment().format('l'); // 2019-04-16 moment().format('LL'); // 2019年4月16日 moment().format('ll'); // 2019年4月16日 moment().format('LLL'); // 2019年4月16日中午12点28分 moment().format('lll'); // 2019年4月16日中午12点28分 moment().format('LLLL'); // 2019年4月16日星期二中午12点28分 moment().format('llll'); // 2019年4月16日星期二中午12点28分
说明文档
格式代码 | 说明 | 返回值 |
---|---|---|
YYYY | 四位数字完整表示的年份 | 如:1999 或 2019 |
M | 数字表示的月份,没有前导零 | 1 ~ 12 |
MM | 数字表示的月份,没有前导零 | 01 ~ 12 |
MMM | 三个字母缩写表示的月份 | 一月 ~ 十二月 |
MMMM | 数字表示的月份,没有前导零 | 一月 ~ 十二月 |
M | 月份,完整的文本格式 | 1 ~ 12 |
D | 月份中的第几天,没有前导零 | 1 ~ 31 |
DD | 月份中的第几天,有前导零 | 01 ~ 31 |
d | 星期中的第几天,数字表示 | 0 ~ 6,0 表示周日,6 表示周六 |
ddd | 三个字母表示星期中的第几天 | 星期日 ~ 星期六 |
dddd | 星期几,完整的星期文本 | 星期日 ~ 星期六 |
HH | 小时,24小时制,有前导零 | 00 ~ 23 |
H | 小时,24小时制,无前导零 | 0 ~ 23 |
hh | 小时,12小时制,有前导零 | 00 ~ 12 |
h | 小时,12小时制,无前导零 | 0 ~ 12 |
mm | 分钟,有前导零 | 00 ~ 59 |
m | 分钟,没有前导零 | 0 ~ 59 |
ss | 秒,有前导零 | 01 ~ 59 |
s | 秒,无前导零 | 1 ~ 59 |
总结
到此这篇关于vue利用Moment插件格式化时间的文章就介绍到这了,更多相关vue用Moment格式化时间内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue用于动态切换组件的内置组件(Vue 可拖拽组件Vue Smooth DnD的使用详解)
- vue单元测试实例(Vue-Jest 自动化测试基础配置详解)
- vue动态生成的下拉框如何获取值(Vue 级联下拉框的设计与实现)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- vue代码和element用法(Vue Element前端应用开发之整合ABP框架的前端登录)
- vue实现树形结构菜单(vue递归实现三级菜单)
- vue项目部署到服务器的nginx(Nginx部署vue项目和配置代理的问题解析)
- vue elementui 公共列表组件(Vue Element-ui表单校验规则实现)
- vue和springboot实战项目(vue+spring boot实现校验码功能)
- elementuivue使用技巧(Vue Element前端应用开发之常规Element界面组件)
- vue封装一个功能函数(vue中利用mqtt服务端实现即时通讯的步骤记录)
- vue三种判断条件(Vue中插槽和过滤器的深入讲解)
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- vue自定义列组件(vue自定义表格列的实现过程记录)
- vue3和vue2(Vue3对比Vue2的优点总结)
- vue各种模块(一篇文章学会Vue中间件管道)
- 元宵晚会槽点多,芒果台上来就假唱,岳云鹏不说相声改评书了(元宵晚会槽点多)
- 岳云鹏跟凤凰传奇谈心,说出了人生中最重要的三个人,这才成功(岳云鹏跟凤凰传奇谈心)
- 爱情可以当饭吃吗(爱情能当饭吃吗)
- Top 3 JSHS《运动与健康科学 英文 》跻身SCI体育学期刊世界前三(Top3JSHS运动与健康科学)
- 体坛传媒LOGO全新升级,多元发展迈出坚实步伐(体坛传媒LOGO全新升级)
- 超撩人治愈的绝美水彩,原来出自她之手 一笔一画令无数人沉醉(超撩人治愈的绝美水彩)
热门推荐
- css中三角标(使用css实现三角符号效果)
- pymongo是否线程安全(pymongo中group by的操作方法教程)
- 面试问vue掌握程度如何回答(面试最常问的13种Vue修饰符)
- dedecms关键词功能(DedeCms 5.7 代码高亮实现方法)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- php 5与7有什么改变(php5与php7的区别点总结)
- Ext.DomHelper用法
- css图片颜色提取(解析CSS 提取图片主题色功能小技巧)
- 织梦dedecms加固版需要付费吗(织梦dedecms系统后台安全提示去除方法)
- php系统化框架教程(PHP+swoole+linux实现系统监控和性能优化操作示例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9