Javascript slider that scrolls by date and time

I saw some nice examples of jQuery sliders that select date ranges: http://ghusse.github.com/jQRangeSlider/stable/demo/

And time ranges: http://marcneuwirth.com/blog/2011/05/22/revisiting-the-jquery-ui-time-slider/

But I'm looking for something that can select date ranges up to the month, day, minute. It would be great to have it as a date range selector and simple slider.

Has anyone seen such an implementation? Will the standard jQuery UI slider use Unix time since my values ​​make sense?

+4
source share
2 answers

In case anyone finds this thread, I was able to accomplish this by converting my timestamps to unix time, and then breaking my data down by month. The slider of the current month expands to the full width of the screen, so you can select as many as you can by clearing. The arrow keys do the rest.

+2
source

Here is my fiddle for this (I also looked for something, and then decided to create it): http://jsfiddle.net/Lcrsd3jt/45/

HTML:

<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script> <script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> <div id="time-range"> <p>Time Range: <span class="slider-time"></span> - <span class="slider-time2"></span> </p> <div class="sliders_step1"> <div id="slider-range"></div> </div> </div> 

JS:

 var dt_from = "2014/11/01 00:34:44"; var dt_to = "2014/11/24 16:37:43"; $('.slider-time').html(dt_from); $('.slider-time2').html(dt_to); var min_val = Date.parse(dt_from)/1000; var max_val = Date.parse(dt_to)/1000; function zeroPad(num, places) { var zero = places - num.toString().length + 1; return Array(+(zero > 0 && zero)).join("0") + num; } function formatDT(__dt) { var year = __dt.getFullYear(); var month = zeroPad(__dt.getMonth()+1, 2); var date = zeroPad(__dt.getDate(), 2); var hours = zeroPad(__dt.getHours(), 2); var minutes = zeroPad(__dt.getMinutes(), 2); var seconds = zeroPad(__dt.getSeconds(), 2); return year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds; }; $("#slider-range").slider({ range: true, min: min_val, max: max_val, step: 10, values: [min_val, max_val], slide: function (e, ui) { var dt_cur_from = new Date(ui.values[0]*1000); //.format("yyyy-mm-dd hh:ii:ss"); $('.slider-time').html(formatDT(dt_cur_from)); var dt_cur_to = new Date(ui.values[1]*1000); //.format("yyyy-mm-dd hh:ii:ss"); $('.slider-time2').html(formatDT(dt_cur_to)); } }); 

CSS

 #time-range p { font-family:"Arial", sans-serif; font-size:14px; color:#333; } .ui-slider-horizontal { height: 8px; background: #D7D7D7; border: 1px solid #BABABA; box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset; clear: both; margin: 8px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .ui-slider { position: relative; text-align: left; } .ui-slider-horizontal .ui-slider-range { top: -1px; height: 100%; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; height: 8px; font-size: .7em; display: block; border: 1px solid #5BA8E1; box-shadow: 0 1px 0 #AAD6F6 inset; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; background: #81B8F3; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #A0D4F5), color-stop(100%, #81B8F3)); background-image: -webkit-linear-gradient(top, #A0D4F5, #81B8F3); background-image: -moz-linear-gradient(top, #A0D4F5, #81B8F3); background-image: -o-linear-gradient(top, #A0D4F5, #81B8F3); background-image: linear-gradient(top, #A0D4F5, #81B8F3); } .ui-slider .ui-slider-handle { border-radius: 50%; background: #F9FBFA; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #C7CED6), color-stop(100%, #F9FBFA)); background-image: -webkit-linear-gradient(top, #C7CED6, #F9FBFA); background-image: -moz-linear-gradient(top, #C7CED6, #F9FBFA); background-image: -o-linear-gradient(top, #C7CED6, #F9FBFA); background-image: linear-gradient(top, #C7CED6, #F9FBFA); width: 22px; height: 22px; -webkit-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset; -moz-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset; box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset; -webkit-transition: box-shadow .3s; -moz-transition: box-shadow .3s; -o-transition: box-shadow .3s; transition: box-shadow .3s; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 22px; height: 22px; cursor: default; border: none; cursor: pointer; } .ui-slider .ui-slider-handle:after { content:""; position: absolute; width: 8px; height: 8px; border-radius: 50%; top: 50%; margin-top: -4px; left: 50%; margin-left: -4px; background: #30A2D2; -webkit-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF; -moz-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 white; box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF; } .ui-slider-horizontal .ui-slider-handle { top: -.5em; margin-left: -.6em; } .ui-slider a:focus { outline:none; } 

You need to treat the date-time as a timestamp and just use the standard slider for an integer, recounting the date-time for input (or something else) on the fly when moving the slider.

+9
source

Source: https://habr.com/ru/post/1410923/


All Articles