Back

DateTimepicker Bootstrap

Copy Below Code View As A Text File Show Text Only Show API Edit Code 
                            
<!DOCTYPE html>
<html>

<head>
    <title>DateTimepicker</title>

    <!-- Include Bootstrap CDN -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js">
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js">
    </script>
</head>

<body>

    <!-- Include datetime input to display
		datetimepicker in container with
		relative position -->
    <div class="container" style="margin:100px">
        <div style="position: relative">

            <!-- Include input field with id so
				that we can use it in JavaScript
				to set attributes.-->
            <input class="form-control dateonly" type="text" id="startDate" />
            <!-- <input class="form-control timeOnly" type="text" id="startTime" /> -->
            <br />
            <input class="form-control dateonly" type="text" id="endDate" />
            <!-- <input class="form-control timeOnly" type="text" id="endTime" /> -->

        </div>
    </div>

    <script>
        // $('.timeOnly').datetimepicker({
        //     format: 'hh:mm:ss a'
        // });

        // $('.dateonly').datetimepicker({
        //     format: 'MM/DD/YYYY'
        // });


        $('#startDate').datetimepicker({
            format: 'MM/DD/YYYY HH:mm:ss',
            date: '06/01/2023',
            sideBySide: true
        });
        $('#endDate').datetimepicker({
            format: 'MM/DD/YYYY HH:mm:ss',
            sideBySide: true,
            useCurrent: false //Important! See issue #1075
        });

        $("#startDate").on("dp.change", function(e) {
            $('#endDate').data("DateTimePicker").minDate(e.date);
        });

        $("#endDate").on("dp.change", function(e) {
            $('#startDate').data("DateTimePicker").maxDate(e.date);
        });



        // $("#startDate").on("dp.change", function(e) {
        //             $('#endDate').data("DateTimePicker").minDate(e.date);
        //             // console.log(e.date);
        //             // $("#startTime").val(e.date.format("HH:mm:ss"));
        //             //$("#startDate").val(e.date.format("MM/DD/YYYY"));
        //             //debugger;

        //            // console.log($('#startDate').data("DateTimePicker").date());
        //            // console.log($('#endDate').data("DateTimePicker").date());

        //             //debugger;//

        //             console.log($('#startDate').data("DateTimePicker").date().diff($('#endDate').data("DateTimePicker").date()));

        //                 if ($('#startDate').data("DateTimePicker").date().diff($('#endDate').data("DateTimePicker").date()) < 0) {
        //                     console.log('CHECK---');
        //                     // $('#endDate').data("DateTimePicker").date($('#startDate').data("DateTimePicker").date());
        //                 }else{
        //                     console.log('FINE');
        //                 }
        //             });

        //         $("#endDate").on("dp.change", function(e) {
        //             $('#startDate').data("DateTimePicker").maxDate(e.date);
        //         });



        // $('#startTime').datetimepicker({
        //     format: 'HH:mm:ss'
        // });

        // $('#endTime').datetimepicker({
        //     format: 'HH:mm:ss'
        // });

        // $("#startDate").on("dp.change", function(e) {
        //     $('#endDate').data("DateTimePicker").minDate(e.date);
        //     // console.log(e.date);
        //     // $("#startTime").val(e.date.format("HH:mm:ss"));
        //     //$("#startDate").val(e.date.format("MM/DD/YYYY"));
        //     //debugger;
        // });
        // $("#endDate").on("dp.change", function(e) {
        //     $('#startDate').data("DateTimePicker").maxDate(e.date);
        // });

        // $().click(function(e) {
        //     e.preventDefault;
        //     $('#startDate').trigger('click');
        //     //$('#datetimepicker').data("DateTimePicker").OPTION()
        // });

        $("#startTime").on("dp.change", function(e) {
            // $('#startDate').data("DateTimePicker").OPTION('date','05/30/2023');
            console.log($('#startDate').data("DateTimePicker").date());
            var olddDate = $('#startDate').data("DateTimePicker").date().format('MM/DD/YYYY');
            $('#startDate').data("DateTimePicker").date(olddDate + ' ' + e.date.format("HH:mm:ss"));

        });

        $("#endTime").on("dp.change", function(e) {
            // $('#endDate').data("DateTimePicker").OPTION('date','05/30/2023');
            console.log($('#endDate').data("DateTimePicker").date());
            var olddDate = $('#endDate').data("DateTimePicker").date().format('MM/DD/YYYY');
            $('#endDate').data("DateTimePicker").date(olddDate + ' ' + e.date.format("HH:mm:ss"));

        });

    </script>
</body>

</html>