"time range picker"
Bootstrap 3.1.0 Snippet by shehzadali110

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="main_container"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Bootstrap Custom TimeRangePicker</h3> </div> <div class="panel-body"> <div class="form-group"> <div class="Data_Group"> <div id="datetimepickerDate" class="timerange"> <i class="fa fa-clock-o date-icon" aria-hidden="true"></i> <label for="start_time">Time Range Picker</label> <input type="text" class="form-control" name="start_time" placeholder="e.g 01:00 PM to 02:00 PM" id="start_time" data-placeholder="Select Time" /> <span class="input-feedback" data-id="start_time"></span> </div> </div> </div> </div> </div> </div> </div> </div> </div>
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"); .main_container{ margin: 80px auto; } .main_container .row{ display: flex; align-items: center; justify-content: center; } .timerangepicker-container { display: flex; position: absolute; width: 230px; z-index: 999; } .timerangepicker-container .timerangepicker-label { font-size: 12px; display: block; line-height: 2em; padding-left: 1em; background: #f2f3f3; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .timerangepicker-container .timerangepicker-from { border: 1px solid #ddd; background: #fff; border-right: none; padding-bottom: 10px; } .timerangepicker-container .timerangepicker-to { border: 1px solid #ddd; background: #fff; } .timerangepicker-container .timerangepicker-display { box-sizing: border-box; display: inline-block; font-size: 12px; width: 2em; height: 2em; border: 1px solid #ddd; line-height: 2em; text-align: center; position: relative; margin: 1em 0.175em; } .timerangepicker-container .timerangepicker-display .value { background: transparent; width: 100%; border: none; height: 100%; text-align: center; } .timerangepicker-container .timerangepicker-display .value[type=number] { -moz-appearance: textfield; } .timerangepicker-container .timerangepicker-display input.value::-webkit-outer-spin-button, .timerangepicker-container .timerangepicker-display input.value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .timerangepicker-container .timerangepicker-display .increment { cursor: pointer; position: absolute; font-size: 1em; width: 1em; text-align: center; left: 5px; top: -16px; } .timerangepicker-container .timerangepicker-display .decrement { cursor: pointer; position: absolute; font-size: 1em; width: 1em; text-align: center; left: 5px; bottom: -16px; } .timerangepicker-container .timerangepicker-display.hour { margin-left: 1em; } .timerangepicker-container .timerangepicker-display.period { margin-right: 1em; } .timerangepicker-container .timer_footer { width: 100%; border: 1px solid #ddd; border-top: none; position: absolute; bottom: -1.8em; text-align: right; } .timerangepicker-container .timer_footer .btn { font-size: 10px !important; }
jQuery(document).ready(function($) { $("body").on("click", ".timerange", function(e) { e.stopPropagation(); var input = $(this).find("input"); var now = new Date(); var hours = now.getHours(); var period = "PM"; if (hours < 12) { period = "AM"; } else { hours = hours - 11; } var minutes = now.getMinutes(); var range = { from: { hour: hours, minute: minutes, period: period, }, to: { hour: hours, minute: minutes, period: period, }, }; input.val(""); if (input.val() !== "") { var timerange = input.val(); var matches = timerange.match(/([0-9]{2}):([0-9]{2}) (\bAM\b|\bPM\b)-([0-9]{2}):([0-9]{2}) (\bAM\b|\bPM\b)/); if (matches.length === 7) { range = { from: { hour: matches[1], minute: matches[2], period: matches[3], }, to: { hour: matches[4], minute: matches[5], period: matches[6], }, }; } } //console.log(range); var html = '<div class="timerangepicker-container">' + '<div class="timerangepicker-from">' + '<label class="timerangepicker-label">From:</label>' + '<div class="timerangepicker-display hour">' + '<span class="increment fa fa-angle-up"></span>' + '<input type="number" min="1" max="12" class="value" ' + 'value="' + ("0" + range.from.hour).substr(-2) + '">' + '<span class="decrement fa fa-angle-down"></span>' + "</div>" + ":" + '<div class="timerangepicker-display minute">' + '<span class="increment fa fa-angle-up"></span>' + '<input type="number" min="1" max="60" class="value" ' + 'value="' + ("0" + range.from.minute).substr(-2) + '">' + '<span class="decrement fa fa-angle-down"></span>' + "</div>" + ":" + '<div class="timerangepicker-display period">' + '<span class="increment fa fa-angle-up"></span>' + '<span class="value">PM</span>' + '<span class="decrement fa fa-angle-down"></span>' + "</div>" + "</div>" + '<div class="timerangepicker-to">' + '<label class="timerangepicker-label">To:</label>' + '<div class="timerangepicker-display hour">' + '<span class="increment fa fa-angle-up"></span>' + '<input type="number" min="1" max="12" class="value" ' + 'value="' + ("0" + range.to.hour).substr(-2) + '">' + '<span class="decrement fa fa-angle-down"></span>' + "</div>" + ":" + '<div class="timerangepicker-display minute">' + '<span class="increment fa fa-angle-up"></span>' + '<input type="number" min="1" max="60" class="value" ' + 'value="' + ("0" + range.to.minute).substr(-2) + '">' + '<span class="decrement fa fa-angle-down"></span>' + "</div>" + ":" + '<div class="timerangepicker-display period">' + '<span class="increment fa fa-angle-up"></span>' + '<span class="value">PM</span>' + '<span class="decrement fa fa-angle-down"></span>' + "</div>" + "</div>" + "</div>"; $(html).insertAfter(this); $(".timerangepicker-container").on("click", ".timerangepicker-display.hour .increment", function() { var value = $(this).siblings(".value"); value.val(increment(value.val(), 12, 1, 2)); }); $(".timerangepicker-container").on("click", ".timerangepicker-display.hour .decrement", function() { var value = $(this).siblings(".value"); value.val(decrement(value.val(), 12, 1, 2)); }); $(".timerangepicker-container").on("click", ".timerangepicker-display.minute .increment", function() { var value = $(this).siblings(".value"); value.val(increment(value.val(), 59, 0, 2)); }); $(".timerangepicker-container").on("click", ".timerangepicker-display.minute .decrement", function() { var value = $(this).siblings(".value"); value.val(decrement(value.val(), 12, 1, 2)); }); $(".timerangepicker-container").on("click", ".timerangepicker-display.period .increment, .timerangepicker-display.period .decrement", function() { var value = $(this).siblings(".value"); var next = value.text() == "PM" ? "AM" : "PM"; value.text(next); }); }); $("body").on("input", ".value", function() { var allowedDigits = 2; var length = $(this).val().length; var max = parseInt($(this).attr("max")); if ($(this).val() == "") { $(this).val(""); } if ($(this).val().indexOf(".") != -1) { allowedDigits = 3; } if (length > allowedDigits) { $(this).val($(this).val().substring(1)); } if ($(this).val() > max && max > 0) { $(this).val($(this).val().substring(1)); } }); $(document).on("click", (e) => { if (!$(e.target).closest(".timerangepicker-container").length) { if ($(".timerangepicker-container").is(":visible")) { var timerangeContainer = $(".timerangepicker-container"); if (timerangeContainer.length > 0) { var timeRange = { from: { hour: timerangeContainer.find(".value")[0].value, minute: timerangeContainer.find(".value")[1].value, period: timerangeContainer.find(".value")[2].innerText, }, to: { hour: timerangeContainer.find(".value")[3].value, minute: timerangeContainer.find(".value")[4].value, period: timerangeContainer.find(".value")[5].innerText, }, }; timerangeContainer .parent() .find("input") .val(timeRange.from.hour + ":" + timeRange.from.minute + " " + timeRange.from.period + " to " + timeRange.to.hour + ":" + timeRange.to.minute + " " + timeRange.to.period); timerangeContainer.remove(); } } } }); function increment(value, max, min, size) { var intValue = parseInt(value); if (intValue == max) { return ("0" + min).substr(-size); } else { var next = intValue + 1; return ("0" + next).substr(-size); } } function decrement(value, max, min, size) { var intValue = parseInt(value); if (intValue == min) { return ("0" + max).substr(-size); } else { var next = intValue - 1; return ("0" + next).substr(-size); } } });

Related: See More


Questions / Comments: