jQuery-UI Date and Time-Range Picker

前端未结

关注

 4  1452

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 t

相关标签:

4条回答

慢半拍i

2020-12-11 08:04
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)
发布评论:

提交评论
- 加载中...

爱一瞬间的悲伤

2020-12-11 08:09

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)

夕颜

2020-12-11 08:11

$(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)

迷失自我

2020-12-11 08:12

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)
发布评论:

提交评论
- 加载中...