<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. ubuntu18.04中将刚下载解压的eclipse添加到启动器

    在/usr/share/applications/目录下新建一个名为eclipse.desktop的文件. 文件内容如下: [Desktop Entry] Version=2018.09 Name=E ...

  2. 【转】hr的嘴,骗人的鬼

    入职前,从上往下读,入职后,从下往上读. - 我们非常欢迎新鲜血液补充进我们的团队:- 如果条件太苛刻,我待不久的:- 我们公司绝对不可能这样:- 请问每个月的工作都能按时足额发放吗?- 这难道不是理 ...

  3. 金仓Kingbase数据库网页数据维护分析工具

    金仓Kingbase是优秀的国产数据库产品,在能源,政务,国防等领域广泛使用, 现在TreeSoft数据库管理系统已支持Kingbase了,直接在浏览器中就可以操作查看Kingbase数据了,十分方便 ...

  4. vue+element项目中过滤输入框特殊字符小结

    可以在main.js中写入方法 Vue.prototype.validSe = function (value, number = 255) { value = value.replace(/[`-* ...

  5. 二十四 java 多线程一些知识点

    1:blocked线程和waiting的线程的区别? 如何唤醒? java线程中含有waiting与blocked两种状态: 线程的 blocked状态往往是无法进入同步方法/代码块来完成的(BLOC ...

  6. 帝国cms 批量替换语句

    UPDATE www_92game_net_cnys_ecms_caipu SET titlepic=REPLACE(titlepic,'http://file.92game.net', '') ; ...

  7. IdentityServer4学习笔记汇总(实现传送门在底部)

    前言 互联网时代,对信息和资源的保护越发苛刻,在所有应用中授权和认证是必不可少缺少的一部分.如果一个应用没有授权和认证那么这个应用就是不完整或者说不安全的应用.在.Net平台给我们提供了一套完整的授权 ...

  8. solr新建core

  9. [转载]Oracle中动态SQL详解

    1.静态SQLSQL与动态SQL Oracle编译PL/SQL程序块分为两个种:其一为前期联编(early binding),即SQL语句在程序编译期间就已经确定,大多数的编译情况属于这种类型:另外一 ...

  10. Java面试笔记整理4

    一.Java内存溢出的产生原因和解决办法? java.lang.OutOfMemoryError这个错误我相信大部分开发人员都有遇到过,产生该错误的原因大都出于以下原因:JVM内存过小.程序不严密,产 ...