Datetimepicker for date fields

Resources/Private/Partials/Model/Election/FormFields/EndDate.html

@@ -3,8 +3,9 @@
 		<label>
 			<f:translate key="model.election.field.end_date">End date</f:translate>
 		</label>
-		<div class="form-control-wrap" style="max-width: 480px">
-			<f:form.textfield class="form-control" property="endDate" value="{election.endDate -> f:format.date(format:'Y-m-d H:i:s')}"/>
+		<div class="form-control-wrap" style="max-width: 480px; position:relative;">
+			<f:be.pageRenderer includeRequireJsModules="{0: 'TYPO3/CMS/Backend/DateTimePicker'}" />
+			<f:form.textfield class="form-control t3js-datetimepicker" data="{date-type: 'datetime', date-format: 'YYYY-MM-DD HH:mm:ss'}" property="endDate" value="{election.endDate -> f:format.date(format:'Y-m-d H:i:s')}"/>
 		</div>
 	</div>
 </fieldset>

Resources/Private/Partials/Model/Election/FormFields/StartDate.html

+<f:render partial="Model/Election/FormFields/Title" arguments="{election:election}"/>
 <fieldset class="form-section">
 	<div class="form-group">
 		<label>
 			<f:translate key="model.election.field.start_date">Start date</f:translate>
 		</label>
-		<div class="form-control-wrap" style="max-width: 480px">
-			<f:form.textfield class="form-control" property="startDate" value="{election.startDate -> f:format.date(format:'Y-m-d H:i:s')}"/>
+		<div class="form-control-wrap" style="max-width: 480px; position:relative;">
+			<f:be.pageRenderer includeRequireJsModules="{0: 'TYPO3/CMS/Backend/DateTimePicker'}" />
+			<f:form.textfield class="form-control t3js-datetimepicker" data="{date-type: 'datetime', date-format: 'YYYY-MM-DD HH:mm:ss'}" property="startDate" value="{election.startDate -> f:format.date(format:'Y-m-d H:i:s')}"/>
 		</div>
 	</div>
 </fieldset>