mirror of https://github.com/ColorlibHQ/gentelella
644 lines
17 KiB
Markdown
644 lines
17 KiB
Markdown
|
#Bootstrap 3 Datepicker v4 Docs
|
||
|
|
|
||
|
|
<div class="alert alert-info">
|
||
|
|
<strong>Note</strong>
|
||
|
|
All functions are accessed via the <code>data</code> attribute e.g. <code>$('#datetimepicker').data("DateTimePicker").FUNCTION()</code>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
### Minimum Setup
|
||
|
|
|
||
|
|
<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>
|
||
|
|
|
||
|
|
#### Code
|
||
|
|
|
||
|
|
```
|
||
|
|
<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>
|
||
|
|
```
|
||
|
|
|
||
|
|
----------------------
|
||
|
|
|
||
|
|
### Using Locales
|
||
|
|
|
||
|
|
<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>
|
||
|
|
|
||
|
|
#### Code
|
||
|
|
|
||
|
|
```
|
||
|
|
<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>
|
||
|
|
```
|
||
|
|
|
||
|
|
----------------------
|
||
|
|
|
||
|
|
### Time Only
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class='col-sm-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-time"></span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
$('#datetimepicker3').datetimepicker({
|
||
|
|
format: 'LT'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
#### Code
|
||
|
|
|
||
|
|
```
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class='col-sm-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-time"></span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
$('#datetimepicker3').datetimepicker({
|
||
|
|
format: 'LT'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
----------------------
|
||
|
|
|
||
|
|
### Date Only
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class='col-sm-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-time"></span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
$('#datetimepicker3').datetimepicker({
|
||
|
|
format: 'L'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
#### Code
|
||
|
|
|
||
|
|
```
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class='col-sm-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-time"></span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
$('#datetimepicker3').datetimepicker({
|
||
|
|
format: 'LT'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
----------------------
|
||
|
|
|
||
|
|
### No Icon (input field only):
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class='col-sm-6'>
|
||
|
|
<input type='text' class="form-control" id='datetimepicker4' />
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
$('#datetimepicker4').datetimepicker();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
#### Code
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class='col-sm-6'>
|
||
|
|
<input type='text' class="form-control" id='datetimepicker4' />
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
$('#datetimepicker4').datetimepicker();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
----------------------
|
||
|
|
|
||
|
|
### Enabled/Disabled Dates
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class='col-sm-6'>
|
||
|
|
<div class="form-group">
|
||
|
|
<div class='input-group date' id='datetimepicker5'>
|
||
|
|
<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 () {
|
||
|
|
$('#datetimepicker5').datetimepicker({
|
||
|
|
defaultDate: "11/1/2013",
|
||
|
|
disabledDates: [
|
||
|
|
moment("12/25/2013"),
|
||
|
|
new Date(2013, 11 - 1, 21),
|
||
|
|
"11/22/2013 00:53"
|
||
|
|
]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
#### Code
|
||
|
|
|
||
|
|
```
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class='col-sm-6'>
|
||
|
|
<div class="form-group">
|
||
|
|
<div class='input-group date' id='datetimepicker5'>
|
||
|
|
<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 () {
|
||
|
|
$('#datetimepicker5').datetimepicker({
|
||
|
|
defaultDate: "11/1/2013",
|
||
|
|
disabledDates: [
|
||
|
|
moment("12/25/2013"),
|
||
|
|
new Date(2013, 11 - 1, 21),
|
||
|
|
"11/22/2013 00:53"
|
||
|
|
]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
----------------------
|
||
|
|
|
||
|
|
### Linked Pickers
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class='col-md-5'>
|
||
|
|
<div class="form-group">
|
||
|
|
<div class='input-group date' id='datetimepicker6'>
|
||
|
|
<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-5'>
|
||
|
|
<div class="form-group">
|
||
|
|
<div class='input-group date' id='datetimepicker7'>
|
||
|
|
<input type='text' class="form-control" />
|
||
|
|
<span class="input-group-addon">
|
||
|
|
<span class="glyphicon glyphicon-calendar"></span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
$('#datetimepicker6').datetimepicker();
|
||
|
|
$('#datetimepicker7').datetimepicker({
|
||
|
|
useCurrent: false
|
||
|
|
});
|
||
|
|
$("#datetimepicker6").on("dp.change", function (e) {
|
||
|
|
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
|
||
|
|
});
|
||
|
|
$("#datetimepicker7").on("dp.change", function (e) {
|
||
|
|
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
#### Code
|
||
|
|
|
||
|
|
```
|
||
|
|
<div class="container">
|
||
|
|
<div class='col-md-5'>
|
||
|
|
<div class="form-group">
|
||
|
|
<div class='input-group date' id='datetimepicker6'>
|
||
|
|
<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-5'>
|
||
|
|
<div class="form-group">
|
||
|
|
<div class='input-group date' id='datetimepicker7'>
|
||
|
|
<input type='text' class="form-control" />
|
||
|
|
<span class="input-group-addon">
|
||
|
|
<span class="glyphicon glyphicon-calendar"></span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
$('#datetimepicker6').datetimepicker();
|
||
|
|
$('#datetimepicker7').datetimepicker({
|
||
|
|
useCurrent: false //Important! See issue #1075
|
||
|
|
});
|
||
|
|
$("#datetimepicker6").on("dp.change", function (e) {
|
||
|
|
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
|
||
|
|
});
|
||
|
|
$("#datetimepicker7").on("dp.change", function (e) {
|
||
|
|
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
----------------------
|
||
|
|
|
||
|
|
### Custom Icons
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="col-sm-6" style="height:130px;">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class='input-group date' id='datetimepicker8'>
|
||
|
|
<input type='text' class="form-control" />
|
||
|
|
<span class="input-group-addon">
|
||
|
|
<span class="fa fa-calendar">
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
$('#datetimepicker8').datetimepicker({
|
||
|
|
icons: {
|
||
|
|
time: "fa fa-clock-o",
|
||
|
|
date: "fa fa-calendar",
|
||
|
|
up: "fa fa-arrow-up",
|
||
|
|
down: "fa fa-arrow-down"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
#### Code
|
||
|
|
|
||
|
|
```
|
||
|
|
<div class="container">
|
||
|
|
<div class="col-sm-6" style="height:130px;">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class='input-group date' id='datetimepicker8'>
|
||
|
|
<input type='text' class="form-control" />
|
||
|
|
<span class="input-group-addon">
|
||
|
|
<span class="fa fa-calendar">
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
$('#datetimepicker8').datetimepicker({
|
||
|
|
icons: {
|
||
|
|
time: "fa fa-clock-o",
|
||
|
|
date: "fa fa-calendar",
|
||
|
|
up: "fa fa-arrow-up",
|
||
|
|
down: "fa fa-arrow-down"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
----------------------
|
||
|
|
|
||
|
|
### View Mode
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="col-sm-6" style="height:130px;">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class='input-group date' id='datetimepicker9'>
|
||
|
|
<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 () {
|
||
|
|
$('#datetimepicker9').datetimepicker({
|
||
|
|
viewMode: 'years'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
#### Code
|
||
|
|
|
||
|
|
```
|
||
|
|
<div class="container">
|
||
|
|
<div class="col-sm-6" style="height:130px;">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class='input-group date' id='datetimepicker9'>
|
||
|
|
<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 () {
|
||
|
|
$('#datetimepicker9').datetimepicker({
|
||
|
|
viewMode: 'years'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
----------------------
|
||
|
|
|
||
|
|
### Min View Mode
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="col-sm-6" style="height:130px;">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class='input-group date' id='datetimepicker10'>
|
||
|
|
<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 () {
|
||
|
|
$('#datetimepicker10').datetimepicker({
|
||
|
|
viewMode: 'years',
|
||
|
|
format: 'MM/YYYY'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
#### Code
|
||
|
|
|
||
|
|
```
|
||
|
|
<div class="container">
|
||
|
|
<div class="col-sm-6" style="height:130px;">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class='input-group date' id='datetimepicker10'>
|
||
|
|
<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 () {
|
||
|
|
$('#datetimepicker10').datetimepicker({
|
||
|
|
viewMode: 'years',
|
||
|
|
format: 'MM/YYYY'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
----------------------
|
||
|
|
|
||
|
|
### Disabled Days of the Week
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="col-sm-6" style="height:130px;">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class='input-group date' id='datetimepicker11'>
|
||
|
|
<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 () {
|
||
|
|
$('#datetimepicker11').datetimepicker({
|
||
|
|
daysOfWeekDisabled: [0, 6]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
#### Code
|
||
|
|
|
||
|
|
```
|
||
|
|
<div class="container">
|
||
|
|
<div class="col-sm-6" style="height:130px;">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class='input-group date' id='datetimepicker11'>
|
||
|
|
<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 () {
|
||
|
|
$('#datetimepicker11').datetimepicker({
|
||
|
|
daysOfWeekDisabled: [0, 6]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
----------------------
|
||
|
|
|
||
|
|
### Inline
|
||
|
|
|
||
|
|
<div style="overflow:hidden;">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-8">
|
||
|
|
<div id="datetimepicker12"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
$('#datetimepicker12').datetimepicker({
|
||
|
|
inline: true,
|
||
|
|
sideBySide: true
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
#### Code
|
||
|
|
|
||
|
|
```
|
||
|
|
<div style="overflow:hidden;">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-8">
|
||
|
|
<div id="datetimepicker12"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
$('#datetimepicker12').datetimepicker({
|
||
|
|
inline: true,
|
||
|
|
sideBySide: true
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
```
|