代码之家 › 专栏 › 技术社区 › NoBullMan

引导日历:清除日期将禁用日历

calendar twitter-bootstrap jquery javascript

NoBullMan · 技术社区 · 7 年前

我有几个引导日历,开始和结束日期。我也有一个“取消”按钮,应该是清除输入框和重置日历显示当前月份。我使用了不同的方法来清除或重置日历,但我总是以禁用日历而告终。

这就是我所拥有的和我尝试过的:

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

1 回复 | 直到 7 年前

NoBullMan 7 年前

两个日历都在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('');
}