4

我正在创建一个页面来管理我们在办公室的时间（例如，当我们在家办公时）。这需要选择日期和时间范围。

我知道 jQuery-UI 中的 Date-Picker，而且时间选择似乎也很有趣。但由于我需要一个开始和结束时间，选择日期和时间范围的 UI 将是完美的。有什么可以推荐的吗？

4

4 回答 4

6

访问jQuery UI 日期选择器范围示例并单击“查看源代码”。

结合此处找到的 jquery timepicking 解决方案。

这应该有希望让你朝着正确的方向前进。

于 2012-12-07T19:39:33.553 回答
3

另一个有趣的选项是使用单独的 UI 组件处理日期选择器中的日期和时间范围（在这种特定情况下，开始时间和结束时间在同一天）。

您可以查看这些时间范围滑块：

$("#slider-range").slider(options_object);

http://jsfiddle.net/jrweinb/MQ6VT/

http://marcneuwirth.com/blog/2010/02/21/using-a-jquery-ui-slider-to-select-a-time-range/

于 2016-01-27T16:23:57.937 回答
0 

$(document).ready(function(){
  $(".datetimepicker").datetimepicker({
      timepicker: true,
      allowTimes: [
          '12:00', '12:30', '13:00','13:30','14:00',
'14:30', '15:00', '15:30', '16:00',   ]
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.16/jquery.datetimepicker.full.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.16/jquery.datetimepicker.css">
<input type="text" class="datetimepicker" />

于 2018-01-08T08:06:24.303 回答
0

您可以使用此滑块选择时间。 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 23px;
    height: 24px;
    border: 0;
    background: url('https://www.w3schools.com/howto/contrasticon.png');
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 23px;
    height: 24px;
    border: 0;
    background: url('https://www.w3schools.com/howto/contrasticon.png');
    cursor: pointer;
}
</style>
</head>
<body>


<div class="slidecontainer">
  <input type="range" min="10" max="22" maxvalue="10" class="slider" id="myRange">
  <p>Value: <span id="demo">4PM</span></p>
</div>

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
slider.oninput = function() {
    var time=slider.value;
    if(time<12){
    time=time+'AM';
    }
    else if(time>12){
    time=time-12+'PM';
    }
    else if(time=12){
    time=12+'PM';
    }
    //alert(time);
  output.innerHTML = time;
}
</script>

</body>
</html>

于 2018-02-16T12:11:30.670 回答