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

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.


Download Project Scripts

$("#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

  jQuery Time Duration Picker Example

Tutorial


Related FAQ

Here are some more FAQ related to this Article:

  1.   how to open new tab in react js Example
  2.   PHP Laravel 6 Change Date Format example
  3.   Laravel Custom Dropdown Server Side Filter in Datatables
  4.   Implement Read More Read Less Functionality Using jQuery
  5.   JavaScript Preview Image before Upload with jQuery
  6.   Laravel vuejs Insert Multiple Checkbox Value in Database
  7.   Create Dynamic Image Slider using PHP with jQuery
  8.   Fresher PHP WEB Developer Salary Range Level
  9.   Laravel 6 create zip archive file and download example
  10.   PHP cURL Multiple Asynchronous Http Requests

Leave a Reply

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