VUE 日期组件(包括年选择)
封装vant 日期组件实现可以选择年份
<template>
<div class="yearMonMain">
<div class="label">{{ label }}</div>
<div class="content" @click="onShowDatePicker">
{{ date }}
<van-icon name="arrow-up" v-if="showDatePicker == true" />
<van-icon name="arrow-down" v-else />
</div>
<van-popup v-model="showDatePicker" position="bottom" ref="pop">
<van-picker
v-if="type == 'year'"
ref="yearPicker"
title="请选择年"
show-toolbar
:columns="yearList"
@confirm="onConfirmYear"
@cancel="onCancel"
/>
<van-datetime-picker
v-else
v-model="currentDate"
:type="type"
:title="title"
:max-date="maxDate"
:min-date="minDate"
@confirm="onConfirm"
@cancel="onCancel"
:formatter="formatter"
/>
</van-popup>
</div>
</template> <script>
export default {
name: "YearMonthSel",
data() {
let yearList = []
let year = new Date().getFullYear()
let month = new Date().getMonth() + 1
let currentDate = new Date()
// console.log("YearMonthSel defaultValue===", this.defaultValue)
if (this.defaultValue) {
if (this.type == "year") {
year = this.defaultValue
for (let i = 1900; i <= year; i++) {
yearList.push({ code: i, text: i })
}
} else {
year = this.defaultValue[0]
month = this.defaultValue[1]
currentDate = new Date(year, month)
}
} return {
currentDate,
year,
month,
showDatePicker: false,
maxDate: new Date(),
minDate: new Date("1900-01-01"),
yearList,
}
},
props: {
label: {
type: String,
default: "选择年月",
},
title: {
type: String,
default: "选择年月",
},
type: {
type: String,
default: "year-month",
},
defaultValue: {
type: String | Number,
default: "",
},
},
methods: {
formatter(type, val) {
if (type === "year") {
return `${val}年`
} else if (type === "month") {
return `${val}月`
}
return val
},
onShowDatePicker() {
this.showDatePicker = true
setTimeout(() => {
if (this.type == "year") {
const picker = this.$refs.yearPicker //获取组件实例
if (picker) {
picker.setValues([this.year]) //setIndexes()中的参数是一个数组
}
}
})
},
onConfirm(time) {
let date = new Date(time)
let year = date.getFullYear()
let month = date.getMonth() + 1
if (this.year != year || this.month != month) {
this.year = year
this.month = month
this.$emit("onChange", [year, month])
}
this.$emit("onConfirm", [year, month]) this.showDatePicker = false
},
onConfirmYear(v) {
if (this.year != v.code) {
this.year = v.code
this.$emit("onChange", v.code)
}
this.showDatePicker = false
this.$emit("onConfirm", v.code)
},
onCancel() {
this.showDatePicker = false
},
},
computed: {
date: function() {
switch (this.type) {
case "year":
return this.year + "年"
default:
return this.year + "年" + this.month + "月"
}
},
},
}
</script> <style lang="less" scoped>
.yearMonMain {
width: 100%;
display: flex;
.label {
text-align: center;
max-width: 100px;
color: #646566;
}
}
.content {
flex-grow: 1;
text-align: center;
}
</style>
VUE 日期组件(包括年选择)的更多相关文章
- 使用WdatePicker日期组件时,选择日期后,执行某个方法
WdatePicker({onpicked:function(){alert(123);},dateFmt:'yyyy年MM月dd日',maxDate:'%y-%M-%d'}) 1.onpicked: ...
- vue自定义日期组件
vue-datepicker 基于 vuejs 2.x 可自定义主题的日期组件 github Usage 只需要在项目中加入 calendar.vue,就可以使用了. 向组件传入 prop 即可改变 ...
- vue 移动端轻量日期组件不依赖第三方库
Vue版移动端日期选择组件 1.优点:不需要依赖其他第三方库,灵活可配置: 不需要依赖第三方组件的vue日期移动端组件 小轮子 轻量可复用: https://github.com/BeckReed ...
- iview的table组件中加入超链接组件,可编辑组件,选择组件,日期组件
这篇文章主要介绍了iview的table组件中使用选择框,日期,可编辑表格,超链接等组件. 1.select选择组件 // tableColumn数组响应对象需要传入一个固定的option数组,如果该 ...
- vue自定义可输入的选择框组件
vue自定义可输入的选择框组件 props: 属性 说明 类型 默认值 selectDataList 下拉框中的内容 Array 空数组([]) value 输入框中的内容 String 空字符串(& ...
- 自定义Vue&Element组件,实现用户选择和显示
在我们很多前端业务开发中,往往为了方便,都需要自定义一些用户组件,一个是减少单一页面的代码,提高维护效率:二个也是方便重用.本篇随笔介绍在任务管理操作中,使用自定义Vue&Element组件, ...
- Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...
- vue统计组件库和ui框架
UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI ...
- 测试开发【提测平台】分享12-掌握日期组件&列表状态格式化最终实现提测管理多条件搜索展示功能
微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 本章内容思维导图如下,由于需要各种状态下的菜单操作,所以需要先实现提测信息的列表基础页面,然后再推进其他需求开发 基本知识点学习 Date ...
随机推荐
- Nacos如果加载不到配置文件的Debug
进入 com.alibaba.cloud.nacos.client.NacosPropertySourceLocator#loadApplicationConfiguration 这个方法 com ...
- js技术之input只读功能可以通过js设置readonly
一.input标签 输入项标签,不同type属性,会有不同的显示效果和不同的作用 input标签的属性: disabled:表单项禁用,不可修改值,也不会被提交 readonly:表单项只读,不可修改 ...
- BMZCTF ssrfme
<?php if(isset($_GET) && !empty($_GET)){ $url = $_GET['file']; $path = "upload/" ...
- 10.Flink实时项目之订单维度表关联
1. 维度查询 在上一篇中,我们已经把订单和订单明细表join完,本文将关联订单的其他维度数据,维度关联实际上就是在流中查询存储在 hbase 中的数据表.但是即使通过主键的方式查询,hbase 速度 ...
- Kali Linux 下安装配置MongoDB数据库 ubuntu 下安装配置MongoDB源码安装数据库
Kali Linux 下安装配置MongoDB数据库 1.下载mongodb.tgz 压缩包: 2.解压到:tar -zxvf mongodb.tgz /usr/local/mongodb 3.创 ...
- 《基于.NET Core构建微服务》系列文章(更新至第6篇,最新第7篇,已发布主页候选区)
原文:Building Microservices On .NET Core – Part 1 The Plan 时间:2019年1月14日 作者:Wojciech Suwała, Head Arch ...
- 记一些css 3效果
半透明边框 background-clip: 规定背景的绘制区域 .div { width: 200px; height: 200px; background: blue; border: 10px ...
- 谈谈关于CSS中transform属性之scale
谈谈关于scale属性 scale是什么? 根据W3C定义 ,scale主要是进行缩放和转化: scale能做什么? 1.1px细线 <div class="wrap"> ...
- PAT B1091 N-自守数
输入样例: 3 92 5 233 输出样例: 3 25392 1 25 No '解题思路:判断的时候将结果转换成字符串,判断后面几位数字和输入数字是否相同,掉进了N是从1到10的坑,而不是1到9 ...
- mysql-加密函数
1.PASSWORD(str)一般对用户的密码加密 不可逆 2.MD5(str) 普通加密 不可逆 3.ENCODE(str,pswd_str) 加密函数,结果是一个二进制数,必须使用 BLOB 类型 ...