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

Question

我在注册表单中使用 HTML 日期字段，我使用 Laravel 7 来制作我的应用程序。在我的“注册”刀片视图中，我有一个 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>

标签： html

Answer 1

您可以实现如下所需的功能。

<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>