Bootstrap DateTimePicker

Based on https://github.com/tarruda/bootstrap-datetimepicker

by Ivan Gerasimenko

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.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 style="height: 300px; padding: 20px;">
    <p>Modified Version of <a href="http://eonasdan.github.io/bootstrap-datetimepicker/" target="_blank">Bootstrap DateTime Picker</a>:</p>
    
    <ul>
        <li>Support Auto Postion. Option: direction: auto|up|down</li>
        <li>New Option: useCurrent: true|false (If no value)</li>
        <li>New Option: showToday: true|false</li>
        <li>Auto Showing when click on any elements</li>
        <li>Auto set Date/Tiem view when value changed in input</li>
    </ul>
</div>
<div class="container">    
    <div class="row">
        <div class="col-sm-6 form-group">
            <label for="dd" class="sr-only">Time Pick</label>
            <div class="input-group" id="DateDemo">
                <input type="text" id="dd" name="dd" data-format="MM/DD/YYYY" placeholder="date"  class="form-control"/>
                <span class="input-group-btn">
                    <button class="btn btn-green" type="button"><i class="icon-calendar"></i></button>
                </span>
            </div>
        </div>
        <div class="col-sm-6 form-group">
            <label for="tt" class="sr-only">Time Pick</label>
            <div class="input-group" id="TimeDemo">
                <input type="text" id="tt" name="InspectionDate" placeholder="time" class="form-control" />
                <span class="input-group-btn">
                    <button class="btn btn-green" type="button"><i class="icon-time"></i></button>
                </span>
            </div>
        </div>
    </div>
</div>

CSS

/**
 * Datetimepicker for Bootstrap v3 - Modified
 * https://github.com/Eonasdan/bootstrap-datetimepicker/ 
 */

.bootstrap-datetimepicker-widget {
    top: 0;
    left: 0;
    width: 250px;
    padding: 4px;
    margin-top: 1px;
    z-index: 99999;
    border-radius: 4px;
}

    /* RQI: Arrow for Bottom */
    .bootstrap-datetimepicker-widget.bottom:before {
        content: '';
        display: inline-block;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #ccc;
        border-bottom-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: -7px;
        left: 7px;
    }

    .bootstrap-datetimepicker-widget.bottom:after {
        content: '';
        display: inline-block;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid white;
        position: absolute;
        top: -6px;
        left: 8px;
    }

    /* RQI: Arrow for Top */
    .bootstrap-datetimepicker-widget.top:before {
        content: '';
        display: inline-block;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 7px solid #ccc;
        border-top-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        bottom: -7px;
        left: 6px;
    }

    .bootstrap-datetimepicker-widget.top:after {
        content: '';
        display: inline-block;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid white;
        position: absolute;
        bottom: -6px;
        left: 7px;
    }

    /* Days Column Width */
    .bootstrap-datetimepicker-widget .dow {
        width: 14.2857%;
    }

    .bootstrap-datetimepicker-widget.pull-right:before {
        left: auto;
        right: 6px;
    }

    .bootstrap-datetimepicker-widget.pull-right:after {
        left: auto;
        right: 7px;
    }

   ...

JavaScript

/**
 * version 2.1.32 -- Modified
 */
; (function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD is used - Register as an anonymous module.
        define(['jquery', 'moment'], factory);
    } else {
        // AMD is not used - Attempt to fetch dependencies from scope.
        if (!jQuery) {
            throw 'bootstrap-datetimepicker requires jQuery to be loaded first';
        } else if (!moment) {
            throw 'bootstrap-datetimepicker requires moment.js to be loaded first';
        } else {
            factory(jQuery, moment);
        }
    }
}

(function ($, moment) {
    if (typeof moment === 'undefined') {
        alert("momentjs is requried");
        throw new Error('momentjs is required');
    };

    var dpgId = 0,

    pMoment = moment,

// ReSharper disable once InconsistentNaming
    DateTimePicker = function (element, options) {
        var defaults = {
            pickDate: true,
            pickTime: true,
            useMinutes: true,
            useSeconds: false,
            useCurrent: true, /* RQI: Auto fill Current Date as Default when Showing */
            minuteStepping: 1,
            startDate: new pMoment({ y: 1970 }),
            endDate: new pMoment().add(50, "y"),
            showToday: true, /* RQI: Show Today */
            collapse: true,
            language: "en",
            defaultDate: "",
            disabledDates: [],
            enabledDates: false,
            icons: {},
            useStrict: false,
            direction: "auto"
        },

		icons = {
		    time: 'glyphicon glyphicon-time',
		    date: 'glyphicon glyphicon-calendar',
		    up: 'icon-chevron-up',
		    down: 'icon-chevron-down'
		},

        picker = this,

        init = function () {

            var icon = false, i, dDate, longDateFormat;
            picker.options = $.extend({}, defaults, options);
            picker.options.icons = $.extend({}, icons, picker.options.icons);

            picker.element =...