日期选择器多选换行

这篇具有很好参考价值的文章主要介绍了日期选择器多选换行。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<el-form-item label="日期选择">
	<div class="multi-date-picker">
		<div class="date-item">
			<span class="dateIcon">
				<el-icon><Calendar /></el-icon>
			</span>
			<span class="dateItem">{{ selectedList.toString() }}</span>
		</div>
		<!--把日期选择器隐藏起来 -->
		<el-date-picker class="datePicker" v-model="formData.abroadHolidayInfo" value-format="YYYYMMDD" type="dates" @change="addDate" @blur="handleDatePickerFocus" placeholder="请选择日期"></el-date-picker>
	</div>
</el-form-item>
setup(props:any) {
	const state = reactive<any>({
		selectedList: ['请选择'], // 用来展示
	})
	function handleDatePickerFocus() {
		nextTick(() => {
			const divInner = document.querySelector('.date-item') as HTMLHtmlElement;
			const inputInner = document.querySelector('.datePicker .el-input__inner') as HTMLHtmlElement;
			if (inputInner) {
				inputInner.style.width = '220px';
				setTimeout(() => {
					// 让日期选择器是高度跟div保持一致
					inputInner.style.height = `${divInner.offsetHeight}px`;
				}, 100);
			}
		});
	}
	function addDate() {
		const dateItemHTML = document.querySelector('.dateItem') as HTMLHtmlElement;
		if (state.formData.abroadHolidayInfo) {
			dateItemHTML.style.color = '#606266';
			dateItemHTML.style.fontSize = '12px';
			// 处理一下格式
			state.selectedList = state.formData.abroadHolidayInfo.map((date: any) => {
				return date.substring(0, 4) + '-' + date.substring(4, 6) + '-' + date.substring(6);
			});
		} else {
			dateItemHTML.style.color = '#c4c7cf';
			dateItemHTML.style.fontSize = '13px';
			state.selectedList = ['请选择'];
		}
	}
	onMounted(() => {
		const dateItemHTML = document.querySelector('.dateItem') as HTMLHtmlElement;
		if (state.formData.abroadHolidayInfo) {
			dateItemHTML.style.color = '#606266';
		} else {
			dateItemHTML.style.color = '#c4c7cf';
			dateItemHTML.style.fontSize = '13px';
		}
	});
}
.multi-date-picker {
	display: flex;
}
.date-item {
	display: flex;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	width: 220px;
	min-height: 32px;
	font-size: 12px;
	.dateIcon {
		display: flex;
		margin-top: 8px;
		width: 25px;
		justify-content: center;
		color: #c4c7cf;
		margin-left: 4px;
		font-weight: bolder;
	}
	.dateItem {
		display: flex;
		flex: 1;
		flex-wrap: wrap;
		color: #606266;
		padding-right: 10px;
	}
}
<!--不能写在scoped -->
.datePicker {
	position: absolute;
	left: 5px;
	opacity: 0;
}

文章来源地址https://www.toymoban.com/news/detail-629046.html

到了这里,关于日期选择器多选换行的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 大牛练成记:用JavaScript徒手写出一个日期选择插件

    🏆作者简介,黑夜开发者,全栈领域新星创作者✌,阿里云社区专家博主,2023年6月csdn上海赛道top4。 🏆本文已收录于专栏:100个JavaScript的小应用。 🎉欢迎 👍点赞✍评论⭐收藏 在现代Web应用程序中,日期选择器是一个非常常见的组件,用户可以使用它来选择特定的日期。

    2024年02月14日
    浏览(30)
  • Vue3 实现下拉选择框多选的功能实现

    项目采用vue3+elmentui-plus +ts 搭建成的。用户界面设计上需要一个带全选的下拉选择框。而element plus 官网 提供的下拉多选框是 这种形式是没有全选按钮的,并且样式也不符合想像中的全选的操作。故开始想法子去结合一个新的条件去封装一个新的组件。 由于用户更加热衷于带

    2024年02月12日
    浏览(40)
  • vue+element 多选级联选择器自定义props

    我这里分享的是 Cascader 级联选择器 中的多选、以及如何 自定义props 的使用详解 效果 代码 这里在优化一下,将option放置外部引入,如果是通过后端传入的数据这里也可以直接赋值给option 创建一个regin.js 页面中使用 将rogin.js引入,然后在生命周期函数中赋值给options、这里如

    2024年02月16日
    浏览(32)
  • 前端Vue自定义商品评价页面单选多选标签tags组件单选多选按钮选择器picker组件

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月16日
    浏览(67)
  • 【Axure高保真原型】JS版日期区间下拉选择器

    今天和大家分享JS版日期区间下拉选择器的原型模板,该模板通过调用浏览器的下拉列表,所以可以获取真实的日历效果,具体包括哪一年二月份有29天,几号对应星期几,都是真实的。建议使用谷歌浏览器来演示,其他浏览器效果可能有差别或者失效。具体效果可以点击下方

    2024年02月13日
    浏览(63)
  • 【Axure高保真原型】JS日期选择器筛选中继器表格

    今天和大家分享JS日期选择器筛选中继器表格的原型模板,通过调用浏览器的日期选择器,所以可以获取真实的日历效果,具体包括哪一年二月份有29天,几号对应星期几,都是真实的,获取日期值后,通过交互对中继器进行日期区间筛选。建议使用谷歌浏览器来演示,其他浏

    2024年02月12日
    浏览(45)
  • Ant Design Vue 日期选择器DatePicker传给后台日期参数格式问题

    花了一个下午才解决,官方组件文档里面是没有处理方案说明的。 项目版本:Ant Design Vue 2.0.2 前端部分代码: 前端点击选择日期后,点击提交按钮提交表单时,发现传给后台的日期参数格式有问题,跟前端显示的效果不一致 要么前端传之前处理,要么后端接收后处理。 我参

    2024年02月11日
    浏览(40)
  • JavaScript中的时间日期函数new Date()(JS中5种获取时间戳的函数)

    简介: JavaScript 中的 new Date() 方法用于创建一个新的 Date 对象,该对象表示当前日期和时间。Date 对象提供了许多方法和属性,可以用于获取和设置日期和时间信息。 new Date([year, month, day, hour, minute, second, millisecond]) 其中,每个参数都是可选的。如果没有指定参数,则 new Dat

    2024年02月04日
    浏览(73)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包