Bootstrap datepicker-onchange должен срабатывать только тогда, когда пользователь вносит изменения - PullRequest
Новая
       29

Bootstrap datepicker-onchange должен срабатывать только тогда, когда пользователь вносит изменения

0 голосов
/ 24 октября 2019

В моем приложении 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 ]

0 голосов
/ 25 октября 2019

попробуйте событие скрытия для средства выбора даты, чтобы выполнить ваши вычисления, вероятно, средство форматирования запускает событие onchange

0 голосов
/ 24 октября 2019

Полагаю, вы можете установить дату любым способом после загрузки, в противном случае при загрузке не происходит событие изменения. 

$(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>
...