Выбор даты и времени с отключением будущих и прошлых дат и времени - PullRequest
Новая
       26

Выбор даты и времени с отключением будущих и прошлых дат и времени

0 голосов
/ 28 марта 2019

Я создал этот инструмент выбора даты и времени, но у меня возникла проблема: я хочу отключить прошлые даты, а затем включить будущие 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>

1 Ответ

1 голос
/ 28 марта 2019

Используйте 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>
...