Question

我正在使用Jquery Timepicker。

我有两个输入字段 - 接受时间。

我在这里使用Jquery UI计时器 - http://jonthornton.github.com/jquery-timepicker/

用于处理预约日期和时间。我为用户创建的以下代码可以选择约会的开始时间和结束时间默认生成1小时的持续时间，但我需要30分钟的开始时间和结束时间之间的差距，这些可能如何。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Demos and Documentation</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css" />

    <script src="lib/bootstrap-datepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="lib/bootstrap-datepicker.css" />

    <script src="lib/pikaday.js"></script>
    <link rel="stylesheet" type="text/css" href="lib/pikaday.css" />

    <script src="lib/jquery.ptTimeSelect.js"></script>
    <link rel="stylesheet" type="text/css" href="lib/jquery.ptTimeSelect.css" />
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />

    <script src="lib/moment.min.js"></script>
    <script src="lib/site.js"></script>
    <link rel="stylesheet" type="text/css" href="lib/site.css" />

    <script src="dist/datepair.js"></script>
    <script src="dist/jquery.datepair.js"></script>
</head>
<body>
    <section id="examples">
        <article>
            <div class="demo">
                <p id="basicExample">
                    <input type="text" class="date start" />
                    <input type="text" class="time start" /> to
                    <input type="text" class="time end" id="ggg"/>
                    <input type="text" class="date end" />
                </p>
            </div>
            <script>
                $('#basicExample .time').timepicker({
                    'showDuration': false,
                    'timeFormat': 'g:ia',
					'step': '60',
					'minTime': '9:00am',
					'maxTime': '7:00pm',
					'disableTimeRanges': [
						['1pm', '3pm'],
					]
				});
			    $('#basicExample .date').datepicker({
						format: "dd/mm/yyyy",
						weekStart: 1,
						daysOfWeekDisabled: "0,6",
						autoclose: true
                });
				$('#basicExample .time').datepair();
                var basicExampleEl = document.getElementById('basicExample');
                var datepair = new Datepair(basicExampleEl);
            </script>
        </article> 
        </section>
</body>
</html>

Answer 1

如果我理解正确，你需要半小时的间隔，改变

'step': '60',

到

'step': '30'

如果您想在结束时间的第二个下拉列表中添加30分钟的间隔，请在$('#basicExample .date')声明之前添加以下代码段

               $('#basicExample .end').timepicker({
                    'showDuration': false,
                    'timeFormat': 'g:ia',
                    'step': '30',
                    'minTime': '9:00am',
                    'maxTime': '7:00pm',
                    'disableTimeRanges': [
                        ['1pm', '3pm'],
                    ]
                });

Jquery TimePicker：如何动态更改Datepair结束时间

1 个答案: