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

Question

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

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

The selected start date is not within the quarter

我该怎么做？

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 字符串来使比较更加稳健。

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

How can I identify the quarter from the value in a jQuery datepicker?

javascript

jquery

jquery-ui-datepicker