4

私はオフィスでの時間を管理するためのページを作成しています（たとえば、ホームオフィスを作成したとき）。これには、日付を選択してから時間範囲を選択する必要があります。

jQuery-UIのDate-Pickerについて知っていますが、時間の選択にも興味深いものがあるようです。しかし、開始時刻と終了時刻が必要なので、日付と時刻の範囲を選択するためのUIが最適です。おすすめできるものはありますか？

4

4 に答える 4

6

jQuery UIの日付ピッカー範囲の例にアクセスし、[ソースの表示]をクリックします。

ここにあるjqueryタイムピッキングソリューションと組み合わせます。

それはうまくいけばあなたが正しい方向に進むようになるはずです。

于 2012-12-07T19:39:33.553 に答える
3

もう1つの興味深いオプションは、日付ピッカーで日付を処理し、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 に答える