Showing posts with label DateTime Picker. Show all posts
Showing posts with label DateTime Picker. Show all posts

Saturday, January 28, 2017

DateTime Picker · Bootstrap

You can download full example from here



<head>
    <title>Bootstrap Date Time Picker Example</title>
    <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="moment-with-locales.js"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
    <script type="text/javascript" src="bootstrap-datetimepicker.js"></script>

    <link rel="stylesheet" href="bootstrap.min.css"/>
    <link rel="stylesheet" href="font-awesome.min.css"/>
    <link rel="stylesheet" href="bootstrap-datetimepicker.css"/>

    <script type="text/javascript">
        $(function () {
            var start = new Date();
            start.setMinutes(start.getMinutes() + 20);
            var start_value = start.getFullYear() + "-" + (start.getMonth() + 1) + "-" + start.getDate();
            start_value += " " + start.getHours() + ":" + start.getMinutes();

            start.setDate(start.getDate() + 1);

            $('#datetimepicker1').datetimepicker({
                defaultDate: start_value,
                format: 'DD-MM-YYYY hh:mm A',
                disabledDates: [
                    start
                ],
                daysOfWeekDisabled: [0, 6],
                sideBySide: false,
                showTodayButton: true,
                showClear: true,
                showClose: true,
                onSelect: function () {
                    var minDate = $(this).datepicker('getDate');
                    $('#datetimepicker2').datepicker( "option", "minDate", minDate);
                }
            });

            $('#datetimepicker2').datetimepicker({
                defaultDate: start_value,
                format: 'DD-MM-YYYY hh:mm A',
                disabledDates: [
                    start
                ],
                daysOfWeekDisabled: [0, 6],
                sideBySide: false,
                showTodayButton: true,
                showClear: true,
                showClose: true
            });

            $('#datetimepicker3').datetimepicker({
                format: 'DD-MM-YYYY hh:mm A'
            });
            $('#datetimepicker4').datetimepicker({
                useCurrent: false,
                format: 'DD-MM-YYYY hh:mm A'
            });
            $("#datetimepicker3").on("dp.change", function (e) {
                $('#datetimepicker4').data("DateTimePicker").minDate(e.date);
            });
            $("#datetimepicker4").on("dp.change", function (e) {
                $('#datetimepicker3').data("DateTimePicker").maxDate(e.date);
            });
        });
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-sm-6'>
            <div class="form-group">
                <input id="datetimepicker2" type="text" class="form-control"/>
            </div>
        </div>
    </div>
    <div class="row">
        <div class='col-md-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker3'>
                    <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                </div>
            </div>
        </div>
        <div class='col-md-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker4'>
                    <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>