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

I want a bootstrap time picker to select start time from drop- down where duration time gap is 30 minutes

本文关键字：时间 开始时 开始 选择 持续时间 30分钟 下拉列表 一个 选择器 我想要      更新时间：2023-09-26

条件：时间也应该在上午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动态时间下拉菜单，引导程序时间选择器不工作，响应引导程序3时间选择器，http://www.okler.net/forums/topic/timepicker-not-showing-when-click-on-input/

我是引导程序和JavaScript的初学者。有人能帮我做这个吗。

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

    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');
           }
       }
    }

我在更改时间选择器的时间时调用了该函数，因为我想根据时间的变化加载一个表。并使用minuteStep将间隔自定义为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();
        });

相关文章：