mirror of https://github.com/ColorlibHQ/gentelella
Update Example for datetime picker
NOTE: not sure but I think that there should be a separate file for the script of this examplepull/504/head
William
GitHub
parent
0006a2c2df
commit
7ab8cb6020
|
|
@ -663,48 +663,108 @@
|
|||
</div>
|
||||
<!-- /form datepicker -->
|
||||
|
||||
<!-- form datetimepicker -->
|
||||
<div class="x_panel" style="">
|
||||
<div class="x_title">
|
||||
<h2>Date Pickers <small> Available with multiple designs</small></h2>
|
||||
<ul class="nav navbar-right panel_toolbox">
|
||||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Settings 1</a>
|
||||
</li>
|
||||
<li><a href="#">Settings 2</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
|
||||
<!-- form datetimepicker -->
|
||||
<div class="x_panel" style="">
|
||||
<div class="x_title">
|
||||
<h2>Date Pickers <small> Available with multiple designs</small></h2>
|
||||
<ul class="nav navbar-right panel_toolbox">
|
||||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Settings 1</a>
|
||||
</li>
|
||||
<li><a href="#">Settings 2</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class='col-sm-6'>
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='myDatepicker'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$('#myDatepicker').datetimepicker()
|
||||
</script>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class='col-sm-4'>
|
||||
Basic Example
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='myDatepicker'>
|
||||
<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-4'>
|
||||
Only Date Picker
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='myDatepicker2'>
|
||||
<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-4'>
|
||||
Only Time Picker <small>For 24H format use format: 'HH:mm'</small>
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='myDatepicker3'>
|
||||
<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-4'>
|
||||
Using ReadOnly
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='myDatepicker4'>
|
||||
<input type='text' class="form-control" readonly="readonly" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='col-sm-4'>
|
||||
Linked Picker Parent
|
||||
<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-sm-4'>
|
||||
Linked Picker Children
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /form datetimepicker -->
|
||||
|
||||
<!-- form grid slider -->
|
||||
|
|
@ -1271,6 +1331,37 @@
|
|||
|
||||
<!-- Custom Theme Scripts -->
|
||||
<script src="../build/js/custom.min.js"></script>
|
||||
|
||||
<!-- Initialize datetimepicker -->
|
||||
<script>
|
||||
$('#myDatepicker').datetimepicker();
|
||||
|
||||
$('#myDatepicker2').datetimepicker({
|
||||
format: 'DD.MM.YYYY'
|
||||
});
|
||||
|
||||
$('#myDatepicker3').datetimepicker({
|
||||
format: 'hh:mm A'
|
||||
});
|
||||
|
||||
$('#myDatepicker4').datetimepicker({
|
||||
ignoreReadonly: true,
|
||||
allowInputToggle: true
|
||||
});
|
||||
|
||||
$('#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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue