实现H5时间选择器点击输入框和图标均可弹出日期选择

最新推荐文章于 2024-11-07 15:31:09 发布

清新小伙子

最新推荐文章于 2024-11-07 15:31:09 发布

阅读量7.7k

点赞数 13

分类专栏： css 文章标签： css html html5

本文链接：https://blog.csdn.net/m0_46627730/article/details/120226422

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何解决H5中<input type='date'>点击输入框无法弹出日期选择器的问题。作者通过绝对定位将日期图标覆盖在输入框上，实现点击输入框即弹出日期选择框的效果，提供了CSS实现代码，并展示了最终效果。

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

前言

最近写一个 chrome 插件，里面需要用到日期选择器，为了图轻便，便直接用了 H5的<input type="date"> ，但这个有个问题，只能通过点击右侧那个图标才可以弹出日期选择框，这使用起来就非常不爽了。
网上找了很久都没找到一个有点用处的博客，最后只能自己一点点去尝试，如今问题解决了，就像记录下来给各位看看，希望能帮到大家～～～

在这里插入图片描述

解决点击输入框不弹出日期选择

思路：首先我们知道点击图标是可以弹出的，那么我们就可以将图标进行绝对定位并覆盖掉输入框，这不就可以变象实现了点击输入框不弹出日期选择吗？

实现：

<form class="my-form form-inline">
    <div class="form-group input-group-sm">
        <label for="exampleInputEmail1">开始时间</label>
        <input type="date" class="form-control" id="startTime" placeholder="开始时间">
    </div>
    <div class="form-group input-group-sm">
        <label for="exampleInputPassword1">结束时间</label>
        <input type="date" class="form-control" id="endTime" placeholder="结束时间">
    </div>
</form>

#startTime, #endTime{
    position: relative;
}
#startTime::-webkit-calendar-picker-indicator,
#endTime::-webkit-calendar-picker-indicator{
    position: absolute;
    right: 0;
    padding-left: calc(100% - 40px); // 我估计它本身也就40px吧，通过设置左内边距铺满输入框
    padding-right: 10px; // 为了美观，右侧给它来点空隙
}

效果：
在这里插入图片描述