Datetimepicker in form not transferring date - php

Question

At the backend of my opencart e-commerce package, there is the possibility to insert vouchers for customers. However, there is standard no possibility to set a start and end date (1 year later) for the voucher. Therefore I have adapted the voucher.tpl template to include this possibility. I have implemented this completely identical as for the coupon.tpl where there is the possibility to enter a start date and end date.
The input field for the start date and end date is using the datetimepicker script. The datepicker is showing up correctly when I click the calendar button (see image 1) and the date is showing up.
The dates are used in a form, but unfortunately the data seem not be transferred with the form when the save button is clicked. I see no difference with the coupon.tpl page where everything is working properly. I spent already many hours in founding the error but did not succeed yet. Could somebody help me on my way?
Thanks,
SabKo
The voucher.tpl has the following code:
<div id="content">
<div class="page-header">
<div class="container-fluid">
<div class="pull-right">
<button type="submit" form="form-voucher" data-toggle="tooltip" title="<?php echo $button_save; ?>" class="btn btn-primary"><i class="fa fa-save"></i></button>
<i class="fa fa-reply"></i>
</div>
<h1><?php echo $heading_title; ?></h1>
<ul class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<li><?php echo $breadcrumb['text']; ?></li>
<?php } ?>
</ul>
</div>
</div>
<div class="container-fluid">
<?php if ($error_warning) { ?>
<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> <?php echo $error_warning; ?>
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
<?php } ?>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-pencil"></i> <?php echo $text_form; ?></h3>
</div>
<div class="panel-body">
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-voucher" class="form-horizontal">
<div class="tab-content">
<div class="tab-pane active" id="tab-general">
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-code"><span data-toggle="tooltip" title="<?php echo $help_code; ?>"><?php echo $entry_code; ?></span>
</label>
<div class="col-sm-10">
<input type="text" name="code" value="<?php echo $code; ?>" placeholder="<?php echo $entry_code; ?>" id="input-code" class="form-control" />
<?php if ($error_code) { ?>
<div class="text-danger"><?php echo $error_code; ?></div>
<?php } ?>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-from-name"><?php echo $entry_from_name; ?>
</label>
<div class="col-sm-10">
<input type="text" name="from_name" value="<?php echo $from_name; ?>" placeholder="<?php echo $entry_from_name; ?>" id="input-from-name" class="form-control" />
<?php if ($error_from_name) { ?>
<div class="text-danger"><?php echo $error_from_name; ?></div>
<?php } ?>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-to-name"><?php echo $entry_to_name; ?></label>
<div class="col-sm-10">
<input type="text" name="to_name" value="<?php echo $to_name; ?>" placeholder="<?php echo $entry_to_name; ?>" id="input-to-name" class="form-control" />
<?php if ($error_to_name) { ?>
<div class="text-danger"><?php echo $error_to_name; ?></div>
<?php } ?>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="input-amount"><?php echo $entry_amount; ?></label>
<div class="col-sm-10">
<input type="text" name="amount" value="<?php echo $amount; ?>" placeholder="<?php echo $entry_amount; ?>" id="input-amount" class="form-control" />
<?php if ($error_amount) { ?>
<div class="text-danger"><?php echo $error_amount; ?></div>
<?php } ?>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="input-date-start"><?php echo $entry_date_start; ?></label>
<div class="col-sm-3">
<div class="input-group date">
<input type="text" name="date_start" value="<?php echo $date_start; ?>" placeholder="<?php echo $entry_date_start; ?>" data-date-format="YYYY-MM-DD" id="input-date-start" class="form-control" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
</span></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="input-date-end"><?php echo $entry_date_end; ?></label>
<div class="col-sm-3">
<div class="input-group date">
<input type="text" name="date_end" value="<?php echo $date_end; ?>" placeholder="<?php echo $entry_date_end; ?>" data-date-format="YYYY-MM-DD" id="input-date-end" class="form-control" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
</span></div>
</div>
</div>
<?php if ($voucher_id) { ?>
<div class="tab-pane" id="tab-history">
<div id="history"></div>
</div>
<?php } ?>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript"><!--
$('.date').datetimepicker({
pickTime: false
});
//--></script>
</div>
The controller page has the following code, so should be able to read the input of the dates:
if (isset($this->request->post['date_start'])) {
$data['date_start'] = $this->request->post['date_start'];
} elseif (!empty($voucher_info)) {
$data['date_start'] = ($voucher_info['date_start'] != '0000-00-00' ? $voucher_info['date_start'] : '');
} else {
$data['date_start'] = date('Y-m-d', time());
}
if (isset($this->request->post['date_end'])) {
$data['date_end'] = $this->request->post['date_end'];
} elseif (!empty($voucher_info)) {
$data['date_end'] = ($voucher_info['date_end'] != '0000-00-00' ? $voucher_info['date_end'] : '');
} else {
$data['date_end'] = date('Y-m-d', strtotime('+1 month'));
}

Answer 1

You're initialize your datetime picker on div with class .date but you have to initialize it on inputs with their classes or ids.
replace this code:
<script type="text/javascript"><!--
$('.date').datetimepicker({
pickTime: false
});
//--></script>
with this one:
<script type="text/javascript"><!--
$('#input-date-start').datetimepicker({
pickTime: false
});
$('#input-date-end').datetimepicker({
pickTime: false
});
//--></script>