在输入字段内显示复选框

Question

我正在尝试显示一个带有禁用其输入字段选项的日期选择器。 When "Never Expire" is selected like image below datepicker input field will be disabled

这是我到目前为止所做的：

<style>
.chkbox {
    padding-right: 10px;
    font-weight: bold;
    position: absolute;
}
</style>
<input type="text" placeholder="&#xf073; Select Date" id="datepicker" autocomplete="new-datepicker" name="expireDate" style="font-family:Arial, FontAwesome" />

这是我的问题：

1. 如何在日期选择器输入字段的右侧添加“永不过期”复选框？
2. 如何在选中“永不过期”选项时禁用日期选择器输入字段？
3. 如何提交日期选择器或复选框值中唯一的一个选项？

感谢期待:)

Answer 1

我不喜欢使用绝对定位将复选框移动到日期选择器输入中的想法。我认为这是使用Bootstrap input group 的好候选。

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

更新：安装日期范围选择器

我只是举一个使用Date Range Picker 作为日期输入的日期选择器实现的示例。

您可以通过引用其类或 Id（如果需要）轻松选择日期输入：

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

    ...
}

演示： https://jsfiddle.net/davidliang2008/thbfnd2s/42/

更新：安装 jQuery 日期选择器

看起来作者在使用 jQuery 日期选择器时遇到了问题，所以让我来看看它需要什么。你需要安装

• jQuery UI：https://code.jquery.com/ui/1.12.1/jquery-ui.js
• jQuery UI 基础 CSS：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/

Answer 2

您可以将两个输入（复选框和日期选择器）放在一个 div 上（作为包装器） 之后为复选框提供绝对位置。您可以将其与边距语法对齐。