datetimepicker js code example

Example 1: set datetimepicker javascript

// when start datetimepicker change -> will effect end datetimepicker change too
$('#membership_start').on('dp.change', function(e){
  $('#membership_end').data("DateTimePicker").date(e.date);
});

Example 2: datetimepicker jquery

############### JS ##############  
1. npm i jquery-datetimepicker

2. Include inside js file

import "jquery-datetimepicker";

$('#datetimepicker').datetimepicker();

############## CSS ###################

3. Include inside css/scss file

@import "jquery-datetimepicker/build/jquery.datetimepicker.min.css";

Example 3: bootstrap datetime picker

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker2'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker2').datetimepicker({
                    locale: 'ru'
                });
            });
        </script>
    </div>
</div>

Example 4: bootstrap datetime picker

<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>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

Example 5: start day picker and end date picker in php

<div class="em-date-range">From
 <input class="em-date-input-loc em-date-start" type="text" name="ticket_start_pub" />
 <input class="em-date-input" type="hidden" name="ticket_start" />
 to
 <input class="em-date-input-loc em-date-end" type="text" name="ticket_end_pub" />
 <input class="em-date-input" type="hidden" name="ticket_end" /></div>