我创建一个页面在办公室来管理我们的时间（例如，当我们做家庭办公室）。 这就需要选择一个日期，然后时间范围。
我知道的日期选择器从jQuery的UI，而且还似乎是时间采摘一些有趣的事情。 但因为我需要一个开始和结束时间，一个UI选择日期和时间范围将是完美的。 有什么你可以推荐吗？
Answer 1:
访问jQuery UI的日期选择范围例如 ，然后单击“查看源文件”。
使用jQuery timepicking解决方案结合在这里找到 。
这应该希望让你在正确的方向前进。
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 Date and Time-Range Picker
