javascript - 我想要一个 Bootstrap 时间选择器从下拉列表中选择开始时间，其中持续时间间隔为 30 分钟

Question

条件:时间也应该在上午 7 点到晚上 9 点之间。 我的要求是根据选定的持续时间加载表格。 我的代码不完整并且无法运行。 我的html代码如下..

<label class="col-md-1 control-label firstcol">Reservation Time : </label> 
	<div class="col-md-2">
		<div class="input-group bootstrap-timepicker timepicker">
			<input data-provide="timepicker" class="form-control" name="txtReserveTimeFrom" id="txtReserveTimeFrom" readonly="readonly" tabindex="2" data-toggle="tooltip" data-container="body" data-placement="bottom" />
		</div>
	</div>
<label class="col-md-1 control-label firstcol "> To </label>
	<div class="input-group bootstrap-timepicker timepicker">
		<div class="col-md-1">
			<input data-provide="timepicker" class="form-control" data-time-format="H:i:s" name="txtReserveTimeTo" id="txtReserveTimeTo" readonly="readonly" tabindex="2" data-toggle="tooltip" data-container="body" data-placement="bottom" />
	</div>
</div>

我的java脚本如下。

$(document).ready(function(){
            $('#txtReserveTimeFrom').timepicker({
                 'minTime': '7:00am','maxTime':     '09:00pm','timeFormat': 'h:i A'
                });
                $('#txtReserveTimeTo').timepicker({
                 'minTime': '7:00am','maxTime': '09:00pm','timeFormat': 'h:i A'
                });
                 
                $( "#txtReserveTimeFrom" ).on( "change", function() {
                    loadResourceTable();
                });
                $( "#txtReserveTimeTo" ).on( "change", function() {
                   loadResourceTable();
                });
                $("#txtReserveDate").val(availableDates[0]);
                $('#txtReserveTimeFrom').timepicker('setTime', '7:00am');
                $('#txtReserveTimeTo').timepicker('setTime', '7:30am');
               loadResourceTable();
            });

// Now I changed the code like this. 


                  $('#txtReserveTimeFrom').timepicker({
                    minuteStep: '30',
                    defaultTime: '7:00 AM',
                    minTime: '7:00 AM',  
                    maxTime: '9:00 PM'
                });
                $('#txtReserveTimeTo').timepicker({
                    minuteStep: '30',
                     defaultTime: '07:30 AM' 
                 minTime: '7:00 AM',
                 maxTime: '09:00 PM'
                
                });

             $(document).ready(function(){
                 
                $( "#txtReserveTimeFrom" ).on( "change", function() {
                  loadResourceTable();
              });
                $( "#txtReserveTimeTo" ).on( "change", function() {
                    loadResourceTable();
                });
                $("#txtReserveDate").val(availableDates[0]);
                $('#txtReserveTimeFrom').timepicker('setTime', '7:00am');
                $('#txtReserveTimeTo').timepicker('setTime', '7:30am');
               loadResourceTable();
            });
           

我已经浏览并尝试了以下链接。

Javascript Dynamic Time Drop Down , bootstrap-timepicker not working , Responsive bootstrap 3 timepicker? , http://www.okler.net/forums/topic/timepicker-not-showing-when-click-on-input/

我是 bootstrap 和 JavaScript 的初学者。有人可以帮我解决这个问题吗？

Answer 1

我找到了上面发布的问题的解决方案。为了设置 Bootstrap 时间选择器的最小和最大时间，我使用了以下函数。

    function validateTimes(element, e){

       var maxMinutes = 21 * 60;
       var minMinutes = 7 * 60;

       var selectedMinutes = ( ((e.time.meridian == 'AM') ? e.time.hours : (e.time.hours+12))* 60 ) + e.time.minutes;

       if(!(e.time.meridian == 'PM' && e.time.hours == 12)){
          if( selectedMinutes<minMinutes){
               $(element).timepicker('setTime', '07:00 AM');
           }
           else if(selectedMinutes>maxMinutes){
               $(element).timepicker('setTime', '09:00 PM');
           }
       }
    }

我在更改时间选择器的时间时调用了该函数，因为我想根据时间变化加载表格。并使用 monthStep 将间隙自定义为 30 分钟。您可以在下面找到该代码。

        $('#txtReserveTimeFrom').timepicker({
            defaultTime: '07:00 AM',
            minuteStep: 30
        }).on('changeTime.timepicker', function(e){
            validateTimes(this, e);
            loadResourceTable();
	});

        $('#txtReserveTimeTo').timepicker({
            defaultTime: '07:30 AM',
            minuteStep: 30
        }).on('changeTime.timepicker', function(e){
            validateTimes(this, e);
            loadResourceTable();
        });