Bootstrap datepicker-onchange 应该只在用户进行更改时启动

在我的 Xpages 应用程序中,我在输入字段上启用了引导日期选择器:


$(document).ready(

    function() {

        var dateFormat = "#{javascript: app['date_format_date_only_lowercase']}";

        x$('#{id:inpCardValid}').datepicker({

            language: sv,

            format: (dateFormat),

            weekStart: 1,

            todayBtn: true,

            clearBtn: true,

            daysOfWeekHighlighted: "0,6",

            calendarWeeks: true,

            autoclose: true,

            todayHighlight: true

        }).on('changeDate', checkDate);

    }

)


function checkDate() {

    var from = x$('#{id:inpCardValid}').val();

    var validDate = new Date(from);

    var checkDate = Date.now();

    checkDate = addDays(checkDate, 30);

    if (checkDate >= validDate) {

      XSP.openDialog("#{id:dlgLCardValidDate}")

    }

}


function addDays(date, days) {

    var result = new Date(date);

    result.setDate(result.getDate() + days);

    return result;

}

然而,当页面加载时 onchange 已经启动(可能是因为需要为日期选择器格式化日期)。我只希望在用户进行更改时调用 onchange 函数。


我该怎么做?


绝地无双
浏览 268回答 2
2回答

Smart猫小萌

尝试使用日期选择器的隐藏事件来进行计算,可能是格式化程序启动了 onchange 事件

元芳怎么了

您可以在加载后通过任何方法设置日期,否则在加载时不会触发更改事件。$(document).ready(&nbsp; function() {&nbsp; &nbsp; $('#sandbox-container input').datepicker({&nbsp; &nbsp; &nbsp; format: "dd/mm/yyyy",&nbsp; &nbsp; &nbsp; language: "sv",&nbsp; &nbsp; &nbsp; weekStart: 1,&nbsp; &nbsp; &nbsp; todayBtn: true,&nbsp; &nbsp; &nbsp; clearBtn: true,&nbsp; &nbsp; &nbsp; daysOfWeekHighlighted: "0,6",&nbsp; &nbsp; &nbsp; calendarWeeks: true,&nbsp; &nbsp; &nbsp; autoclose: true,&nbsp; &nbsp; &nbsp; todayHighlight: true&nbsp; &nbsp; }).on('changeDate', checkDate);&nbsp; })function checkDate() {&nbsp; console.log('change');&nbsp; var from = $('#sandbox-container input').val();&nbsp; var validDate = new Date(from);&nbsp; var checkDate = Date.now();&nbsp; checkDate = addDays(checkDate, 30);&nbsp; if (checkDate >= validDate) {&nbsp; &nbsp; //XSP.openDialog("#{id:dlgLCardValidDate}")&nbsp; }}function addDays(date, days) {&nbsp; var result = new Date(date);&nbsp; result.setDate(result.getDate() + days);&nbsp; return result;}<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script><link id="bs-css" href="https://netdna.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"><link id="bsdp-css" href="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet"><script src="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script><script src="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/locales/bootstrap-datepicker.sv.min.js" charset="UTF-8"></script><div class="span5 col-md-5" id="sandbox-container"><input type="text" value="10/10/2019"></div>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript