Question

我正在尝试使用Google日历中的下拉列表模拟时间戳。我的结构如下：

HTML：

<input type="text" class="timepicker-with-dropdown">
<div class="timepicker-select-box">
    <div>00:00</div>
    <div>00:30</div>
    <div>01:00</div>
    ...
    <div>23:30</div>
</div>

.timepicker-select-box显示为＆＃39;下拉列表，显示的行数限制为7（如GC中所示）。这可以通过CSS实现：

CSS：

.timepicker-select-box {
    background-color: white;
    border: 1px solid #999;
    cursor: default;
    font-size: 12px;
    height: 140px;
    line-height: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    text-align: center;
    width: 70px;
    z-index: 1000;
}

其他一切都有效，但下拉列表显示＆＃39; 00＆＃39;最重要的是，显示，比如说，12：00＆＃39;默认情况下（或最接近当前选择的值）。

我该怎么做？

有关当前实施的信息，请参阅Fiddle。我正在使用jQuery（很想看到有人在Angular上实现这个，但也许这是另一个问题）。

Answer 1

<label for="select-choice-etime">Earliest acceptable time:</label>
<select name="select-choice-etime" id="select-choice-etime">
<option value="12:00 AM">12:00 AM</option>
<option value="12:30 AM">12:30 AM</option>
<option value="1:00 AM">1:00 AM</option>
<option value="1:30 AM">1:30 AM</option>
<option value="2:00 AM">2:00 AM</option>
<option value="2:30 AM">2:30 AM</option>
<option value="3:00 AM">3:00 AM</option>
<option value="3:30 AM">3:30 AM</option>
<option value="4:00 AM">4:00 AM</option>
<option value="4:30 AM">4:30 AM</option>
<option value="5:00 AM">5:00 AM</option>
<option value="5:30 AM">5:30 AM</option>
<option value="6:00 AM">6:00 AM</option>
<option value="6:30 AM">6:30 AM</option>
<option value="7:00 AM">7:00 AM</option>
<option value="7:30 AM">7:30 AM</option>
<option value="8:00 AM">8:00 AM</option>
<option value="8:30 AM">8:30 AM</option>
<option value="9:00 AM">9:00 AM</option>
<option value="9:30 AM">9:30 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="12:30 PM">12:30 PM</option>
<option value="1:00 PM">1:00 PM</option>
<option value="1:30 PM">1:30 PM</option>
<option value="2:00 PM">2:00 PM</option>
<option value="2:30 PM">2:30 PM</option>
<option value="3:00 PM">3:00 PM</option>
<option value="3:30 PM">3:30 PM</option>
<option value="4:00 PM">4:00 PM</option>
<option value="4:30 PM">4:30 PM</option>
<option value="5:00 PM">5:00 PM</option>
<option value="5:30 PM">5:30 PM</option>
<option value="6:00 PM">6:00 PM</option>
<option value="6:30 PM">6:30 PM</option>
<option selected="selected" value="7:00 PM">7:00 PM</option>
<option value="7:30 PM">7:30 PM</option>
<option value="8:00 PM">8:00 PM</option>
<option value="8:30 PM">8:30 PM</option>
<option value="9:00 PM">9:00 PM</option>
<option value="9:30 PM">9:30 PM</option>
<option value="10:00 PM">10:00 PM</option>
<option value="10:30 PM">10:30 PM</option>
<option value="11:00 PM">11:00 PM</option>
<option value="11:30 PM">11:30 PM</option>
</select>

如果你如上所示在AM / PM转换你的时间，你可以使用以下功能。

并且可以将当前时间转换为您选项中使用的表格中最接近的半小时（例如最近的＆＃34;晚上10:30和＃34;输入时间），然后使用该时间选择适当的选择。

function getNearestHalfHourTimeString() {
var now = new Date();
var hour = now.getHours();
var minutes = now.getMinutes();
var ampm = "AM";
if (minutes < 15) {
    minutes = "00";
} else if (minutes < 45){
    minutes = "30";
} else {
    minutes = "00";
    ++hour;
}
if (hour > 23) {
    hour = 12;
} else if (hour > 12) {
    hour = hour - 12;
    ampm = "PM";
} else if (hour == 12) {
    ampm = "PM";
} else if (hour == 0) {
    hour = 12;
}

return(hour + ":" + minutes + " " + ampm);
}

你可以看到所需的选项：

$('#select-choice-etime option').removeAttr('selected');

$('#select-choice-etime option[value="' + getNearestHalfHourTimeString() + '"]').attr('selected', 'selected');

您可以在此处查看：http://jsfiddle.net/jfriend00/Zz7pW/

Answer 2

我已经尝试过你所要求的但我无法将所选择的一个移到下拉列表顶部

JSFIDDLE

基本上我创建了一个var来获取timeArr索引（line 51, 52）。

然后在填充下拉菜单时，将选定的timeArr与当前timeArr（line 23）进行比较。

如果当前timeArr与选定的timeArr相同，则会将id="focus"添加到div，然后只需要document.getElementById('focus').scrollIntoView(true)

Answer 3

您应该使用JQuery Timepicker来解决这个问题。一行代码将解决您的问题。您可以在http://jonthornton.github.io/jquery-timepicker/

下载并阅读相关文档

例如，此代码将为您提供所需的输出

$('#basicExample').timepicker();

这个开源项目以及Github上的文档记录我建议你在那里阅读https://github.com/jonthornton/jquery-timepicker#timepicker-plugin-for-jquery

如何在滚动下拉输入div中直观地重新排序元素？

3 个答案: