CODEWITHSUNDEEP
javascriptjqueryhtml
Arslan
Arslan

Reputation: 433

Option is selected based on date using jquery

Suppose user select a date if date is less than 7 days then None option select in dropdown and if date is greater than 7 days then One week option is selected.

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>

Issue is that option is not select based on days and option is not change based on days (if user select date which less than 7 days then None option select and user select date which greater than 7 days then One week option select and again user select date which less than 7 days then None option select)

Upvotes: 1

Views: 1116

Answers (1)

Bhumi Shah
Bhumi Shah

Reputation: 9476

Here is the working demo: 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

Upvotes: 1

Related Questions