2012-03-01 96 views
4

我有一个显示为单选按钮的时间列表。我想使用JavaScript来选择距离用户当前时间最近的那个。我已经在我的网站上使用jquery(如果这很重要)。另外我还有一组单选按钮,我想默认选择“最早可接受时间”的+3小时。将当前时间转换为最近的半小时

<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> 
+0

老实说,我有不知道从哪里开始。 :/ elclanrs虽然给了我一些好主意。 – 2012-03-01 08:12:13

+3

如果是6:45 PM,你想选择'6:30 PM'还是'7:00 PM'? – 2012-03-01 08:12:43

回答

5

下面就以目前的时间转换到最近的半小时,在你的选择中(例如最近的“10:30 PM”型时间)形式的功能,然后一个办法用这段时间选择适当的选项。

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); 
} 

您可以选择与此所需的选项:

// remove any previous selection 
$('#select-choice-etime option').removeAttr('selected'); 

// select the one that matches the current time 
$('#select-choice-etime option[value="' + getNearestHalfHourTimeString() + '"]').attr('selected', 'selected');​ 

你可以看到它在这里工作:http://jsfiddle.net/jfriend00/Zz7pW/

+0

简化了小时转换代码。 – jfriend00 2012-03-01 09:15:38

+0

获取意外的令牌错误,但我知道这个解决方案的工作原理。可能是我的jquery移动代码有问题。你碰巧知道他们是否改变了jqm中的选项选择方法或最近的jquery更新? – 2012-03-01 18:01:37

1

那里!这将让你开始:

var time = new Date(), 
    hours = time.getHours(), 
    minutes = (time.getMinutes().length < 2) ? time.getMinutes() : '0' + time.getMinutes(); 
    ampm = 'AM'; 

if (hours.match(/[13-23]/)) { ampm = 'PM'; } 

// You have to convert 13 to 1, 14 to 2 etc. 
+0

'[13-23]'......它真的有用吗? – 2015-11-09 20:15:25

0

这一个是基于GMT时间tz=GM查询字符串:

$(document).ready(function() { 

    $.getJSON("http://json-time.appspot.com/time.json?tz=GMT&callback=?", function(data) { 
     var GMT3 = data.hour; // data.hour+3 (if you want to use GMT+3 
     if (data.minute < 15) { 
      alert("Current Time is: " + GMT3 + " Selected is " + GMT3 + ":00"); 
     } 
     else if (data.minute < 45) { 
      alert("Current Time is: " + GMT3 + " Selected is" + GMT3 + ":30"); 
     } 
     else { 
      alert("Current Time is: " + GMT3 + " Selected is" + GMT3 + 1 + ":00"); 
     } 
    }) 
});​ 

getJSON方法返回:

{ 
    "tz": "GMT", 
    "hour": 8, 
    "datetime": "Thu, 01 Mar 2012 08:12:25 +0000", 
    "second": 25, 
    "error": false, 
    "minute": 12 
} 
0

首先你可以检查这段代码。

var now = new Date(); 
var hour = now.getHours(); 
var min = now.getMinutes(); 
var ext = hour > 11 ? 'PM' : 'AM'; 

var tempRes = $("<select>"); 
// first we select all PM or AM and append to temp element 
$("#select-choice-etime > option[value$='" + ext + "']").appendTo(tempRes); 

// and then we select current hour elements within PM or AM 
var result = tempRes.find("option[value^='" + hour + "']"); 

// finally we have two elements in result variable 
// for example if hour is 10:12 PM 
// result has two items which are 10:00 PM and 10:30 PM 
// 
// i think you can solve from there 
5

假设你想舍入分钟可达你可以使用上限函数最近00/30/60:

var now = new Date(); 
now.setMinutes(Math.ceil(now.getMinutes()/30) * 30); 

// Test cases: 
// Math.ceil(0/30) * 30 = 0 
// Math.ceil(1/30) * 30 = 30 
// Math.ceil(30/30) * 30 = 30 
// Math.ceil(31/30) * 30 = 60 
// Math.ceil(59/30) * 30 = 60 
// 
// Note that setMinutes(60) increments the hour and sets the minute equal to zero 

var h12h = now.getHours(); 
var m12h = now.getMinutes(); 
var ampm; 
if (h12h >= 0 && h12h < 12) { 
    if (h12h === 0) { 
     h12h = 12; // 0 becomes 12 
    } 
    ampm = "AM"; 
} 
else { 
    if (h12h > 12) { 
     h12h -= 12; // 13-23 becomes 1-11 
    } 
    ampm = "PM"; 
} 
var timeString = h12h + ":" + ("00" + m12h).slice(-2) + " " + ampm; 
$("#select-choice-etime").val(timeString); 

注:与轮更换小区映射分00。 ..14至00,15 ... 44〜30和44 ... 59到60

Demo here

+0

+1甜蜜!不错的一个 – 2012-03-01 09:02:10

+1

前两行是我搜索的内容 – 2015-11-09 13:48:41

相关问题