Question

假设用户选择日期，如果日期少于7天，则选择无选项，如果日期大于7天，则选择一周选项。

function CalculateDiff () {
  if ($('#from_date').val() != '' && $('#valid_date').val() != '') {
    var ONE_DAY = 1000 * 60 * 60 * 24
    var From_date = new Date($('#from_date').val())
    var To_date = new Date($('#valid_date').val())
    var diff_date = To_date - From_date
    var days = Math.floor(diff_date / ONE_DAY)

    if (days < 7) {
      $('#reminder option[value=None]').attr('selected', 'selected')
    }
    if (days >= 7) {
      $('#reminder option[value=1]').attr('selected', 'selected')
    }
  }
}

$(function () {
  $('#valid_date').datepicker()
})

var date = new Date()
var day = date.getDate()
var month = date.getMonth() + 1
var year = date.getFullYear()
if (month < 10) month = '0' + month
if (day < 10) day = '0' + day
var today = month + '/' + day + '/' + year
document.getElementById('from_date').value = today

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="form-group has-label col-sm-3">
  <label>
    Expiry Date
  </label>
<input class="form-control empty-field" name="valid_date" id="valid_date" type="text" onblur="CalculateDiff();" required>
</div><br>
  <label>
    Today date
  </label>
  <input class="form-control" name="from_date" id="from_date" type="text"> <br><br>

 <div class="col-sm-4">
  <label>
    Remind me
  </label>

 <select name="reminder" id="reminder" class="dropdown-list" data-style="btn btn-info btn-round" data-size="7" tabindex="-98"> 
   <option value="0">Please select one</option>
   <option value="None">None </option>
   <option value="1">1 week </option>
 </select>

问题是选项不是根据天数选择的，选项不是基于天数的变化（如果用户选择的日期少于7天则无选项选择和用户选择日期大于7天然后一周选项选择和再次用户选择小于7天的日期，然后选择无选项）

Answer 1

以下是工作演示：https://codepen.io/creativedev/pen/GGvpKp

$('#valid_date').on('keyup keypress blur change', function(e) {
  if ($('#from_date').val() != '' && $('#valid_date').val() != '') {
    var ONE_DAY = 1000 * 60 * 60 * 24
    var From_date = new Date($('#from_date').val()); 
    var To_date = new Date($('#valid_date').val())
    var diff_date = To_date - From_date
    var days = Math.floor(diff_date / ONE_DAY)
    console.log(days);
    $('#reminder').prop('selectedIndex','-1');
    if (days < 7) {
      $('#reminder option[value="None"]').attr('selected', true);
       $('#reminder option[value="1"]').attr('selected', false);
    }
    if (days >= 7) {
      $('#reminder option[value="1"]').attr('selected', true);
       $('#reminder option[value="None"]').attr('selected', false);
    }
  }
});

$(function () {
  $('#valid_date').datepicker()
})

var date = new Date()
var day = date.getDate()
var month = date.getMonth() + 1
var year = date.getFullYear()
if (month < 10) month = '0' + month
if (day < 10) day = '0' + day
var today = month + '/' + day + '/' + year
document.getElementById('from_date').value = today

使用jquery基于日期选择选项

1 个答案: