jQuery-UI Date and Time-Range Picker

2020-02-06 08:47发布

站内问答 / 移动开发
1486 4 4

I'm creating a page to manage the our times at the office (for example when we made home-office). This requires selecting a date and then time-range.

I know about the Date-Picker from jQuery-UI, and there also seems to be something interesting for time picking. But since I need a start and end time, a UI to select date and time range would be perfect. Is there something you could recommend?

4条回答
萌系小妹纸
2楼-- · 2020-02-06 09:05

Visit jQuery UI datepicker range example and click "view source".

Combine with jquery timepicking solution found here.

That should hopefully get you going in the right direction.

查看更多
0人赞 添加讨论(0) 举报
仙女界的扛把子
3楼-- · 2020-02-06 09:09

Another interesting option could be handle the date in the date-picker and the time-range with a separated UI component (in this specific case start and end time are in the same day).

You can take a look at these time-range sliders:

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

查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
4楼-- · 2020-02-06 09:16

You can select time using this slider. 

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

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
5楼-- · 2020-02-06 09:18 

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)