禁用选择虚拟日期

禁用选择虚拟日期,第1张

因为我有两个选择框,一个用于月(Jan-Dec),一个用于Day(1-31)。

我想禁用不存在的月 - 日组合

  • 2月30日& 31
  • 4月31日
  • 6月31日
  • 9月31日
  • 11月31日

代码:

<sel><span>Month:</span>
    <select required name="month">
        <option value="">Select</option>
        <option value="01">January</option>
        <option value="12">December</option>
    </select>
</sel>
<br />

<sel><span>Day:</span>
    <select required name="day">
        <option value="">Select</option>
        <option value="1">1</option>
        <option value="31">31</option>
    </select>
</sel>

Jquery可以做到,但我做不到。

最佳答案:

3 个答案:

答案 0 :(得分:1)

每当您从列表中选择任何选项时,它都会触发change事件。您可以将事件绑定到此更改事件,并实现逻辑以检查当前的月和日组合。

E.g

$('select[name="month"]').change(function () {
   var currentMonth = this.value;
   switch (currentMonth) {
     case '01'://for January
     case '02'://for February
       disableDay(30);
       disableDay(31);
     ...
     ...
   }
});

要在选择下拉列表中删除任何选项

$('select[name="day"]').find('option[value="31"]').prop('disabled', true);

因此,您可以实施一项功能来禁用当天下拉列表中的日期,并根据月份适当调用月份下拉列表,并通过正确的日期进行禁用。

function disableDay (day) {
   $('select[name="day"]').find('option[value="' day '"]').prop('disabled', true);
}

答案 1 :(得分:0)

它有点丑陋,但却符合你的要求......

jQuery(document).ready(function($){
  var m = $('select[name=month]');
  var d = $('select[name=day]');
  var hide31 = ['02','04','06','09','11'];
  var hide30 = ['02'];
  var d31 = d.find('[value=31]');
  var d30 = d.find('[value=30]');
  m.change(function(){
    var v = m.val();
    if (hide30.indexOf(v)>=0){  d30.hide();  }
    else { d30.show();  }
    if (hide31.indexOf(v)>=0){  d31.hide();  }
    else { d31.show();  }
  });
});

答案 2 :(得分:0)

使用预制的库https://html" class="superseo">jqueryui.com/datepicker/,它更简单,更清洁。否则它会有很多jquery,月更改,检查日期,添加/删除以匹配月....

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复