Bootstrap DateTimePicker
Based on https://github.com/tarruda/bootstrap-datetimepicker
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-12 form-group">
<div class="input-group" id="IpDemo">
<input type="text" id="ip" name="ip" class="form-control" value="10.0.2.15" disabled />
<span class="input-group-btn">
<button class="btn" type="button"><span class="glyphicon glyphicon-cog"></span></button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<div class="input-group" id="IpDemo2">
<input type="text" id="ip2" name="ip2" class="form-control" value="10.0.2.15" />
<span class="input-group-btn">
<button class="btn" type="button"><span class="glyphicon glyphicon-cog"></span></button>
</span>
</div>
</div>
</div>
</div>
CSS
/*!
* IP Address Widget for Bootstrap 3
//! version : 0.0.0
*/
.bootstrap-ipaddress-widget .btn {
border: none;
}
.bootstrap-ipaddress-widget .btn:hover {
background-color: #e6e6e6;
}
.bootstrap-ipaddress-widget .ipaddress-picker span.btn {
font-weight: bold;
font-size: 1.2em;
}
.bootstrap-ipaddress-widget table {
width: 100%;
margin: 0;
}
.bootstrap-ipaddress-widget td,
.bootstrap-ipaddress-widget th {
text-align: center;
}
.bootstrap-ipaddress-widget span.btn,
.bootstrap-ipaddress-widget a.btn {
width: 54px;
height: 54px;
line-height: 44px;
margin: 2px 1.5px;
cursor: pointer;
}
.bootstrap-ipaddress-widget span.btn:active,
.bootstrap-ipaddress-widget a.btn:active {
-webkit-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
}
JavaScript
/**
* IP Address Widget for Bootstrap 3
//! version : 0.0.0
*/
; (function (factory) {
if (typeof window.define === 'function' && window.define.amd) {
// AMD is used - Register as an anonymous module.
window.define(['jquery'], factory);
} else {
// AMD is not used - Attempt to fetch dependencies from scope.
if (!jQuery) {
throw 'bootstrap-ipaddress requires jQuery to be loaded first';
} else {
factory(jQuery);
}
}
}
(function ($) {
var dpgId = 0,
// ReSharper disable once InconsistentNaming
IPAddress = function (element, options) {
var defaults = {
icons: {
up: 'glyphicon glyphicon-chevron-up',
down: 'glyphicon glyphicon-chevron-down'
},
direction: 'auto'
},
picker = this,
init = function () {
picker.options = $.extend({}, defaults, options);
picker.element = $(element);
picker.id = dpgId++;
picker.data = parseIpAddress();
picker.isInput = picker.element.is('input');
picker.component = false;
/* Monitor Manual Change */
if (picker.isInput)
picker.element.keyup(changeInput);
else
picker.element.find('input').keyup(changeInput);
picker.widget = getTemplate().appendTo('body');
fillValues();
updata();
attachEvents();
},
changeInput = function () {
var obj = $(this);
setTimeout(function () {
picker.data = parseIpAddress(obj.val());
fillValue();
}, 200);
},
parseIpAddress = function (data) {
var defValue = [0, 0, 0, 0];
if (data === null || (typeof data) === 'undefined')
return defValue;
var address = ($.isArray(data)) ? data :...