一:显示年月

<el-date-picker v-model="selectMonth" type="month" placeholder="选择月"   @change="jobSearch" value-format="yyyy-MM"></el-date-picker>

js代码:

<script>
export default {
data() {
return {
selectMonth:''
}
},
created() {
this.initData({});
},
methods: {
jobSearch() {
this.getJobListByMonth();
},
async initData(data) {
//获取当前时间
var now = new Date();
var monthn = now.getMonth()+1;
var yearn = now.getFullYear();
this.selectMonth = yearn+"-"+monthn; this.selectUser = parseInt(sessionStorage.getItem("userid"));
// this.getWeekJobList({
// userid: sessionStorage.getItem("userid"),
// weekid: "1"
// });
this.getJobListByMonth();
},
async getJobListByMonth(data) { }
}
}
</script>

二:选择年月日

<el-date-picker v-model="selectDay" type="date" placeholder="选择日" @change="dataSearch" value-format="yyyy-MM-dd"></el-date-picker>

js代码:

<script>
export default {
data() {
return {
selectDay:''
}
},
created() {
this.initData({});
},
methods: {
dataSearch() {
this.getListByDay();
},
async initData(data) {
//获取当前时间
var now = new Date();
var monthn = now.getMonth()+1;
var yearn = now.getFullYear();
var dayn = now.getDate();
this.selectDay = yearn+"-"+monthn+"-"+dayn; this.selectUser = parseInt(sessionStorage.getItem("userid"));
this.getListByDay();
},
async getListByDay(data) { }
}
}
</script>

三:显示年月日时分(秒)

<el-date-picker v-model="selectDatetime" type="datetime" placeholder="选择时间" @change="dataSearch" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"></el-date-picker>

js代码:

<script>
export default {
data() {
return {
selectDatetime:''
}
},
created() {
this.initData({});
},
methods: {
dataSearch() {
this.getListByDataTime();
},
async initData(data) {
//获取当前时间
var now = new Date();
var monthn = now.getMonth()+1;
var yearn = now.getFullYear();
var dayn = now.getDate();
var h = now.getHours();
var m =now.getMinutes();
var s = now.getSeconds();
this.selectDatetime = yearn+"-"+monthn+"-"+dayn+" "+h+":"+m+":"+s; this.selectUser = parseInt(sessionStorage.getItem("userid"));
this.getListByDataTime();
},
async getListByDataTime(data) { }
}
}
</script>

Vue el-date-picker 日期组件的使用的更多相关文章

  1. vue框架中的日期组件转换为yyy-mm-dd格式

    最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式

  2. Vue.js 相关知识(组件)

    1. 组件介绍 组件(component),vue.js最强大的功能之一 作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体 根组件:我们实例化的Vue对象就是一个组件 ...

  3. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  4. Vue.js学习笔记--4. 组件的基本使用

    整理自官网教程 -- https://cn.vuejs.org/ 1. 所有Vue组件同时也都是Vue实例,分为全局组件和局部组件,注册方式如下. <div id="app" ...

  5. VUE 日期组件(包括年选择)

    封装vant 日期组件实现可以选择年份 <template> <div class="yearMonMain"> <div class="l ...

  6. vue自定义日期组件

    vue-datepicker 基于 vuejs 2.x 可自定义主题的日期组件 github Usage 只需要在项目中加入 calendar.vue,就可以使用了. 向组件传入 prop 即可改变 ...

  7. vue 移动端轻量日期组件不依赖第三方库

    Vue版移动端日期选择组件 1.优点:不需要依赖其他第三方库,灵活可配置: 不需要依赖第三方组件的vue日期移动端组件  小轮子 轻量可复用:  https://github.com/BeckReed ...

  8. 测试开发【提测平台】分享12-掌握日期组件&列表状态格式化最终实现提测管理多条件搜索展示功能

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 本章内容思维导图如下,由于需要各种状态下的菜单操作,所以需要先实现提测信息的列表基础页面,然后再推进其他需求开发 基本知识点学习 Date ...

  9. asp.net使用My97 Date Picker时设置默认起始时间为n年之前的今天

    可以使用My97 Date Picker组件来收集用户输入的日期值. 首先下载该组件:http://www.my97.net/dp/index.asp放到自己的项目中. 然后在项目里面引用js和css ...

  10. asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题

    刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...

随机推荐

  1. java秒杀系列(1)- 秒杀方案总体思路

    前言 首先,要明确一点,高并发场景下系统的瓶颈出现在哪里,其实主要就是数据库,那么就要想办法为数据库做层层防护,减轻数据库的压力. 一.简单图示 我用一个比较简单直观的图来表达大概的处理思路 二.生产 ...

  2. R-B Tree

    1.简介 R-B Tree,全称Red-Black Tree,又称为"红黑树",为一种自平衡二叉查找树(特殊的平衡二叉树,都是在插入和删除操作时通过特定操作保持二叉树的平衡,从而获 ...

  3. Base64补充

    1.Base64简单说明 描述:Base64可以成为密码学的基石,非常重要. 特点:可以将任意的二进制数据进行Base64编码 结果:所有的数据都能被编码为并只用65个字符就能表示的文本文件. 65字 ...

  4. JVM学习一:常用JVM配置参数

    原文链接:https://www.cnblogs.com/pony1223/p/8661219.html 在IDE的后台打印GC日志: 既然学习JVM,阅读GC日志是处理Java虚拟机内存问题的基础技 ...

  5. Myeclipse设置关键词自动提示功能以及取消空格和"="的自动补全

    一.设置Myeclipse从a~z的自动提示功能 1. "window"→"Preferences"2. 选择"Java",展开," ...

  6. #pragma mark指令

    1.#pragma mark指令的使用 功能:简单来说就是对代码的分组,方便代码查找和导航用的 它们告诉Xcode编译器,要在编辑器窗格顶部的方法和函数弹出菜单中将代码分隔开.一些类(尤其是一些控制器 ...

  7. 利用redis+AOP简单处理MQ冥等问题

    思路: 1.利用redis内部的串行执行特性,使用getandset()处理分布式问题; 2.注解提供入参选择,通过数据抽取后计算MD5值,实现业务性值的冥等: 代码区: 1.注解 1 /** 2 * ...

  8. 社交网络分析的 R 基础:(五)图的导入与简单分析

    如何将存储在磁盘上的邻接矩阵输入到 R 程序中,是进行社交网络分析的起点.在前面的章节中已经介绍了基本的数据结构以及代码结构,本章将会面对一个实质性问题,学习如何导入一个图以及计算图的一些属性. 图的 ...

  9. 一个好用的多方隐私求交算法库JasonCeng/MultipartyPSI-Pro

    Github链接传送:JasonCeng/MultipartyPSI-Pro 大家好,我是阿创,这是我的第29篇原创文章. 今天是一篇纯技术性文章,希望对工程狮们有所帮助. 向大家推荐一个我最近改造的 ...

  10. java常用类,包装类,String类的理解和创建对象以及StringBuilder和StringBuffer之间的区别联系

    一.包装类的分类: 1.黄色部分的父类为Number 继承关系: Boolean Character 其他六个基本数据类型 2.装箱和拆箱 理解:一个例子,其他的都相同 装箱:Integer inte ...