JQuery UI slider in 2 hour range

Question

JQuery UI slider in 2 hour range

Navigation

#1 by (1 votes)

3

JSON:

{
    "saturday":[
        {
            "start":"09:00",
            "stop":"10:00"
        }, 
        {
            "start":"12:00",
            "stop":"13:00"
        }
    ],"sunday":[
        {
            "start":"13:00",
            "stop":"15:00"
        }, 
        {
            "start":"19:00",
            "stop":"21:00"
        }
    ],
    "monday":[
        {
            "start":"15:00",
            "stop":"16:00"
        }
    ],
    "tuesday":[
        {
            "start":"19:00",
            "stop":"21:00"
        }
    ],
    "wednesday":[],
    "thursday":[],
    "friday":[
        {
            "start":"19:00",
            "stop":"21:00"
        }
    ]
}

This is the view:

I want to show the values between the 2 hours that appear, 30 minute intervals.

Javascript Code:

$(document).ready(function(){
    $.getJSON("json/datetime.json", function( data ) {

      //saturday
      if (data.saturday[0]!=null) {
        for(i in data.saturday)
        {

          if (i==0) {
            $('.available-time').append('\
                  <ul>\
                    <li>\
                      <div class="form-input-group">\
                        <div class="form--input-inner">\
                          <div class="choice">\
                            <div class="form-checkbox-group">\
                              <label for="saturday" class="form-checkbox-title">السبت</label>\
                              <input type="checkbox" id="saturday" name="saturday">\
                              <span></span>\
                            </div>\
                          </div>\
                        </div>\
                      </div>\
                    </li>\
                    <li>\
                      <div class="form-input-group available-range">\
                        <div class="form--input-inner">\
                          <div class="slider-range" id="saturday-range-'+i+'"></div>\
                          <span class="start-time">'+data.saturday[i].start+'</span>\
                          <span class="stop-time">'+data.saturday[i].stop+'</span>\
                        </div>\
                      </div>\
                    </li>\
                  </ul>');
            $("#saturday-range-"+i).slider({
              range: true,
              min: 0,
              max: 1440,
              step: 15,
              slide: function(e, ui) {
                var hours = Math.floor(ui.value / 60);
                var minutes = ui.value - (hours * 60);
                if(hours.toString().length == 1) hours = '0' + hours;
                if(minutes.toString().length == 1) minutes = '0' + minutes;

              }
            });
          }
          else {

            $('.available-time').append('\
                  <ul>\
                    <li>\
                      &nbsp\
                    </li>\
                    <li>\
                      <div class="form-input-group available-range">\
                        <div class="form--input-inner">\
                          <div class="slider-range" id="saturday-range-'+i+'"></div>\
                          <span class="start-time">'+data.saturday[i].start+'</span>\
                          <span class="stop-time">'+data.saturday[i].stop+'</span>\
                        </div>\
                      </div>\
                    </li>\
                  </ul>');
            $("#saturday-range-"+i).slider({
              range: true,
              min: 0,
              max: 1440,
              step: 15,
              slide: function(e, ui) {
                var hours = Math.floor(ui.value / 60);
                var minutes = ui.value - (hours * 60);
                if(hours.toString().length == 1) hours = '0' + hours;
                if(minutes.toString().length == 1) minutes = '0' + minutes;

              }
            });
          }
        }
        $('.available-time').append('<br>');
      }

(etc.)

The user must select intervals of at least 30 minutes of each hour he wants, how do I get the values for the form?

javascript jquery html5 json jquery-ui

asked by Humberto Gutierrez 19.10.2016 в 07:51

source

1 answer

Create pdf report with ireport in netbeans with JSON as datasource Caused by: java.lang.VerifyError: Bad type on operand stack

score 1 · Answer 1

You can use a technique like the following: Having a number for the start time of the slider (data-time-start) and the number of hours that the same (data-time-span) should cover, you could create a function to convert the numbers to time format . The format for the numbers would follow the pattern of the following examples:

1.5 equals 01:30
4 equals 04:00
23.5 equals 23:30

Then you would need a function to which you would send the start time and the range of hours that has been chosen and this would return the time already formatted to show the user, for example if we send it as start time 6 and as a%% range the function should return 3.5 . In this way you can implement the slider using decimal numbers and translate these numbers to hour format in each interaction in order to show it to the user.

When you are going to send the data you can use the decimal numbers and do the conversion on the server or translate the decimal numbers into the time format with the same function created and then send them.

Here is a small example so you can get an idea of how it works:

NOTE: To prevent the user from choosing a time of less than one hour, you should only return 09:30 in the function called by the event false when the value is less than slide . (I have placed it in the example)

var sld = $("#slider");
var start = +(sld.attr("data-time-start"));

//---Crear los atributos de hora
sld.attr("data-time-init", formatHour(start, 0));

//---Crear el slider
sld.slider({
    range: "min",
    min: 0,
    max: +sld.attr("data-time-span"),
    step: .5,
    value: 1,
    slide: updateSlider
});

//---Update Slider
function updateSlider (evt, ui) {

    if (ui.value < 1) { return false; }        

    updateHour(ui.value);

}

//---Update hour
function updateHour (value) {

    sld.attr("data-time-current", "+ " + value + (value === 1 ? " hora" : " horas") + " (" + formatHour(start, value) + ")" );
}

//---Format hour
function formatHour(init, span) {

    var total = init + span;
    var hour = Math.floor(total);
    var minutes = (total - hour) * 60;
  
    return "00".slice(0, - hour.toString().length) + hour + ":" + "00".slice(0, - minutes.toString().length) + minutes;

}

updateHour(1);

#container {
    margin: 0 auto;
    width: 50%;
}

#slider::before,
#slider::after {
    display: inline-block;
    font-size: 10px;
    position: absolute;
    top: 50%;
}

#slider::before {
    content: attr(data-time-init);
    left: -10px;
    -moz-transform: translate(-100%, -50%);
    -webkit-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%);
}

#slider::after {
    content: attr(data-time-current);
    right: -10px;
    -moz-transform: translate(100%, -50%);
    -webkit-transform: translate(100%, -50%);
    transform: translate(100%, -50%);
}

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<div id="container">
  <div id="slider" data-time-start="9" data-time-span="5"></div>
</div>