[FIXED] How to Disable previous dates of picked "startdate " for "enddate" in php codeigniter

Issue

Here I have two inputs "startdate" and "enddate", I need to disable previous dates of current date for "startdate" and disable the previous of any chosen "startdate" for "enddate", I am using below jquery but im getting an error Uncaught TypeError: $(...).datepicker is not a function , would appreciate if anyone can help me out here. Here is the view

<div class="form-group col-md-4">
    <label for="pwd">Start Date</label>
    <input type="date" class="form-control" id='Sdate' name='Sdate'   min="<?php echo date('Y-m-d'); ?>"  value="<?php echo set_value('Sdate'); ?>">
    <div class="alert-danger"><?php echo form_error('Sdate'); ?></div>
</div>
<div class="form-group col-md-4">
    <label for="pwd">End Date</label>
    <input type="date" class="form-control" id='Edate' name='Edate' value="<?php echo set_value('Edate'); ?>">
    <div class="alert-danger"><?php echo form_error('Edate'); ?></div>
</div>

Here is the script

<script>
  $(document).ready(function(){
     var dateToday = new Date();
     var dates = $("#Sdate, #tEdate").datepicker({
       defaultDate: "+1w",
       changeMonth: true,
       numberOfMonths: 3,
       minDate: "<?php echo date('Y-m-d'); ?>",
       onSelect: function(selectedDate) {
          var option = this.id == "Sdate" ? "minDate" : "maxDate",
          instance = $(this).data("incidents_add"),
          date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
      dates.not(this).datepicker("option", option, date);
         }
      });
  });
 </script>

Solution

input type date does not need the jquery function .datepicker and if you want to use that, you need jquery-ui to load. Well you dont actually need the .datepicker function if you will use the input type date. here is my working code.

https://jsfiddle.net/m3doh5x4/3/

$(document).ready(function(){

    var today = new Date();
    var sdate = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+(today.getDate() < 10 ? '0'+today.getDate() : today.getDate());
    $('#Sdate').prop('min', sdate);

    $('#Sdate').on('change', function(){
    $('#Edate').prop('min', $(this).val() );
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="form-group col-md-4">
  <label for="pwd">Start Date</label>
  <input type="date" class="form-control" id='Sdate' name='Sdate'   min=''  value="">
  <div class="alert-danger"><?php echo form_error('Sdate'); ?></div>
</div>
<div class="form-group col-md-4">
  <label for="pwd">End Date</label>
  <input type="date" class="form-control" id='Edate' name='Edate' value="<?php echo set_value('Edate'); ?>">
  <div class="alert-danger"><?php echo form_error('Edate'); ?></div>
</div>

Answered By - John Christopher Santos