Tagged: time picker html

Time-Range-Picker jquery time range picker example – jQueryUI TimeRangePicker 0

Time-Range-Picker jquery time range picker example – jQueryUI TimeRangePicker

Time-Range-Picker jquery time range picker example – jQueryUI TimeRangePicker

jQuery Timerangepicker can parse the most used Start time and End time representations allowing we and we users to enter start time and End time using their prefered way for simple writing it.Time-Range-Picker jquery time range picker example – jQueryUI TimeRangePicker

Installation

npm i jquery-timepicker
or
bower install jquery-timepicker-wvega --save

How to create Time-Range Picker using jQuery UI Code

index.html

<div id="time-range">
    <p>Simple Time Range Example: <span class="slider-time">10:00 AM</span> - <span class="slider-time2">12:00 PM</span>

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

index.js

$("#time-range-slider").slider({
    range: true,
    min: 0,
    max: 1440,
    step: 15,
    values: [600, 720],
    slide: function (e, ui) {
        var timehours = Math.floor(ui.values[0] / 60);
        var timeminutes = ui.values[0] - (timehours * 60);

        if (timehours.length == 1) timehours = '0' + timehours;
        if (timeminutes.length == 1) timeminutes = '0' + timeminutes;
        if (timeminutes == 0) timeminutes = '00';
        if (timehours >= 12) {
            if (timehours == 12) {
                timehours = timehours;
                timeminutes = timeminutes + " PM";
            } else {
                timehours = timehours - 12;
                timeminutes = timeminutes + " PM";
            }
        } else {
            timehours = timehours;
            timeminutes = timeminutes + " AM";
        }
        if (timehours == 0) {
            timehours = 12;
            timeminutes = timeminutes;
        }



        $('.slider-time').html(timehours + ':' + timeminutes);

        var timehourssecond = Math.floor(ui.values[1] / 60);
        var timeminutesslider = ui.values[1] - (timehourssecond * 60);

        if (timehourssecond.length == 1) timehourssecond = '0' + timehourssecond;
        if (timeminutesslider.length == 1) timeminutesslider = '0' + timeminutesslider;
        if (timeminutesslider == 0) timeminutesslider = '00';
        if (timehourssecond >= 12) {
            if (timehourssecond == 12) {
                timehourssecond = timehourssecond;
                timeminutesslider = timeminutesslider + " PM";
            } else if (timehourssecond == 24) {
                timehourssecond = 11;
                timeminutesslider = "59 PM";
            } else {
                timehourssecond = timehourssecond - 12;
                timeminutesslider = timeminutesslider + " PM";
            }
        } else {
            timehourssecond = timehourssecond;
            timeminutesslider = timeminutesslider + " AM";
        }

        $('.slider-time2').html(timehourssecond + ':' + timeminutesslider);
    }
});

Example

Tutorial