Question

我有两个月份和年份的范围。开始和结束范围。

如果我选择结束日期june2016开始日期，则应该是过去9个月。

如果选择错误，我会收到错误消息。我做了但是没有用。请帮助任何人。

有效条件：

示例：

  End Date    :sep2016.
  Start Date  :Dec2015

同月应接受：

  End Date    :sep2016.
  Start Date  :sep2016

无效条件：

示例：

   End Date    :sep2016.
   Start Date  :oct2016

HTML：

End date:
<select name="monthEnd" id="monthEnd" aria-required="" class="salary fll mr">
  <option value="def">Month</option>
  <option value="1">Jan</option>
  <option value="2">Feb</option>
  <option value="3">Mar</option>
  <option value="4">Apr</option>
  <option value="5">May</option>
  <option value="6">Jun</option>
  <option value="7">Jul</option>
  <option value="8">Aug</option>
  <option value="9">Sep</option>
  <option value="10">Oct</option>
  <option value="11">Nov</option>
  <option value="12">Dec</option>
</select>

<select class="salary" aria-required="" id="yearEnd" name="yearEnd">
  <option val="def">Year</option>
  <option value="2016" selected="selected">2016</option>
  <option value="2015">2015</option>
  <option value="2014">2014</option>
  <option value="2013">2013</option>
  <option value="2012">2012</option>
</select> 

Start Date:
<select name="monthStart" id="monthStart" aria-required="" class="salary fll mr">
  <option value="def">Month</option>
  <option value="1">Jan</option>
  <option value="2">Feb</option>
  <option value="3">Mar</option>
  <option value="4">Apr</option>
  <option value="5">May</option>
  <option value="6">Jun</option>
  <option value="7">Jul</option>
  <option value="8">Aug</option>
  <option value="9">Sep</option>
  <option value="10">Oct</option>
  <option value="11">Nov</option>
  <option value="12">Dec</option>
</select>

<select class="salary" aria-required="" id="yearStart" name="yearStart" selected="selected">
  <option selected="selected">Year</option>
  <option value="2016">2016</option>
  <option value="2015">2015</option>
  <option value="2014">2014</option>
  <option value="2013">2013</option>
  <option value="2012">2012</option>
</select>

使用Javascript：

var $monthStart = $('#monthStart'),
    $yearStart  = $('#yearStart'),
    $monthEnd   = $('#monthEnd'),
    $yearEnd    = $('#yearEnd');

$(document).on('change','#monthEnd,#monthStart,#yearEnd,#yearStart', function() {        
  var startM   = parseInt($monthStart.val()),
      endM     = parseInt($monthEnd.val()),
      diffY    = $yearEnd.val() - $yearStart.val(),
      diffM    = $monthEnd.val() - $monthStart.val();

  if ((diffY == 0 && diffM < 0) ||(diffY == 0 && diffM >= 9) ||(diffY == 1 && diffM >= 9) || (diffY < 0) || (diffY > 1) || (diffY == 1 && diffM > -10)) { 
    alert("Selected range is not correct bcoz that range is not within 9 months from back");
  } else {
    alert("Selected range correct bcoz that range is within 9 months from back");
  }
});

Answer 1

尝试以下代码

$(document).ready(function () {
        var $monthStart = $('#monthStart'),
        $yearStart = $('#yearStart'),
        $monthEnd = $('#monthEnd'),
        $yearEnd = $('#yearEnd');

        $(document).on('change', '#monthEnd,#monthStart,#yearEnd,#yearStart', function () {
            if ($monthStart.val() != 'def' && $monthEnd.val() != 'def' && $yearStart.val() != 'def' && $yearEnd.val() != 'def') {
                var startM = parseInt($monthStart.val()),
                endM = parseInt($monthEnd.val()),
                diffY = $yearEnd.val() - $yearStart.val(),
                diffM = $monthEnd.val() - $monthStart.val();
                if (validate(diffY, startM, endM)) {

                    alert("Selected range is not correct bcoz that range is not within 9 months from back");
                }
                else {
                    alert("Selected range correct bcoz that range is within 9 months from back");

                }
            }
        });
        function validate(diffY, startM, endM) {
            var diffM = (endM + (diffY * 12)) - startM;
            alert(endM + (diffY * 12));
            alert(diffY);
            alert(diffM);
            if (diffM > 9 || diffM < 0)
                return true;
            else
                return false;
        }
    });

和设置起始年份选项的价值，如下所示

<option selected="selected" value="def">Year</option>

Answer 2

一旦填写了所有四个输入，需要检查范围是否正确，并且需要使用parseInt()将$yearEnd.val() - $yearStart.val()转换为int。

＆＃13;

$(document).on('change', '#monthEnd,#monthStart,#yearEnd,#yearStart', function() {
  var $monthStart = $('#monthStart'),
    $yearStart = $('#yearStart'),
    $monthEnd = $('#monthEnd'),
    $yearEnd = $('#yearEnd');
  if ($monthEnd.val() && $yearEnd.val() && $monthStart.val() && $yearStart.val()) {
    var diffY = parseInt($yearStart.val() - $yearEnd.val()),
      diffM = parseInt($monthStart.val() - $monthEnd.val());
    if ( (diffY === 0 && diffM >= -9 && diffM <= 0) || (diffY === -1 && diffM >= 3 && diffM <= 11) ) {
      console.log('Date range is within 9 months.');
    } else {
      console.log('Date range is not within 9 months.');
      this.value = "";
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
End date:
<select name="monthEnd" id="monthEnd">
  <option value="">Month</option>
  <option value="1">Jan</option>
  <option value="2">Feb</option>
  <option value="3">Mar</option>
  <option value="4">Apr</option>
  <option value="5">May</option>
  <option value="6">Jun</option>
  <option value="7">Jul</option>
  <option value="8">Aug</option>
  <option value="9">Sep</option>
  <option value="10">Oct</option>
  <option value="11">Nov</option>
  <option value="12">Dec</option>
</select>
<select name="yearEnd" id="yearEnd">
  <option value="">Year</option>
  <option value="2016">2016</option>
  <option value="2015">2015</option>
  <option value="2014">2014</option>
  <option value="2013">2013</option>
  <option value="2012">2012</option>
</select>
<br/>
<br/> Start Date:
<select name="monthStart" id="monthStart">
  <option value="">Month</option>
  <option value="1">Jan</option>
  <option value="2">Feb</option>
  <option value="3">Mar</option>
  <option value="4">Apr</option>
  <option value="5">May</option>
  <option value="6">Jun</option>
  <option value="7">Jul</option>
  <option value="8">Aug</option>
  <option value="9">Sep</option>
  <option value="10">Oct</option>
  <option value="11">Nov</option>
  <option value="12">Dec</option>
</select>
<select id="yearStart" name="yearStart">
  <option value="">Year</option>
  <option value="2016">2016</option>
  <option value="2015">2015</option>
  <option value="2014">2014</option>
  <option value="2013">2013</option>
  <option value="2012">2012</option>
</select>

＆＃13;

此外，我发现最好将第一个选项<option value="">Month</option>设置为空（空）。

Answer 3

为简化逻辑，您可以比较AD的总月数。还要添加所有字段在开头设置的验证（http://jsfiddle.net/unecL3yz/1/）：

var $monthStart   = $('#monthStart'),
  $yearStart    = $('#yearStart'),
  $monthEnd     = $('#monthEnd'),
  $yearEnd      = $('#yearEnd');

$(document).on('change','#monthEnd,#monthStart,#yearEnd,#yearStart', function() {
  if([$yearStart,$yearEnd,$monthStart,$monthEnd].some(f => isNaN(f.val())))
    return;
  let diff = ($yearEnd.val()-$yearStart.val())*12 + $monthEnd.val()-$monthStart.val()
  if(diff>=0 && diff<=9)
    alert(`Selected range correct bcoz that range is within 9 months from back: ${diff}`);
  else
    alert(`Selected range is not correct bcoz that range is not within 9 months from back: ${diff}`);
});

月份范围仅应在所选月份的9个月内

3 个答案: