Question

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

我从jQuery-UI了解Date-Picker，并且似乎还有一些有趣的时间选择。但由于我需要一个开始和结束时间，因此选择日期和时间范围的UI将是完美的。有什么值得推荐的吗？

Answer 1

访问jQuery UI datepicker range example，然后点击“查看来源”。

与jquery timepicking解决方案found here结合使用。

这应该会让你朝着正确的方向前进。

Answer 2

另一个有趣的选项可能是处理日期选择器中的日期和具有独立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/

Answer 3

$(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" />

Answer 4

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

<!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>

jQuery-UI日期和时间范围选择器

4 个答案: