我在这里使用xd_soft datetimepicker
:http://xdsoft.net/jqplugins/datetimepicker/
我通过添加以下js代码来填充时间选项:
$('.my_class').datetimepicker({
format:'m/d/Y g:i A',
formatTime: 'g:i A',
allowTimes: ['2:00 PM', '2:30 PM',
'3:00 PM', '3:30 PM',
'4:00 PM', '4:30 PM',
'5:00 PM', '5:30 PM',
'6:00 PM', '6:30 PM',
'7:00 PM', '7:30 PM',
'8:00 PM', '8:30 PM'],
timepicker: true,
lang: 'en'
});
这会填充正确的时间选项,但是当我选择一个值时,该小时中的每个值都会突出显示。例如,如果我点击下午2:00,则会突出显示下午2:00和下午2:30。如果我点击下午3:30,将突出显示下午3:30和下午3:00。请注意,正确的值仍会填充相应的input
元素。
问题在于它只将类xdsoft_current
添加到两个类div中,而它只应添加到一个类中。在下面的示例中,如果我点击下午3:30,我会得到相应的HTML。
<div class="xdsoft_time_variant" style="margin-top: -51px;">
<div class="xdsoft_time " data-hour="14" data-minute="0">2:00 PM</div>
<div class="xdsoft_time " data-hour="14" data-minute="30">2:30 PM</div>
<div class="xdsoft_time xdsoft_current" data-hour="15" data-minute="0">3:00 PM</div>
<div class="xdsoft_time xdsoft_current" data-hour="15" data-minute="30">3:30 PM</div>
...
<div class="xdsoft_time " data-hour="19" data-minute="30">7:30 PM</div>
<div class="xdsoft_time " data-hour="20" data-minute="0">8:00 PM</div>
<div class="xdsoft_time " data-hour="20" data-minute="30">8:30 PM</div>
</div>
如何只选择一个值?