SOURCE

// 设置使用中文
$.datetimepicker.setLocale('zh');

// 默认配置
$('#datetimepicker1').datetimepicker();
// 黑色皮肤
$('#datetimepicker2').datetimepicker({
  theme: 'dark',
});
// 加上按钮样式
$('#datetimepicker3').datetimepicker();
// 禁用周末
$('#datetimepicker4').datetimepicker({
  disabledWeekDays: [6, 0]
});
// 日期格式化
$('#datetimepicker5').datetimepicker({
  format: 'Y-m-d H:i:s'
});
// 限制可选日期范围
$('#datetimepicker6').datetimepicker({
  minDate: 0,
  maxDate: new Date().getTime() + 1000 * 3600 * 24 * 7
});

// 回调
$('#datetimepicker7').datetimepicker({
  formatDate: 'Y-m-d',
  formatTime: 'H:i:s',
  format: 'Y-m-d H:i:s',
  defaultDate: new Date(),
  defaultTime: '0:0:0',
  value: new Date(),
  onChangeDateTime: function(current_time, $input, event) {
    console.log(current_time);
  }
});

// 选择区间
$('#date_timepicker_start').datetimepicker({
  format: 'Y/m/d',
  onShow: function(ct) {
    this.setOptions({
      maxDate: $('#date_timepicker_end').val() ? $('#date_timepicker_end').val() : false
    })
  },
  timepicker: false
});
$('#date_timepicker_end').datetimepicker({
  format: 'Y/m/d',
  onShow: function(ct) {
    this.setOptions({
      minDate: $('#date_timepicker_start').val() ? $('#date_timepicker_start').val() : false
    })
  },
  timepicker: false
});

// 面板显示
$('#dateTimeInline').datetimepicker({
  inline: true,
  onChangeDateTime: function(current_time, $input, event) {
    alert('选中：' + current_time);
  }
});

<div class="container">
  <div class="clearfix">
    <div class="form-group col-lg-5">
      <label for="datetimepicker1" class="col-lg-4 control-label">
        默认
      </label>
      <div class="col-lg-8 input-group">
        <input class="form-control" type="text" name="datetimepicker1" id="datetimepicker1">
      </div>
    </div>
    <div class="form-group col-lg-5">
      <label for="datetimepicker2" class="col-lg-4 control-label">
        黑色皮肤：
      </label>
      <div class="col-lg-8 input-group">
        <input class="form-control" type="text" name="datetimepicker2" id="datetimepicker2">
      </div>
    </div>
    <div class="form-group col-lg-5">
      <label for="datetimepicker3" class="col-lg-4 control-label">
        加icon：
      </label>
      <div class="col-lg-8 input-group date">
        <input class="form-control" type="text" name="datetimepicker3" id="datetimepicker3">
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar">
          </span>
        </span>
      </div>
    </div>
    <div class="form-group col-lg-5">
      <label for="datetimepicker4" class="col-lg-4 control-label">
        禁用周末：
      </label>
      <div class="col-lg-8 input-group date">
        <input class="form-control" type="text" name="datetimepicker4" id="datetimepicker4">
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar">
          </span>
        </span>
      </div>
    </div>
    <div class="form-group col-lg-5">
      <label for="datetimepicker5" class="col-lg-4 control-label">
        日期格式：
      </label>
      <div class="col-lg-8 input-group date">
        <input class="form-control" type="text" name="datetimepicker5" id="datetimepicker5">
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar">
          </span>
        </span>
      </div>
    </div>
    <div class="form-group col-lg-5">
      <label for="datetimepicker6" class="col-lg-4 control-label">
        限制可选范围：
      </label>
      <div class="col-lg-8 input-group date">
        <input class="form-control" type="text" name="datetimepicker6" id="datetimepicker6">
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar">
          </span>
        </span>
      </div>
    </div>
    <div class="form-group col-lg-5">
      <label for="datetimepicker7" class="col-lg-4 control-label">
        选择完成回调：
      </label>
      <div class="col-lg-8 input-group date">
        <input class="form-control" type="text" name="datetimepicker7" id="datetimepicker7">
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar">
          </span>
        </span>
      </div>
    </div>
  </div>
  <div class="form-inline col-lg-7">
    <div class="col-lg-4 input-group form-group">
      <input class="form-control" type="text" name="date_timepicker_start" id="date_timepicker_start">
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar">
        </span>
      </span>
    </div>
    至
    <div class="col-lg-4 input-group form-group">
      <input class="form-control" type="text" name="date_timepicker_end" id="date_timepicker_end">
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar">
        </span>
      </span>
    </div>
  </div>
  <hr>
  <input type="text" id="dateTimeInline">
</div>