Использование bootstrap-datepicker и Inputmask

Question

Для верстки формы ввода решил использовать bootstrap 4 + bootstrap-datepicker + Inputmask. В принципе, все получилось как хотел. Но один функционал все же работает не так, как надо. А именно... Если я ввожу дату цифрами в поле ввода, то валидация поля отрабатывает правильно. Однако, если использую ввод посредством раскрывающегося календаря от datepicker'а - что-то не срабатывает, и поле не валидируется. Прошу помощи!

Синтетический пример

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  <title>Example</title>

  <style>
    .append-box {
      width: 36px;
      justify-content: center!important;
    }

    .input-group {  
      position: relative;
    }

    .input-group-custom .form-control {
      padding-right: 50px;
    }

    .input-group-custom .input-group-append {  
      position: absolute; top: 0; right: 0;
    }

    .input-group {
      position: relative;
    }

    .form-control {
      padding-right: 50px;
      border-radius: .2rem!important;
    }

    .form-control:focus+.input-group-append .input-group-text {
      border-color: #80bdff;
    }

    .input-group-append {
      position: absolute;
      top: 0;
      right: 0;
    }

    .input-group-append .is-invalid {
      background: #f8d6d9;
      border-color: red;
    }

    .val-ok {
      color: #3fc406!important;
    }
  </style>

</head>
<body>
  <div class="d-flex justify-content-center">
  <div class="card mt-3 col-lg-6 col-md-8 col-sm-10">
    <div class="card-body ">
      <div class="d-flex flex-row form-group align-items-center">
        <div class="col-3 pr-3 text-right"><small><label for="inputDate" class="col-form-label">Дата:</label></small></div>
        <div class="col-9 p-0">
          <div class="input-group input-group-sm">
            <input id="input-date" type="text" class="form-control datepicker" data-provide='datepicker' data-date-format='dd/mm/yyyy' placeholder="дд/мм/гггг">
            <div class="input-group-append h-100">
              <div id="input-date-box" class="input-group-text append-box"><span id="ico-date" class="far fa-calendar-alt"></span></div>
            </div>
          </div>
        </div>
      </div>
      <center><button type="submit" class="btn btn-primary" value="submit">Кнопка</button></center>
    </div>
  </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.5/jquery.inputmask.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"></script>

  <script>
    $(document).ready(function() {

      $.fn.datepicker.dates['en'] = {
            days: ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"],
            daysShort: ["Вск", "Пнд", "Втр", "Срд", "Чтв", "Птн", "Суб"],
            daysMin: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
            months: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
            monthsShort: ["Янв", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"],
            today: "Сегодня",
            clear: "Очистить",
            format: "dd/mm/yyyy",
            titleFormat: "MM yyyy", /* Leverages same syntax as 'format' */
            weekStart: 1,
            monthsTitle: "Месяцы"
      };

      $('.datepicker').datepicker({
        autoclose: true,
        format: "dd/mm/yyyy"   
      });

      $('.datepicker').on('changeDate', function() {
        console.log("Val: " + $("#input-date").val());
      });

      $("#input-date").inputmask( {
        "alias": 'datetime',
        "inputFormat": 'dd/mm/yyyy',
        "placeholder": '__/__/____',
        "oncomplete" : function() { 
          $("#input-date").removeClass("is-invalid");
          $("#input-date-box").removeClass("is-invalid");
          $("#ico-date").addClass("val-ok");
          console.log("ValOk: " + $("#input-date").val());
        },
        "onincomplete": function() { 
          $("#input-date").addClass("is-invalid");
          $("#input-date-box").addClass("is-invalid");
          $("#ico-date").removeClass("val-ok");
          console.log("ValBad: " + $("#input-date").val());
        },
      });
    });

  </script>
</body>
</html>

БЛОГ НА HUSL

Использование bootstrap-datepicker и Inputmask

Ответы (0 шт):