Question

我有几个Bootstrap日历，开始日期和结束日期。我还有一个“取消”按钮，可以清除输入框并重置日历以显示当前月份。我使用了不同的方法来清除或重置日历，但最终总是禁用日历。

这就是我所拥有的以及我曾尝试过的：

HTML：

<div class="row">
    <div class="col-sm-3">
        <div class="form-group">
            <label for="tbTOFrom" class="open-startDate">From</label>
            <div id="divPTOStartDate" class="input-group date">
                <input runat="server" clientidmode="static" type="text" id="tbTOFrom" class="form-control" style="cursor: pointer">
                <label class="input-group-addon" style="cursor: pointer" for="tbTOFrom">
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                </label>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="form-group">
            <label for="tbTOTo">To</label>
            <div id="divPTOEndDate" class="input-group date">
                <input runat="server" clientidmode="static" type="text" id="tbTOTo" class="form-control" style="cursor: pointer">
                <label class="input-group-addon" style="cursor: pointer" for="tbTOTo">
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                </label>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group" style="margin-top:30px;">
            <asp:ImageButton runat="server" ID="ibCancelPTO" ImageUrl="images/Cancel_Small.png" CausesValidation="false" OnClientClick="ClearPTOForm();" />
        </div>
    </div>
</div>

脚本：

$(document).ready(function () {
    bindCalendars();
})

function ClearPTOForm() {
    $('#tbTOFrom').datepicker('setDate', new Date());
    $("#tbTOTo").datepicker("setDate", new Date());

    // $("#tbTOFrom").data('datepicker').setDate(null);
    // $("#tbTOTo").data('datepicker').setDate(null);
    // $("#tbTOFrom").datepicker({minDate: 0});
    // $("#tbTOTo").datepicker({minDate: 0});
    // bindCalendars();
    // $('#tbTOFrom').val('');
    // $('#tbTOTo').val('');
}


function bindCalendars() {
    $('#tbTOFrom').unbind();
    $("#tbTOFrom").datepicker({
        format: "mm/dd/yyyy",
        useCurrent: true,
        autoClose: true,
        allowInputToggle: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        ignoreReadonly: true,
        viewMode: 'days',
        minViewMode: "days"
    }).on('changeDate', function (e) {
        $('#lblErrPTODate').text('');

        if ($("#tbTOTo").val() != "") {
            var startDate = Date.parse($(this).val());
            var endDate = Date.parse($("#tbTOTo").val());

            if (startDate > endDate){
                $('#lblErrPTODate').text("Invalid date range selection");
                $(this).val('');
            }
        }
        $(this).datepicker('hide');
    });

    $('#tbTOTo').unbind();
    $("#tbTOTo").datepicker({
        format: 'mm/dd/yyyy',
        useCurrent: false,
        autoClose: true,
        allowInputToggle: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        ignoreReadonly: true,
        viewMode: 'days',
        minViewMode: "days"
    }).on('changeDate', function (e) {
        $('#lblErrPTODate').text('');

        if ($("#tbTOFrom").val() != ""){
            var startDate = Date.parse($("#tbTOFrom").val());
            var endDate = Date.parse($(this).val());

            if (startDate > endDate){
                $('#lblErrPTODate').text("Invalid date range selection");
                $(this).val('');
            }
        }
        $(this).datepicker('hide');
    });
}

Answer 1

两个日历都位于ASP更新面板中。必须添加以下代码来解决该问题：

var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
    prm.add_endRequest(function (sender, e) {
        if (sender._postBackSettings.panelsToUpdate != null) {
            bindCalendars();
        }
    });
};

此外，使用以下命令清除输入框，而不是将日历日期设置为今天的日期：

function ClearPTOForm() {
    // $('#tbTOFrom').datepicker('setDate', new Date());
    // $("#tbTOTo").datepicker("setDate", new Date());

    $("#tbTOFrom").data('datepicker').setDate(null);
    $("#tbTOTo").data('datepicker').setDate(null);

    // $("#tbTOFrom").datepicker({minDate: 0});
    // $("#tbTOTo").datepicker({minDate: 0});
    // bindCalendars();
    // $('#tbTOFrom').val('');
    // $('#tbTOTo').val('');
}

Bootstrap日历：清除日期会禁用日历

1 个答案: