Bootstrap Calendar: очистка даты отключает календарь

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