html - 如何使整个 HTML 日期字段可点击?

我在注册表单中使用 HTML 日期字段,我正在使用 Laravel 7 来制作我的应用程序。在我的“注册” Blade View 中,我有一个 HTML 日期字段,我想在单击整个日期部分时打开日历。我怎样才能做到这一点?现在,当点击小日历图标时,日历会打开。请帮忙。

在我看来:

<div class="col-sm-4 col-lg-4 col-md-4">
<label for="start_date">Start Date</label><span class="required">*</span>
<input type="date" class="form-control" id="start_date"  name="start_date" value="{{ old('start_date') }}" required>                            
</div>

最佳答案

您可以像下面这样实现所需的功能。

<style>
.form-control input {
    border: none;
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    position: relative;
    width: 100%;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}
</style>

<div class="col-sm-4 col-lg-4 col-md-4">
<label for="start_date">Start Date</label><span class="required">*</span>
<input type="date" class="form-control" id="start_date"  name="start_date" value="{{ old('start_date') }}" required>                            
</div>

https://stackoverflow.com/questions/67967129/

相关文章:

c - 分拣技术 C

numpy - XGBoost:检查失败:有效:输入数据包含 `inf` 或 `nan`

xml - 同时迭代两个 for-each 循环

scala - 推特 future 封锁

Flutter - 墨水池 : Why does onHover() require onTap()

vuejs3 - react 对象未在模板 Vue3 Composition API 上更新

next.js - NextJS 将类从页面传递到布局组件

javascript - Target 的 Toggled ClassList 上的 CSS Tra

javascript - 计算数组中每个元素的频率 - javascript

sql - 有没有一种方法可以不使用 FOR 循环来创建虚拟记录?