Posted inTechnology / Ajax / JavaScript / jQuery

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

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype