Multiple Time Pickers on a page

pixelsalsaApr 4, 2019

Hi - So I have a time picker working fine - the problem occurs when I have more than one as the others don't work.
JS is <script type="text/javascript">
$(function() {

			$('.datetimepicker').datetimepicker({
			showClose: true,
			sideBySide: true,
			format: 'h:mm A',
			disabledHours: [0,1,2,3,4,5,6,7,8,22,23],
			stepping:15     
			
	});

});

&lt;/script&gt;

Any quick thoughts on fixing this please?

SemiColonWebSTAFFApr 6, 2019

Hello,

You will need to assign a Unique ID to the .datetimepicker Elements and then change the data-target Values accordingly. Consider using this Example:

<div class="col-md-6 bottommargin-sm">
	<label for="">Date &amp; Time Picker</label>
	<div class="form-group">
		<div class="input-group tleft" data-target-input="nearest" data-target="#datetimepicker">
			<input type="text" id="datetimepicker" class="form-control datetimepicker-input datetimepicker" data-target="#datetimepicker" placeholder="MM/DD/YYYY 00:00 AM/PM"/>
			<div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
				<div class="input-group-text"><i class="icon-calendar"></i></div>
			</div>
		</div>
	</div>
</div>
<div class="col-md-6 bottommargin-sm">
	<label for="">Date &amp; Time Picker</label>
	<div class="form-group">
		<div class="input-group tleft" data-target-input="nearest" data-target="#datetimepicker-2">
			<input type="text" id="datetimepicker-2" class="form-control datetimepicker-input datetimepicker" data-target="#datetimepicker-2" placeholder="MM/DD/YYYY 00:00 AM/PM"/>
			<div class="input-group-append" data-target="#datetimepicker-2" data-toggle="datetimepicker">
				<div class="input-group-text"><i class="icon-calendar"></i></div>
			</div>
		</div>
	</div>
</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.