<template>
<div id="app" style="text-align: center;">
<h1>{{ msg | format}}</h1>
</div>
</template> <script>
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
export default {
name: 'app',
data () {
return {
msg: new Date
}
},
filters:{
format(val){
// return moment(val).calendar() //默认为英文、引入后设置格式
// return moment(val).format('YYYY年MM月DD日') //自定义方案1,简写:LL 或 ll
// return moment(val).format('YYYY-MM-DD HH:mm:ss') //大写HH为24小时制,小写dd为星期
// return moment(val).format('hh:mm:ss a') //12小时制
// return moment(val).format('YYYYMMDDHHmmss') //纯数字日期
// return moment(val).subtract(1, "days").format("YYYY-MM-DD HH:mm:ss") //1天前(add:后):weeks、months、years、hours、minutes、seconds
// return moment(val).format("LLLL") //全中文日期
// return moment(val).format("dddd") //获取星期
// return moment(val).valueOf() //完整的时间戳
// return moment(val).format('X') //秒结尾
// return moment(val).format('x') //毫秒结尾
return moment(val).format('LLLL')
}
}
}
</script>

常用时间范围设置:

//获取本日、本周week、本月month、本年year,注意没有yesterday,可以通过subtract(1,'days')设置,这里带xxx-s!!!
const startDate = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');
const startDate = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');

如果是从今天开始到80年后:

[moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),moment().endOf('day').add(80, "years").format('YYYY-MM-DD HH:mm:ss')],// 当前时间2019-12-25 00:00:00——2099-12-31 23:59:59

【模板】:

const pickerOptionsTime = {
shortcuts: [
{
text: '昨天',
onClick (picker) {
const date = [moment().startOf('day').subtract(1, "days").format('YYYY-MM-DD HH:mm:ss'),moment().endOf('day').subtract(1, "days").format('YYYY-MM-DD HH:mm:ss')]
picker.$emit('pick', date)
}
}, {
text: '当天',
onClick (picker) {
const date = [moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')]
picker.$emit('pick', date)
}
}, {
text: '本周',
onClick (picker) {
const date = [moment().startOf('week').format('YYYY-MM-DD HH:mm:ss'),moment().endOf('week').format('YYYY-MM-DD HH:mm:ss')]
picker.$emit('pick', date)
}
}
]
}

封装的elementUI搜索表单:

<template>
<div class="search-text-form">
<el-form style="display:inline-block" inline :model="param" :rules="rules" ref="param">
<el-form-item label="起止时间:" class="search-text-form-item" prop="time">
<el-date-picker
clearable
id="popover_select_time"
v-model="param.time"
type="datetimerange"
:picker-options="pickerOptions"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:default-time="['00:00:00', '23:59:59']"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</el-form-item>
<el-form-item label="任务状态:" class="search-text-form-item" prop="status">
<el-select
id="popover_select_status"
v-model="param.status"
placeholder="请选择任务状态"
clearable
>
<el-option
style="text-align: center;"
v-for="(item,index) in statusOptions"
:key="index"
:label="item.cname"
:value="item.ename"
/>
</el-select>
</el-form-item>
<el-form-item label="关键字:" class="search-text-form-item" prop="kwd">
<el-input
id="popover_select_kwd"
style="width: 180px;"
v-model="param.kwd"
placeholder="多个关键字,使用空格分开"
clearable
/>
</el-form-item>
<el-form-item class="search-text-form-item">
<el-button
round
id="popover_select_clear"
:disabled="disabledSearch"
@click="searchFormChange('clear')"
>清空</el-button>
<el-button
round
id="popover_select_search"
style="float: right"
type="primary"
plain
@click="searchFormChange(param)"
>查询</el-button>
</el-form-item>
</el-form>
</div>
</template> <script>
import { pickerOptionsTime } from "@/utils/appManage"; // 公共的匹配值
export default {
props: {
param: {
type: Object,
default() {
return {
time: [],
status: "",
kwd: ""
};
}
}
},
computed: {
rules(){
return {
time: [
{ required: false, message: '请选择起止时间', trigger: 'select' ,type:'array'}
],
status: [
{ required: true, message: '请选择任务状态', trigger: 'select'}
],
kwd: [
{ required: false, message: '空格隔开,不可为空', trigger: 'blur' }
]
}
},
statusOptions(){
return [
{cname:'成功',ename:'success'},
{cname:'失败',ename:'fail'},
{cname:'运行中',ename:'running'},
{cname:'待调度',ename:'tobescheduled'},
{cname:'已终止',ename:'killed'},
]
},
pickerOptions(){
return pickerOptionsTime ||[]
},
disabledSearch() {
return !(this.param.status || this.param.kwd || (Array.isArray(this.param.time) && this.param.time.length > 0)
);
}
},
methods: {
searchFormChange(val) {
console.log(val,6666);
if(val==='clear'){
for(let key in this.param){
this.param[key] = key==='time'?[]:''
}
}else{
this.$refs['param'].validate((valid) => {
if (valid) {
this.$emit('call-back',val)
}
})
}
}
},
};
</script>

moment——日期格式化常用示例的更多相关文章

  1. 一个JS的日期格式化算法示例

    一个JS的日期格式化算法. 例子: <script> /** * Js日期格式化算法实例 * by www.jbxue.com */ function dateFormat(date, f ...

  2. python 日期格式化常用标记

    符号   说明             例子    %a  英文星期的简写 Mon  %A  英文星期的完整编写 Monday  %b  英文月份的简写 Jun  %B  英文月份的完整编写 June ...

  3. Java自学-日期 日期格式化

    Java中使用SimpleDateFormat 进行日期格式化类 SimpleDateFormat 日期格式化类 示例 1 : 日期转字符串 y 代表年 M 代表月 d 代表日 H 代表24进制的小时 ...

  4. 常用SQL之日期格式化和查询重复数据

    本文列举一些工作中常用的SQL,以提升工作效率. 1 日期格式化 使用 DATE_FORMAT(get_date, '%Y-%m-%d') 函数进行格式化.其中:get_date 是需要被格式化的字段 ...

  5. Java SE基础部分——常用类库之SimpleDateFormat(日期格式化)

    取得当前日期,并按照不同日期格式化输入.代码如下: // 20160618 SimpleDateFomat类的使用 日期格式化 练习 package MyPackage; //自己定义的包 impor ...

  6. javascript常用开发笔记:一个简单强大的js日期格式化方法

    前言:一直没找到好用的javascript日期格式化工具,自己写了一个,方便以后复用 1.主要功能 (1)支持任意顺序的日期格式排列:yyyy=年,MM=月,dd=日,HH=时,mm=分,ss=秒,s ...

  7. django datetime format 日期格式化

    django datetime format 日期格式化 www.jx-lab.com python 中 date,datetime,time对象都支持strftime(format)方法,但有一些区 ...

  8. php日期格式化方法详解

    php日期格式化一般使用date()来完成,此函数的声明及定义如下图所示,其参数有很多,这里按常用的年.月.日.时.分.秒.星期来简单介绍. date(format,timestamp) 一.年.月. ...

  9. C# DateTime日期格式化

    在C#中DateTime是一个包含日期.时间的类型,此类型通过ToString()转换为字符串时,可根据传入给Tostring()的参数转换为多种字符串格式. 目录 1. 分类 2. 制式类型 3. ...

随机推荐

  1. 在 kubernetes 集群中部署一套 web 网站(网页内容不限)

    环境准备 一台部署节点,一台master节点,还有两台节点node1,node2 完好的k8s集群环境 思路一: 在node1和node2节点上通过宿主机与容器之间目录映射和端口映射上线静态网站(或动 ...

  2. Java基础教程:IDEA单元测试

    Java基础教程:IDEA单元测试 环境配置 使用idea IDE 进行单元测试,首先需要安装JUnit 插件. 安装JUnit插件步骤 File-->settings-->Plguins ...

  3. sed练习,一些sed常用方法

    1.复制/etc/rc.d/rc.local 文件至/tmp目录,将/tmp/rc.sysinit文件中的以至少一个空白字符开头的行的行首加#. sed -ri 's/^ +/#/g'  rc.loc ...

  4. 日常工作问题解决:centos7下使用yum安装软件报yum.pid锁定

    问题描述: 在centos7下使用yum进行软件安装时报yum.pid已经被锁定,如下所示: [root@centos7-129 ~]# yum -y install dhcp 已加载插件:faste ...

  5. [CF37D]Lesson Timetable_动态规划

    Lesson Timetable 题目链接:https://www.codeforces.com/contest/37/problem/D 数据范围:略. 题解: 根本就没想到可以动态规划. 首先从前 ...

  6. 转:SLAM算法解析:抓住视觉SLAM难点,了解技术发展大趋势

    SLAM(Simultaneous Localization and Mapping)是业界公认视觉领域空间定位技术的前沿方向,中文译名为“同步定位与地图构建”,它主要用于解决机器人在未知环境运动时的 ...

  7. [转帖]超详细的EXPDP、IMPDP规范及常用技巧总结

    超详细的EXPDP.IMPDP规范及常用技巧总结 https://www.toutiao.com/i6727232212850180619/ 原创 波波说运维 2019-08-24 00:06:00 ...

  8. python 脚本定时删除 elk索引

    脚本如下 一.python 脚本如下 #! /usr/bin/python # -*- coding=utf-8 -*- import urllib import urllib.request imp ...

  9. CSV文件导入数据库和导出数据库

    实例一: <?php $filename = 'test'; //导出文件 header("Content-type: application/vnd.ms-excel; charse ...

  10. Python--jsonpath

    JsonPath是一种信息抽取类库,是从JSON文档中抽取指定信息的工具,提供多种原因实现保本:JavaScript/Python/PHP和Java. 使用方法如: import jsonpathre ...