Отображение флажка внутри поля ввода

Мне не нравится идея использования абсолютного позиционирования для перемещения флажка в поле выбора даты. Я подумал, что это хороший кандидат для использования группы ввода Bootstrap.

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

По умолчанию это будет выглядеть следующим образом:

Затем вы можете поиграть с CSS/SASS, чтобы он выглядел так, как вы хотите:

.input-group.date-select-with-expire-option {
    .input-group-text {
        background-color: transparent;
    }
    
    // Just in case there are multiple .form-control elements
    .form-control {
        // Set the first .form-control's left border color to transparent
        &:first-of-type {
            border-left-color: transparent;
        }
        
        // Set the last .form-control's right border-color to 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;
        }
    }
}

Это будет выглядеть так:

Чтобы отключить поле ввода выбора даты, когда установлен флажок «Никогда не истекать», вы можете написать некоторый jQuery:

$(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'));
    });
});

Когда флажок установлен, это будет выглядеть так

Я бы отправил их оба, и вы можете запустить логику в своем приложении, чтобы определить, какие значения использовать. Просто убедитесь, что у них установлен атрибут name во входных элементах.

Демонстрация: https://jsfiddle.net/davidliang2008/thbfnd2s/38/

Обновление: установите средство выбора диапазона дат

Я просто привожу еще один пример использования средства выбора диапазона дат в качестве реализации средства выбора даты для ввода даты. .

Вы можете легко выбрать ввод даты, сославшись на его класс или идентификатор, если хотите:

function() {
    $('.date-select-with-expire-option .date-input').daterangepicker({
        singleDatePicker: true
    });

    ...
}

Демонстрация: https://jsfiddle.net/davidliang2008/thbfnd2s/42/

Обновление: установите средство выбора даты jQuery

Похоже, что у автора проблемы с использованием средства выбора даты jQuery, поэтому позвольте мне показать, что ему нужно. Вам нужно установить

• Пользовательский интерфейс jQuery: https://code.jquery.com/ui/1.12.1/jquery-ui.js
• Базовый CSS пользовательского интерфейса jQuery: https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

Тогда вам нужно изменить только фрагмент кода, который создает экземпляр объекта выбора даты:

$(function() {
    $('.date-select-with-expire-option .date-input').datepicker();
    
    ...
});

Демонстрация: https://jsfiddle.net/davidliang2008/thbfnd2s/43/

Вы можете поместить оба входа (флажок и средство выбора даты) в div (как оболочку), после чего укажите абсолютную позицию для флажка. вы можете выровнять его с синтаксисом поля.