<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);
}
}
});
