Linking jQuery range slider with datePicker

Andrew87 Published at Dev

Andrew87

I am trying to link the DatePicker and RangeSlider together with little success.Changes in either element should be reflected in the other, also if possible have a defined range for the date picker. I took the slider code from an example which was concerned with creating a slider for each second of a day so some of the JS calculations may be removed.

Please use jsFiddle Link as stackOverflow system is not working with my code.

var dt_from = "2011-11-01";
var dt_to = "2015-11-24";

$('.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);
  return date + '-' + month + '-' + year;
};


$("#slider-range").slider({
  range: true,
  min: min_val,
  max: max_val,
  step: 604800,
  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));
  }
});


$("#start_datepicker").datepicker({
  changeMonth: true,
  changeYear: true
});

$("#end_datepicker").datepicker({
  changeMonth: true,
  changeYear: true
});

#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;
}

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="time-range">
  <p>Start date: <span class="slider-time"></span> 
    <br>End date: <span class="slider-time2"></span>
  </p>

  <div class="sliders_step1">
    <div id="slider-range"></div>

    <p>Start date:
      <input type="text" id="start_datepicker">
    </p>
    <p>End date:
      <input type="text" id="end_datepicker">
    </p>
  </div>
</div>

ShivangiBilora

Seems like this jsfiddle helped the user solve the problem:

jsfiddle.net/mmrevOxf

Key concept here is the onselect event occurs after some text has been selected

Here, I added the following options to the datepicker:

$( "#start_datepicker" ).datepicker({
  minDate: new Date(dt_from),
  maxDate: new Date(dt_to),
  onSelect: function() { 
    $('.slider-time').html(formatDT(new Date(this.value)));
    min_val = Date.parse(this.value)/1000;
    $( "#slider-range" ).slider( "option", "values", [ min_val,  max_val] );
  }

Collected from the Internet

Please contact [email protected] to delete if infringement.