Блог

Главная - Вопросы по программированию - Как я могу определить квартал по значению в датапикере jQuery?

Как я могу определить квартал по значению в датапикере jQuery?

#javascript #jquery #jquery-ui-datepicker

Вопрос:

У меня есть input текст поля, который доступен только для чтения. Я использую его для отображения квартала года. У меня есть еще одно поле ввода, которое является датой начала. Я использую jQuery datepicker для выбора даты.

Моя проблема в том, что значение поля ввода за квартал Q1 , то, если я выберу дату начала за пределами 1 квартала, мне нужно отобразить сообщение под ним, в котором говорится::

Выбранная дата начала не входит в квартал

Как я могу это сделать?

 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>

Ответ №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 строку.

Комментарии:

1. Лучше использовать $.datepicker.parseDate вместо new Date(dateValue) этого .

2. getMonth() возвращает месяц на основе 0

3. @SalmanA очень хорошая мысль getMonth() , спасибо. Обновленный.

Метки: