[FEATURE] EXT:form - integrate new form framework
[Packages/TYPO3.CMS.git] / typo3 / sysext / form / Resources / Private / Frontend / Templates / FormElements / DatePicker.html
1 {namespace formvh=TYPO3\CMS\Form\ViewHelpers}
2 <f:layout name="Field" />
3 <f:section name="field">
4 <formvh:form.datePicker
5 id="{element.uniqueIdentifier}"
6 property="{element.identifier}"
7 placeholder="{formvh:translateElementProperty(element: element, property: 'placeholder')}"
8 dateFormat="{element.properties.dateFormat}"
9 initialDate="{element.properties.initialDate}"
10 enableDatePicker="{element.properties.enableDatePicker}"
11 class="{element.properties.elementClassAttribute}"
12 errorClass="{element.properties.elementErrorClassAttribute}"
13 additionalAttributes="{f:if(condition: '{element.required}', then: '{required: \'required\'}')}"
14 >
15 <f:if condition="{element.rootForm.renderingOptions.previewMode}">
16 <f:else>
17 <f:if condition="{element.properties.enableDatePicker}">
18 <script type="text/javascript">
19 if ("undefined" !== typeof $) {
20 $(function() {
21 $("#<f:format.raw>{element.uniqueIdentifier}</f:format.raw>").datepicker({
22 dateFormat: "<f:format.raw>{datePickerDateFormat}</f:format.raw>"
23 }).on("keydown", function(e) {
24 // By using "backspace" or "delete", you can clear the datepicker again.
25 if(e.keyCode == 8 || e.keyCode == 46) {
26 e.preventDefault();
27 $.datepicker._clearDate(this);
28 }
29 });
30 });
31 }
32 </script>
33 </f:if>
34 </f:else>
35 </f:if>
36 </formvh:form.datePicker>
37
38 <f:if condition="{element.properties.displayTimeSelector}">
39 <formvh:form.timePicker
40 id="{element.uniqueIdentifier}-time"
41 property="{element.identifier}"
42 initialDate="{element.properties.initialDate}"
43 class="{element.properties.timeSelectorClassAttribute} form-control"
44 errorClass="{element.properties.elementErrorClassAttribute}"
45 />
46 </f:if>
47 </f:section>