How can I make the whole HTML date field clickable?

user_8498827 0
Viewed 1350

I'm using a HTML date field in a registration form, I'm using Laravel 7 to make my application. In my "register" blade view, I have a HTML date field that I would like to open the calendar when the whole date section is clicked. How can I achieve this? For now, the calendar opens when the little calendar icon is clicked. Please help.

In my view:

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

enter image description here

enter image description here

html
1 Answers

You can achieve the desired functionality like below.

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

user_109214370
Related