## Date picker

One stop solution for perfect admin dashboard!

Toggle Code!

##### Basic Example

- to

    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">
                <h5>Basic Example</h5>
            </div>
        </div>
        <div class="panel-body p-20">
            <div class="demo">
                <ul class="list-style-none text-center" id="basicExample">
                    <li class="display-inline-block w-15"><input type="text" class="date start" placeholder="start date" /></li>
                    <li class="display-inline-block w-15"><input type="text" class="time start" placeholder="start time" /></li>
                    <li class="display-inline-block"> to</li>
                    <li class="display-inline-block w-15"><input type="text" class="time end" placeholder="end time" /></li>
                    <li class="display-inline-block w-15"><input type="text" class="date end" placeholder="end date"/></li>
                </ul>
            </div>
        </div>
    </div>
    <!--======== JS =======-->
    <script>
    $('#basicExample .time').timepicker({
    'showDuration': true,
    'timeFormat': 'g:ia'
    });

    $('#basicExample .date').datepicker({
    'format': 'm/d/yyyy',
    'autoclose': true
    });

    var basicExampleEl = document.getElementById('basicExample');
    var datepair = new Datepair(basicExampleEl);
    </script>
    <script type="text/javascript" src="js/date-picker/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="js/date-picker/jquery.timepicker.js"></script>
    <script type="text/javascript" src="js/date-picker/datepair.js"></script>
    <script type="text/javascript" src="js/date-picker/moment.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

##### Basic Date Picker

    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">
                <h5>Basic Date Picker</h5>
            </div>
        </div>
        <div class="panel-body p-20">
            <div class="form-group">
                <div class='input-group date table-adjust' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <!--======== JS =======-->
    <script>
    $('#datetimepicker1').datetimepicker({
    debug: true
    });
    </script>
    <script type="text/javascript" src="js/date-picker/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="js/date-picker/jquery.timepicker.js"></script>
    <script type="text/javascript" src="js/date-picker/datepair.js"></script>
    <script type="text/javascript" src="js/date-picker/moment.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

##### View Mode

##### Min View Mode

##### Disabled Days of the Week