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

#javascript #jquery #date #time #picker

#javascript #jquery #Дата #время #средство выбора

Вопрос:

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

Используйте 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. Спасибо, но, кажется, я ошибся, объясняя вам, что я хочу сказать. https://i.ibb.co/ftp35Dp/screenshot.png пожалуйста, кратко просмотрите это изображение, я тоже хочу отключить прошедшее время с этого момента, сэр, я не хочу, чтобы пользователь нажимал только на прошедшее время, они могут нажимать только на будущие времена. Пожалуйста, обновите ответ еще раз.

2. вы хотите отключить с сегодняшней даты или с выбранной даты?

3. Я тоже хочу отключить прошедшее время, сэр .. пользователь может выбрать будущее время через полчаса. предположим, что теперь время, 10:00AM поэтому пользователь может выбрать время, 10:30PM в это время 30 минуты отключены.

4. попробуйте minDate: today, вместо minDateTime: today,

5. @ZarnaBorda недавно обновленный https://jsfiddle.net/techWorld/28f7hgus/4/ код таков: все хорошо, но для времени ожидания должно включаться через текущее время 30 минут, как на изображении, пожалуйста, посмотрите один раз https://i.ibb.co/KFBNsfc/screenshot.png