jinql
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella
1
0
Fork 0
Code Issues Releases Wiki Activity

Update Example for datetime picker 

NOTE: not sure but I think that there should be a separate file for the script of this example
pull/504/head
William 2017-06-13 14:59:19 -05:00 committed by GitHub
parent 0006a2c2df
commit 7ab8cb6020
1 changed files with 132 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
production/form_advanced.html
View File

@ -663,6 +663,7 @@
</div> </div>
<!-- /form datepicker --> <!-- /form datepicker -->
<!-- form datetimepicker --> <!-- form datetimepicker -->
<div class="x_panel" style=""> <div class="x_panel" style="">
<div class="x_title"> <div class="x_title">
@ -688,7 +689,9 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class='col-sm-6'>
<div class='col-sm-4'>
Basic Example
<div class="form-group"> <div class="form-group">
<div class='input-group date' id='myDatepicker'> <div class='input-group date' id='myDatepicker'>
<input type='text' class="form-control" /> <input type='text' class="form-control" />
@ -698,13 +701,70 @@
</div> </div>
</div> </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>
</div> </div>
</div> </div>
<script>
$('#myDatepicker').datetimepicker()
</script>
<!-- /form datetimepicker --> <!-- /form datetimepicker -->
<!-- form grid slider --> <!-- form grid slider -->
@ -1272,5 +1332,36 @@
<!-- Custom Theme Scripts --> <!-- Custom Theme Scripts -->
<script src="../build/js/custom.min.js"></script> <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> </body>
</html> </html>