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

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


Related FAQ

Here are some more FAQ related to this Article:

  1.   jQuery Time Duration Picker Example
  2.   How to upload Profile Images to Users using Laravel 6?
  3.   CSS Sticky Footer Tutorial Example From Scratch
  4.   Angular 6 Features Architecture Overview
  5.   How to Update Node.js to Latest Version windows, Linux, Ubuntu, OSX
  6.   wordpress INSERT Multiple Rows using $wpdb
  7.   Simple LocalStorage SessionStorage using JavaScript
  8.   Form Data Binding using Angular Example
  9.   OrderBy Filter using Angular Example
  10.   FontSpace Web Application Icons