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

    
Simple Time Range Example: 10:00 AM - 12:00 PM

    
    

        

    

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