Disabling the future 7days in DATETIMEPICKER javascript

user_8670978 0
Viewed 215

I want to disable the future 7days in datetimepicker, for example the date today is October 5, 2017, so the october 6,7,8,9,10,11,12 will be disable in the datetimepicker.

Here's the structure: 

<!--html-->
<input type="text" id="textin">

//javascript
<script type="text/javascript">
    $('#textin').datetimepicker({
        step: 10
    });
    $('#textin').datetimepicker({
        minDate: 00
    });
    $('#textin').datetimepicker({
        timepicker:false,
        format:'M d, Y, D',
        formatDate:'M d, Y, D'
    });
</script>
datepicker html jquery javascript
2 Answers

You can use minDate like this :

var after7 = moment().add(7, 'days');

$('#datetimepicker1').datetimepicker({
  minDate: after7,
  ignoreReadonly: true,
  format: 'DD/MM/YYYY',
  allowInputToggle: true,
});
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<!-- date -->
<div class='input-group date' id='datetimepicker1'>
  <input type='text' class="form-control" />
</div>

You can also try datepicker of jquery UI and the function beforeShowDay that allow you to add some test in order to specify if a day is available for selection or not

Try this :

jQuery('#textin').datepicker({
  timepicker: false,
  minDate: new Date(),
  beforeShowDay: function(d) {
    var dnow = new Date();
    var diff = d - dnow;
    if (diff < 0)
      return [true, "", "Available"];
    else {
      diff = (diff / (1000 * 24 * 60 * 60));
      if (diff < 7)
        return [false, "", "unAvailable"];
      else
        return [true, "", "Available"];
    }
  }
});
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<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.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<!-- date input -->
<input type="text" id="textin">

You can find more information here : http://api.jqueryui.com/datepicker/

user_86203330 

$('#textin').datetimepicker({
    minDate: "+10d"
});

user_64999840
Related