Vue el-date-picker 日期组件的使用
一:显示年月

<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 日期组件的使用的更多相关文章
- vue框架中的日期组件转换为yyy-mm-dd格式
最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式
- Vue.js 相关知识(组件)
1. 组件介绍 组件(component),vue.js最强大的功能之一 作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体 根组件:我们实例化的Vue对象就是一个组件 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- Vue.js学习笔记--4. 组件的基本使用
整理自官网教程 -- https://cn.vuejs.org/ 1. 所有Vue组件同时也都是Vue实例,分为全局组件和局部组件,注册方式如下. <div id="app" ...
- VUE 日期组件(包括年选择)
封装vant 日期组件实现可以选择年份 <template> <div class="yearMonMain"> <div class="l ...
- vue自定义日期组件
vue-datepicker 基于 vuejs 2.x 可自定义主题的日期组件 github Usage 只需要在项目中加入 calendar.vue,就可以使用了. 向组件传入 prop 即可改变 ...
- vue 移动端轻量日期组件不依赖第三方库
Vue版移动端日期选择组件 1.优点:不需要依赖其他第三方库,灵活可配置: 不需要依赖第三方组件的vue日期移动端组件 小轮子 轻量可复用: https://github.com/BeckReed ...
- 测试开发【提测平台】分享12-掌握日期组件&列表状态格式化最终实现提测管理多条件搜索展示功能
微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 本章内容思维导图如下,由于需要各种状态下的菜单操作,所以需要先实现提测信息的列表基础页面,然后再推进其他需求开发 基本知识点学习 Date ...
- asp.net使用My97 Date Picker时设置默认起始时间为n年之前的今天
可以使用My97 Date Picker组件来收集用户输入的日期值. 首先下载该组件:http://www.my97.net/dp/index.asp放到自己的项目中. 然后在项目里面引用js和css ...
- asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题
刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...
随机推荐
- 近期Android学习
近5天没有更新博客,因为这几天略微放下了python的学习,android这边连带项目比较急迫,先花大约1个星期的时间把重心放在Android,但python肯定还会坚持下去,毕竟连着学了那么久了. ...
- 【存】008 Linux 文件查找 find
01 一起来认识 find! 在 Linux 系统,find 毫无疑问是最强的文件查找工具.find 一般会与其他命令结合,将查找到的结果作为参数传入到后置命令中,进行删除.统计.复制迁移等操作. 0 ...
- Homework_3 (完整版)
划水♂️!好耶! 果然还是逃不过作业,初三刚过就要营业 审题 爬虫+算法:划水中的员工 员工 A 此刻内心一酸,大年初一加班惨绝人寰,情不自禁打开 B 站,跟着网友一起划水看番. 但是由于技术故障原 ...
- Pandas 秘籍·翻译完成
协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远. 在线阅读 ApacheCN 面试求职交流群 724187166 ApacheCN 学习资源 ...
- 出现 error: RPC failed; curl 18 transfer closed with outstanding read data remaining 的原因
最近在做全栈项目,前台后台,服务器端,三端在一个文件夹,当git clone 项目的时候就会出现:error: RPC failed; curl 18 transfer closed with out ...
- Ubuntu安装 php + apache + mysql
转载请注明来源:https://www.cnblogs.com/hookjc/ 1.安装SSH(必须) sudo apt-get install ssh 2.安装MySQL(虽然现在最新版为5.1,但 ...
- kali切换桌面环境
感谢大佬:https://blog.csdn.net/tao546377318/article/details/52353018 kali 是基于Debian的发行版,兼容性和软件支持都很好,默认使用 ...
- play的action链(一个action跳转到另一个action,类似于重定向)
在play中没有Servlet API forward 的等价物.每一个HTTP request只能调用一个action.如果我们需要调用另一个,必须通过重定向,让浏览器访问另一个URL来访问它.这样 ...
- Kubernetes GitOps 工具
Kubernetes GitOps Tools 译自:Kubernetes GitOps Tools 本文很好地介绍了GitOps,并给出了当下比较热门的GitOps工具. 简介 在本文中,将回顾一下 ...
- iOS组件化之-给自己的组件添加资源文件
在 podspec 中,利用 source_files 可以指定要编译的源代码文件.可是,当我们需要把图片.音频.NIB等资源打包进 Pod 时该怎么办呢? 1.如何把资源文件打包为.bundle文件 ...