使用iview DatePicker组件制作日历展示效果

最新推荐文章于 2023-05-08 10:54:38 发布

lzmm1225

最新推荐文章于 2023-05-08 10:54:38 发布

阅读量4k

点赞数 2

分类专栏： vue iview css

本文链接：https://blog.csdn.net/lzmm1225/article/details/102760295

版权

本文介绍了如何利用iview的DatePicker组件，定制样式以满足特定的日历展示需求。通过调整CSS，成功创建了所需的日历效果。

摘要由CSDN通过智能技术生成

遇到了一个需要展示日期的需求，正好项目使用的又是iview组件库，于是对iview现有的DatePicker组件下手了。
要求的样式为

在这里插入图片描述
dom如下（只包含日历部分）：

<div class="index-time-choose-f">
	<div class="index-time-choose">
		<DatePicker class="index-time" type="date" open placement="top"></DatePicker>
	</div>
</div>

css：

.index-time-choose-f {
   
		width:320px;
		height:360px;
		margin:10% auto;
		position:relative;
	}
	.index-time-choose {
   
		width:0px;
		height:0px<