如何将下拉选项值设置为24小时格式，但显示AM / PM时间供用户选择？使用 jQuery Timepicker（作者：jonthornton）

问：

我正在使用以下 jonthornton/jquery-timepicker 插件 （https://github.com/jonthornton/jquery-timepicker)

代码如下：

$('.timepicker').timepicker({ 
            'timeFormat': 'H:i',
            'step': '30',
            'minTime': '8:00am',
            'maxTime': '6:00pm',
            //'defaultTime': '2:00pm',
            'useSelect': 'true',
            'className': 'timepicker ui-timepicker-input'
        });

它会在 24 小时内自动生成基于 'timeFormat'： 'H：i' 选项的下拉列表的以下 HTML 输出。

<select class="ui-timepicker-select timepicker ui-timepicker-input" name="ui-timepicker-pick_up_time">
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
</select>

但是，我希望它生成如下内容。24 小时设置为值，但在用户的下拉列表中显示 AM/PM。

<select class="ui-timepicker-select timepicker ui-timepicker-input" name="ui-timepicker-pick_up_time">
<option value="08:00">08:00 AM</option>
<option value="08:30">08:30 AM</option>
<option value="09:00">09:00 AM</option>
<option value="09:30">09:30 AM</option>
<option value="10:00">10:00 AM</option>
<option value="10:30">10:30 AM</option>
<option value="11:00">11:00 AM</option>
<option value="11:30">11:30 AM</option>
<option value="12:00">12:00 Noon</option>
<option value="12:30">12:30 PM</option>
<option value="13:00">01:00 PM</option>
<option value="13:30">01:30 PM</option>
<option selected="selected" value="14:00">02:00 PM</option>
<option value="14:30">02:30 PM</option>
<option value="15:00">03:00 PM</option>
<option value="15:30">03:30 PM</option>
<option value="16:00">04:00 PM</option>
<option value="16:30">04:30 PM</option>
<option value="17:00">05:00 PM</option>
<option value="17:30">05:30 PM</option>
<option value="18:00">06:00 PM</option>
<option value="18:30">06:30 PM</option>
</select>

这样做的原因是我必须以 24 小时格式将选定的时间值传递给服务器，但我想通过以 AM/PM 显示时间来使其对用户更加用户友好。

如何解决这个问题？

另外，我想设置一个默认时间，例如下午 2：00。因此，在页面加载时默认选择此时间。这可能吗？