I want to use the date range picker & toggle button as follows in my codigniter project :
Expected Result
Expected Result (https://i.sstatic.net/Q3KNN.png)
Generated out
But the code outs following view
Generated out (https://i.sstatic.net/ogKzq.png)
Outed result can't show the date range picker & toggle button. What may be goinh wrong ? Can anyone help ?
I tried the following code to do this :
`<script src="<?= base_url() ?>public/dist/js/issues.js"></script>
<script src="<?= base_url() ?>public/plugins/jquery.hotkeys.js"></script>`
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Survey Inventory</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" style="font-size: 16px;" data-widget="collapse"><i class="fa fa-plus"></i>
</button>
</div>
<!-- /.box-tools -->
</div>
<div class="box-body">
<div class="row">
<?= form_open('survey/regSurvey') ?>
<div class="col-lg-12">
<div class="col-md-12">
<div class="panel panel-warning">
<div class="panel-heading">Please select these before adding any book</div>
<div class="panel-body" style="padding: 5px;">
<div class="col-md-4" id="survey_date">
<div class="form-group">
<label for="sldate">Survey Date *</label>
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
<input type="text" name="date" value="" readonly style="cursor: pointer" class="form-control input-tip" id="date" required="required" data-original-title="" title="" data-bv-field="date">
<input type="hidden" name="survey_date" id="survey_date" value="<?= date('Y-m-d') ?>">
<input type="hidden" name="cancel_date" id="cancel_date" value="<?= date('Y-m-d') ?>">
</div>
</div>
</div>
<div class="col-md-4" style="display: none" id="cancel_date">
<div class="form-group">
<label for="cancel_date">Cancel Date </label>
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
<input type="text" name="cancel_date" value="<?= date('Y-m-d') ?>" readonly style="cursor: pointer" class="form-control input-tip datepicker" id="cancel_date" required="required" data-original-title="" title="" data-bv-field="date">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Type</label>
<div class="switch-toggle switch-ios">
<input id="surveyed" class="type" name="type" type="radio" value="surveyed" checked>
<label for="surveyed" onclick="">Survey</label>
<input id="canceled" class="type" name="type" value="canceled" type="radio">
<label for="canceled" onclick="">Cancel</label>
<a></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12" id="sticker">
<div class="well well-sm">
<div class="form-group" style="margin-bottom:0;">
<div class="input-group wide-tip">
<div class="input-group-addon" style="padding-left: 10px; padding-right: 10px;">
<i class="fa fa-2x fa-barcode addIcon"></i></a>
</div>
<?php echo form_input('add_item', '', 'class="form-control input-lg" id="add_item" placeholder="' . "Add Books to Survey List" . '"'); ?>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-12">
<div class="control-group table-group">
<label class="table-label">Surveyed / Canceled Books *</label>
<div class="controls table-controls">
<table id="blTable" class="table items table-striped table-bordered table-condensed table-hover sortable_table">
<thead>
<tr>
<th class="col-md-3">Book Name</th>
<th class="col-md-3">Book no</th>
<th class="col-md-3">ISBN</th>
<th class="col-md-1" id="tdQty">Quantity</th>
<th style="width: 30px !important; text-align: center;">
<i class="fa fa-trash-o" style="opacity:0.5; filter:alpha(opacity=50);"></i>
</th>
</tr>
</thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group"><input type="submit" name="add_survey" value="Submit" id="add_survey" class="btn btn-primary" style="padding: 6px 15px; margin:15px 0;">
<button type="button" class="btn btn-danger" id="reset" tabindex="-1">Reset</button>
</div>
</div>
</div>
<?= form_close() ?>
</div>
</div>
</div>
</div>
</div>
JavaScript code for date range picker in the issues.js as follows :
$(function () {
$('#date').daterangepicker(
{
locale: {
format: 'YYYY-MM-DD'
},
ranges: {
'One Week': [moment(), moment().add(1, 'w')],
'Two Weeks': [moment(), moment().add(2, 'w')],
'Three Weeks': [moment(), moment().add(3, 'w')],
'One Month': [moment(), moment().add(1, 'M')]
},
minDate: moment(),
startDate: moment(), endDate: moment().add(7, 'days')
},
function (start, end) {
console.log(start);
$('#issued_date').val(start.format('YYYY-MM-DD'));
$('#receive_date').val(end.format('YYYY-MM-DD'));
}
);
});
$('input[name="date"]').daterangepicker();in your case. (I don't know what library you're using for the toggle button, so I can't point you to any documentation on that.)