Bootstrap datepicker does not show date on popup - php

Question

I have a datepicker form using bootstrap, but when I click on it, it does not show the date on the popup (the popup is truncated).
Code of the script :
// Date Picker
jQuery('#datepicker').datepicker();
jQuery('#datepicker-autoclose').datepicker({
autoclose: true,
todayHighlight: true
});
and then the result of click comes out as below:

Answer 1

I use codeigniter and this is my controller :
function save()
{
$this->template->set_title('Pickup');
$this->breadcrumbs->push('Pickup', 'pickup');
$this->breadcrumbs->push('Create Pickup', '/pickup/list');
$this->breadcrumbs->push('Save', '/pickup/add');
// JS Init
$js_init = "";
// Include CSS & JS
$this->template->add_init($js_init);
$this->template->add_includes('css', 'assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css');
$this->template->add_includes('css', 'assets/plugins/clockpicker/css/bootstrap-clockpicker.min.css');
$this->template->add_includes('js', 'assets/plugins/moment/moment.js');
$this->template->add_includes('js', 'assets/plugins/timepicker/bootstrap-timepicker.js');
$this->template->add_includes('js', 'assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js');
$this->template->add_includes('js', 'assets/plugins/clockpicker/js/bootstrap-clockpicker.min.js');
$this->template->add_includes('js', 'assets/plugins/clockpicker/js/bootstrap-clockpicker.min.js');
$this->template->add_includes('js', 'assets/js/popper.min.js');
$this->template->add_includes('js', 'assets/pages/jquery.form-pickers.init.js');
$this->template->add_includes('js', 'assets/plugins/validator/validator.min.js');
if (!$this->ion_auth->logged_in())
{
redirect('auth', 'refresh');
}
// validate form input
$this->form_validation->set_rules('pickup_code', 'Pickup Code', 'required');
$this->form_validation->set_rules('pickup_date','Date', 'required');
$this->form_validation->set_rules('pickup_address', 'Address', 'required');
// serial number untuk pickup
$serial = $this->MY_Model->generate_number($this->tables,$this->pk,'10','PCK');
if ($this->form_validation->run() == TRUE)
{
$data = array(
'pickup_code' =>$this->input->post('pickup_code'),
'pickup_date' =>$this->input->post('pickup_date'),
'pickup_address' =>$this->input->post('pickup_address')
);
$new_supplier = $this->MY_Model->insert($this->tables,$data);
redirect("pickup/listing", 'refresh');
}
else
{
$this->data['pickup_code'] = array(
'name' => 'pickup_code',
'id' => 'pickup_code',
'type' => 'text',
'data-error' => 'Please enter pickup code.',
'class' => 'form-control',
'required' => 'required',
'value' => $this->form_validation->set_value('pickup_code',$serial),
'readonly' => 'readonly',
);
$this->data['pickup_date'] = array(
'name' => 'pickup_date',
'id' => 'datepicker',
'type' => 'text',
'data-error' => 'Please enter pickup date.',
'class' => 'form-control',
'required' => 'required',
'value' => $this->form_validation->set_value('pickup_date'),
);
$this->data['pickup_note'] = array(
'name' => 'pickup_note',
'id' => 'pickup_note',
'type' => 'text',
'data-error' => 'Please enter note.',
'class' => 'form-control',
'value' => $this->form_validation->set_value('pickup_note'),
);
$this->data['pickup_address'] = array(
'name' => 'pickup_address',
'id' => 'pickup_address',
'type' => 'text',
'data-error' => 'Please enter address.',
'class' => 'form-control',
'required' => 'required',
'value' => $this->form_validation->set_value('pickup_address'),
);
$this->template->load('templates/Template',$this->folder.'/add',$this->data);
}
}
and this is my view :
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<?php echo form_open("pickup/save_pickup","data-toggle='validator'");?>
<h4 class="m-t-0 header-title"><b>Pickup Save</b></h4>
<p class="text-muted m-b-30 font-13">
<?php echo lang('create_group_subheading');?>
</p>
<?php if ($this->session->flashdata('message')) {?>
<div class='alert alert-danger alert-dismissable'>
<?php echo $this->session->flashdata('message'); ?>
</div>
<?php }?>
<div class="row">
<div class="col-md-6">
<div class="p-20">
<div class="form-group">
<label for="group_name"> Pickup Code
<?php ?>
<span class="text-danger">*</span></label>
<?php echo form_input($pickup_code);?>
<p class="help-block with-errors text-danger"></p>
</div>
<div class="form-group">
<label for="description"> Date
</label>
<span class="text-danger">*</span></label>
<?php echo form_input($pickup_date);?>
<div class="help-block with-errors text-danger"></div>
</div>
<div class="form-group">
<label for="description"> Note
</label>
<?php echo form_textarea($pickup_note);?>
<div class="help-block with-errors text-danger"></div>
</div>
<div class="form-group">
<label for="description"> Address
</label>
<span class="text-danger">*</span></label>
<?php echo form_textarea($pickup_address);?>
<div class="help-block with-errors text-danger"></div>
</div>
</div>
</div>
</div>
<div class="form-group text-right m-b-0">
<button class="btn btn-primary waves-effect waves-light" type="submit">
<i class="fa fa-save m-r-5"></i> <span>Save</span>
</button>
<a href="<?php echo base_url('pickup'); ?>" class="btn btn-secondary waves-effect m-l-5">
<i class="fa fa-reply m-r-5"></i> <span>Cancel</span>
</a>
<?php echo form_close();?>
</div>
</div>
</div>