0

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>
marcogmonteiro
  • 2,061
  • 1
  • 17
  • 26
Roxana Slj
  • 311
  • 1
  • 5
  • 23

1 Answers1

0

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>
  • Hi, I have solved this problem with your solution, but now all of sudden the start date datepicker is not working again, and all previous days of current date can be chose. i was wondering if you can help to solve it again – Roxana Slj Jan 06 '21 at 10:22
  • can you give a sample code to be fixed to we can have a new start point from where do you have a problem right now? – John Christopher Santos Jan 18 '21 at 14:45