I am not a fan of using absolute positioning to relocate the checkbox within the date picker input field. I believe utilizing Bootstrap input group would be a more suitable approach.
<form>
<div class="form-group">
<div class="input-group date-select-with-expire-option">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="far fa-calendar-alt"></i>
</span>
</div>
<input type="text" class="form-control date-input" name="SelectedDate"
placeholder="Select date" />
<div class="input-group-append">
<div class="input-group-text">
<div class="custom-control custom-checkbox">
<input type="checkbox"
class="custom-control-input expire-option"
name="DateNeverExpires" id="never-expired">
<label class="custom-control-label" for="never-expired">
Never expires
</label>
</div>
</div>
</div>
</div>
</div>
</form>
Initially, it will look like this:
https://i.sstatic.net/GoFl6.png
After some CSS/SASS modifications:
.input-group.date-select-with-expire-option {
.input-group-text {
background-color: transparent;
}
// Handling multiple .form-control elements
.form-control {
&:first-of-type {
border-left-color: transparent;
}
&:last-of-type {
border-right-color: transparent;
}
}
.input-group-prepend {
.input-group-text {
border-right-color: transparent;
}
}
.input-group-append {
.input-group-text {
border-left-color: transparent;
}
}
}
Final result after styling changes:
https://i.sstatic.net/3C4DZ.png
To implement logic that disables the date picker input when "Never expire" is checked, jQuery can be used:
$(function() {
$('.date-select-with-expire-option .expire-option[type=checkbox]').change(function() {
console.info($(this));
let $dateInput = $('.date-select-with-expire-option').find('.date-input');
$dateInput.prop('disabled', $(this).is(':checked'));
});
});
Visual indication when the checkbox is selected:
https://i.sstatic.net/xaWfE.png
The provided solutions can be implemented and tested in your application. Ensure that input elements have the appropriate name attribute set.
Demo: https://jsfiddle.net/davidliang2008/thbfnd2s/38/
Update: Implementing Date Range Picker
An alternative example involving the use of Date Range Picker as the date picker solution for the input field.
Date input selection through class or Id reference:
function() {
$('.date-select-with-expire-option .date-input').daterangepicker({
singleDatePicker: true
});
...
}
https://i.sstatic.net/7DzCh.png
Demo: https://jsfiddle.net/davidliang2008/thbfnd2s/42/
Update: Implementing jQuery Date Picker
In case there are issues with jQuery date picker usage, proper installation is necessary:
- Download jQuery UI:
- Include jQuery UI base CSS:
Modify the code snippet implementing the date picker object:
$(function() {
$('.date-select-with-expire-option .date-input').datepicker();
...
});
https://i.sstatic.net/4bQ1L.png
https://i.sstatic.net/wZOVH.png
Demo: https://jsfiddle.net/davidliang2008/thbfnd2s/43/