Date and Time picker with disable future and past dates and times

Question

I created this date and time picker but I have issue that is I want to make disable past dates and then enable future 15 days dates and time and again after 15 days future date and time will disabled. I am familiar with Jquery and Js. Here is my JSFiddle

I also research on google and stackoverflow and sitepoint community but I don't get any helpful answer for me if I get so.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/jquery.datetimepicker.min.css" /> <!-- Here by using Id selector the datetime picker will load on this input element --> <input id="datetimepicker" type="text"> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script> <script src="http://cdn.craig.is/js/rainbow-custom.min.js"></script> <script> $(document).ready(function() { $.datetimepicker.setLocale('pt-BR'); $('#datetimepicker').datetimepicker(); }); </script> 

Answer 1

Use minDate and maxDate for disabling past and future dates.

  $(document).ready(function() {
    var today = new Date();
    var newdate = new Date();
    newdate.setDate(today.getDate() + 15);
    var maxtime = new Date();
    maxtime.setMinutes(maxtime.getMinutes() + 30); // timestamp
    $.datetimepicker.setLocale('pt-BR');
    $('#datetimepicker').datetimepicker({
        minDate: today,
        minDateTime: today,
        maxDate: newdate,
        step: 30
    });
  });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/jquery.datetimepicker.min.css" /> <!-- Here by using Id selector the datetime picker will load on this input element --> <input id="datetimepicker"> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script> <script src="http://cdn.craig.is/js/rainbow-custom.min.js"></script> <script> $(document).ready(function() { var today = new Date(); var newdate = new Date(); newdate.setDate(today.getDate() + 15); var maxtime = new Date(); maxtime.setMinutes(maxtime.getMinutes() + 30); // timestamp $('#datetimepicker').datetimepicker.setLocale('pt-BR'); $('#datetimepicker').datetimepicker({ minDate: today, minDateTime: today, maxDate: newdate, step: 30 }); }); </script>