获取 jQuery Datepicker 的实例和字段 ID

Question

我发现了很多关于这个问题的类似问题，但他们的 none 答案似乎在这里有效。我在网站上有一个 Datepicker，当用户输入时会检查日期的输入。它运行良好，但我也希望在输入无效时实时为日期着色。为此，我需要 Datepicker 关联的输入字段的 ID。

在 Datepicker 定义中使用 onClose 函数时，我得到 inst 这是当前 Datepicker 对象的实例，通过 inst.id 我得到字段名称。但这在 parseDate 函数中不起作用。我也无法传递 inst 或使其成为全局的，因为 onClose 从未在 parseDate 之前执行过。我按照某处的建议尝试了 $(this).attr('id')，但它 returns undefined。我的代码（最小示例）：

document.addEventListener("DOMContentLoaded", function () {
  $(function () {
    $(".dp").datepicker({
      showOn: "focus",
      showMonthAfterYear: false,
      dateFormat: "dd.mm.yy",
      onClose: function (dateText, inst) {
        console.log("field name : ", inst.id); //works, inst.id is 'startDate'.
        $("#" + inst.id + ".form-control.dp.hasDatepicker").css("color", "red"); //works, inst.id is 'startDate'.
      }
    });

    $.datepicker.parseDate = function (format, value, settings) {
      var field = $(this).attr("id"); //not working, field is null.
      $("#" + field + ".form-control.dp.hasDatepicker").css("color", "red"); //not working, field is null.
    };
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="row">
  <label class="col-sm-3 col-form-label">{{ __('Start') }}</label>
  <div class="col-sm-9">
    <div class="input-group-addon">
      <input type="text" class="form-control dp" id="startDate" name="start" value="">
      <span class="glyphicon glyphicon-th"></span>
    </div>
  </div>
</div>

Answer 1

我会在日期选择器旁边使用 input 事件处理程序来执行日期有效性...因为您希望进行的日期检查不是日期选择器的功能。

所以在 input 上，评估 new Date 值以将 .invalid class 添加到 input，如下所示：

$(document).ready(function () {
  $(".dp").datepicker({
    showOn: "focus",
    showMonthAfterYear: false,
    dateFormat: "dd.mm.yy"
  });

  $(".dp").on("input", function () {
  
    // Remove the class on each new input
    $(this).removeClass("invalid");

    let currentVal = $(this).val();
    console.log(currentVal);

    // Split the value
    let dateParts = currentVal.split(".");
    
    // If incomplete
    if (dateParts.length !== 3) {
      $(this).addClass("invalid");
      return;
    }

    // Create a date object to evaluate
    let validDate = new Date(`${dateParts[2]}-${dateParts[1]}-${dateParts[0]} 00:00:00`);
    console.log(validDate.toString());

    // If the date is "invalid" and does not have 4 digits for the year (because it could be valid anyway... But obviously wrong)
    if (validDate.toString() === "Invalid Date" || dateParts[2].length !== 4) {
      $(this).addClass("invalid");
    }
  });
});

.dp.invalid{
  color: red !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="row">
  <label class="col-sm-3 col-form-label">{{ __('Start') }}</label>
  <div class="col-sm-9">
    <div class="input-group-addon">
      <input type="text" class="form-control dp" id="startDate" name="start" value="">
      <span class="glyphicon glyphicon-th"></span>
    </div>
  </div>
</div>

CodePen

获取 jQuery Datepicker 的实例和字段 ID

Getting instance and field id of jQuery Datepicker

javascript

jquery

jquery-ui-datepicker