Datetimepicker с этого момента, но на следующий день с x времени - PullRequest
Новая
       6

Datetimepicker с этого момента, но на следующий день с x времени

0 голосов
/ 17 января 2019

Когда пользователь выбирает время, которое он показывает в прошлый раз, скажем, правильно знать, что это 10:00, он не должен показывать время ниже 10:00 (прямо сейчас), НО, если пользователь выбирает следующий день или любой другой следующий день, время начала должно быть в 8:00. до 8 вечера, вот процесс.
Пользователь выбирает дату в следующем формате: 2019-01-17, теперь на основе этой даты мы показываем информацию ajax и на основе этой информации пользователь может выбрать время.
Здесь начинается вся энчилада ... это время должно основываться на текущем времени, когда выбранная дата является текущей, время должно отображаться только с текущего времени и часа, скажем, сейчас 10:00, тогда ваши варианты времени будут 11, 12, 13, 14 ... и т. Д.
Но если вы выберете любой другой день из текущего дня, то ваши варианты времени будут с 9 утра до 8 вечера ...
в настоящее время у меня есть только это: 

$(_TimeSelector).datetimepicker({
    lang      : 'en',
    datepicker: false,
    format    : 'H:s',
    allowTimes:[
    '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'
    ],
    minDate:0
});

и есть проблема, я не знаю, как построить массив для allowTimes на основе выбранной даты ... Любое руководство будет с благодарностью.

1 Ответ

0 голосов
/ 18 января 2019

Попробуйте это .. 

    
   var times = [ '09:00','10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'];
   
 jQuery('#datetimepicker').datetimepicker({
  format:'Y/m/d H:i',  
  allowTimes:times,
  
   onSelectDate:function(dp){
        var date = new Date().dateFormat('Y/m/d');
  	if( dp.dateFormat('Y/m/d')==date ){
  	 var timeNow =dp.dateFormat('H:i');
    	 var new_times = times.filter(function(x) {
   		 return x > timeNow ;
				});
         this.setOptions({
         allowTimes:new_times
          });
         }
       else{
        this.setOptions({
         allowTimes:times
        });
    }

  }
 });
.dt{
  margin-top:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="dt" type="text" id="datetimepicker"/>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="https://www.jqueryscript.net/demo/Clean-jQuery-Date-Time-Picker-Plugin-datetimepicker/jquery.datetimepicker.css"/>
 <script src="https://www.jqueryscript.net/demo/Clean-jQuery-Date-Time-Picker-Plugin-datetimepicker/jquery.datetimepicker.js"></script>
...