如何从 jQuery 日期选择器中的值中识别季度？

Question

我有一个input 字段文本，它是只读的。我用它来显示年份季度。我有另一个输入字段，它是开始日期。我正在使用 jQuery datepicker 来选择日期。

我的问题是季度输入字段值Q1 那么如果我选择第一季度以外的开始日期，我需要在其下方显示一条消息：

所选开始日期不在季度内

我该怎么做？

var datePickerOptions = {
  dateFormat: 'dd-M-yy',
  changeMonth: true,
  changeYear: true
}

/* Initialise the date picker */
if (!$.datepicker.initialized) {
  $(document).mousedown($.datepicker._checkExternalClick)
    .find(document.body).append($.datepicker.dpDiv);
  $.datepicker.initialized = true;
}

$(function() {
  $("#startdate").datepicker(datePickerOptions);
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Quartor: <input type="text" id="quartor" readonly value="Q1"></p>
<p>Start Date: <input type="text" id="startdate" placeholder="DD-MMM-YYYY"></p>

Answer 1

要实现这一点，您可以挂钩到日期选择器的onSelect() 方法。在那里，您可以执行代码，该代码使用简单的计算来确定从选定日期开始的季度，并将其与用户输入的值进行比较，如下所示：

let getQuarter = d => Math.ceil((d.getMonth() + 1) / 3);
let datePickerOptions = {
  dateFormat: 'dd-M-yy',
  changeMonth: true,
  changeYear: true,
  onSelect: dateValue => {
    let date = new Date(dateValue);
    let dateQtr = 'Q' + getQuarter(date);
    let userQtr = $('#quartor').val().trim();
    $('.qtr-warning').toggle(dateQtr != userQtr);
  }
}

jQuery($ => {
  $("#startdate").datepicker(datePickerOptions);
});

.qtr-warning {
  color: #C00;
  display: none;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Quartor: <input type="text" id="quartor" readonly value="Q1"></p>
<p>Start Date: <input type="text" id="startdate" placeholder="DD-MMM-YYYY"></p>
<span class="qtr-warning">The selected start date is not within the quarter</span>

请注意，您可能希望通过不区分大小写或忽略 Q 字符串来使比较更加可靠。