Question

我创建了此日期和时间选择器，但是我遇到的问题是我要禁用过去的日期，然后启用将来的15天日期和时间，并在15天之后再次禁用将来的日期和时间。我熟悉Jquery和Js。这是我的JSFiddle

我也研究了google，stackoverflow和sitepoint社区，但如果得到的话，对我没有任何帮助。

<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

使用minDate和maxDate禁用过去和将来的日期。

  $(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>

日期和时间选择器，禁用将来和过去的日期和时间

1 个答案: