为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

绝地无双 2021-12-02 15:43:42
在我的 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 函数。我该怎么做?
查看完整描述

2 回答

?
Smart猫小萌

TA贡献1911条经验 获得超7个赞

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


查看完整回答
反对 回复 2021-12-02
?
元芳怎么了

TA贡献1798条经验 获得超7个赞

您可以在加载后通过任何方法设置日期,否则在加载时不会触发更改事件。


$(document).ready(

  function() {

    $('#sandbox-container input').datepicker({

      format: "dd/mm/yyyy",

      language: "sv",

      weekStart: 1,

      todayBtn: true,

      clearBtn: true,

      daysOfWeekHighlighted: "0,6",

      calendarWeeks: true,

      autoclose: true,

      todayHighlight: true

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

  }

)


function checkDate() {

  console.log('change');

  var from = $('#sandbox-container input').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;

}

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



查看完整回答
反对 回复 2021-12-02
  • 2 回答
  • 0 关注
  • 267 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信