Home Change the dropdown value when particulare date is selected in jquery using input type date

Questions

Change the dropdown value when particulare date is selected in jquery using input type date

December 6, 2021

I am trying to change the dropdown value when particular date is selected.. For eg if the user selects 25-12-2021 the dropdown value has to be different..How can i change the dropdown value. I want to change the dropdown value when user selects 25-12-2021

Here is the code

<script type="text/javascript">
$(function() {
  $("#txtDate").change(function() {
       var numbers = ['6:30AM (English)'];
       var numbers1 = ['7:00AM (English)']; 
         var numbers2 = ['6:30AM (English)']; 
var numbers4 = ['7:30AM (English)']; 
    var selDate = new Date(this.value);
    var option = '';
    $('#items').html('');
    if (selDate.getDay() == 0) { //If sunday, can change your logic here
  

for (var i=0;i<numbers1.length;i++){
  $('<option/>').val(numbers1[i]).html(numbers1[i]).appendTo('#items');
   
}



  }
else if(selDate.getDay() == 6){ //On saturday
for (var j=0;j<numbers2.length;j++){
  $('<option/>').val(numbers2[j]).html(numbers2[j]).appendTo('#items');
   
}   
    
}
  else if(selDate.getDate() == '2021-12-25'){ //On 2021-12-25
for (var l=0;l<numbers4.length;j++){
  $('<option/>').val(numbers4[l]).html(numbers4[l]).appendTo('#items');
   
}   
    
}
  else {
    for (var k=0;k<numbers.length;k++){ //On weekdays
   option += '<option value="'+ numbers[k] + '">' + numbers[k] + '</option>';
   
}
$('#items').append(option);
    }
  })
});
</script>

<input type="date" name="date" id="txtDate" required="required" class="col-md-12" value="<?php if(isset($_GET['date'])) { echo $_GET['date']; } ?>" />  
            

            </div>
            <div class="col-md-4">
            <label>Select Mass<span style="color:red";> * </span></label>   
                    <select class="col-md-12"  id='items' name="day">
                    <option value="">---SELECT---</option>
                    </select>
            </div>

>Solution :

You can check the value of the input directly, as in

...
 } else if ($(this).val() === '2021-12-25') {
...

Also you had a typo in this line

for (var l = 0; l < numbers4.length; l++) {

$(function() {
  $("#txtDate").change(function() {
    var selDate = new Date($(this).val());
    // console.log($(this).val(), selDate)
    var numbers = ['6:30AM (English)'];
    var numbers1 = ['7:00AM (English)'];
    var numbers2 = ['6:30AM (English)'];
    var numbers4 = ['7:30AM (English)'];
    var option = '';
    $('#items').html('');
    if (selDate.getDay() == 0) { //If sunday, can change your logic here
      for (var i = 0; i < numbers1.length; i++) {
        $('<option/>').val(numbers1[i]).html(numbers1[i]).appendTo('#items');
      }
    } else if (selDate.getDay() == 6) { //On saturday
      for (var j = 0; j < numbers2.length; j++) {
        $('<option/>').val(numbers2[j]).html(numbers2[j]).appendTo('#items');
      }
    } else if ($(this).val() === '2021-12-25') { //On 2021-12-25
      console.log("Merry Christmas!")
      for (var l = 0; l < numbers4.length; l++) {
        $('<option/>').val(numbers4[l]).html(numbers4[l]).appendTo('#items');
      }
    } else {
      for (var k = 0; k < numbers.length; k++) { //On weekdays
        option += '<option value="' + numbers[k] + '">' + numbers[k] + '</option>';
      }
      $('#items').append(option);
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="date" id="txtDate" required="required" class="col-md-12" value="<?php if(isset($_GET['date'])) { echo $_GET['date']; } ?>" />


</div>
<div class="col-md-4">
  <label>Select Mass<span style="color:red";> * </span></label>
  <select class="col-md-12" id='items' name="day">
    <option value="">---SELECT---</option>
  </select>
</div>