coo_quickanfrage
Datum- und Uhrzeitfeld für Formular Manager
HTML-Template: el-form-manager-datepicker-input.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
{namespace anfrage=TYPO3\CooQuickanfrage\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<bh:variable.typoscript path="plugin.tx_cooquickanfrage.form-manager" as="form-manager">
<f:if condition="{form-manager.config.label}">
<bh:property.text tag="label" class="bh-form-manager__item__label bh-form-manager__label" property="text"
additionalAttributes="{for: '{cObj.allSettings.inputname}-{cObj.uid}'}" />
</f:if>
<div class="bh-form-manager__field bh-form-manager__field--datepicker {f:if(condition: '{cObj.allSettings.style.bh-form-manager__item--required}', then: 'bh-form-manager__field--required')}"
data-bh-form-manager-name-label="{cObj.allSettings.inputname}">
<div class="bh-form-manager__field__icon bh-font-calendar"></div>
<f:if condition="{form-manager.config.placeholder}">
<bh:property.text tag="span"
class="bh-form-manager__field__input bh-form-manager__field__input--property" property="subtext" />
</f:if>
<f:form.textfield class="bh-form-manager__field__input bh-form-manager__field__input"
additionalAttributes="{inputmode: 'none', autocomplete: 'off'}"
id="{cObj.allSettings.inputname}-{cObj.uid}" name="{cObj.allSettings.inputname}"
required="{cObj.allSettings.style.bh-form-manager__item--required}"
placeholder="{f:if(condition: '{form-manager.config.placeholder}', then: '{cObj.subtext -> f:format.htmlentitiesDecode()}{f:if(condition: \'{cObj.allSettings.style.bh-form-manager__item--required}\', then: \'*\')}')}" />
<f:if condition="{cObj.allSettings.style.datepicker-type}=='daterange'">
<f:then>
<bh:form.datepicker.range class="bh-form-manager__field__datepicker" />
</f:then>
<f:else>
<bh:form.datepicker controls="{cObj.allSettings.style.datepicker-type}"
stepMinute="{cObj.allSettings.style.datepicker-steps-minutes}"
class="bh-form-manager__field__datepicker" dateFormat="{cObj.allSettings.dateFormat}"
timeFormat="{cObj.allSettings.timeFormat}" />
</f:else>
</f:if>
</div>
</bh:variable.typoscript>
</bh:tmpl.element>
Typoscript: el-form-manager-datepicker-input.typoscript
TYPOSCRIPT
plugin.tx_bh.settings.contentElements.el-form-manager-datepicker-input < abstract.bhElement
plugin.tx_bh.settings.contentElements.el-form-manager-datepicker-input {
name = Datum/ Uhrzeit
description = Dieses Element kann nur im Formular-Manager verwendet werden
templateFile = el-form-manager-datepicker-input.html
templatePath = EXT:coo_quickanfrage/Resources/Public/Elements/el-form-manager-items/el-form-manager-datepicker-input
settingsForm = EXT:coo_quickanfrage/Resources/Public/Elements/el-form-manager-items/el-form-manager-datepicker-input/el-form-manager-datepicker-input-settings.html
iconFile = typo3conf/ext/bh/Resources/Public/Icons/Elemente/date.svg
bheParentElement = el-form-manager
bheSortPriority = 30
options.translate = 1
options.oncreate = advanced
styleOptions {
size < plugin.tx_cooquickanfrage.form-manager.styleOptions.size
}
dummyData.text = Datum/Uhrzeit
dummyData.subtext = Datum/Uhrzeit
dateFormat = DD.MM.YYYY
timeFormat = HH:mm
styleOptions {
datepicker-type {
date = Datum
calendar = Kalender
time = Uhrzeit
daterange = Zeitraum
}
datepicker-steps-minutes {
1 = jede Minute
10 = 10 Minuten
15 = 15 Minuten
20 = 20 Minuten
30 = 30 Minuten
}
}
userClass = bh-form-manager__item
}
plugin.tx_cooquickanfrage.form-manager.items := addToList(el-form-manager-datepicker-input)
bh.page.includeCSSLibs.el-form-manager-datepicker-input = typo3conf/ext/coo_quickanfrage/Resources/Public/Elements/el-form-manager-items/el-form-manager-datepicker-input/el-form-manager-datepicker-input.css
bh.page.includeJS.el-form-manager-datepicker-input = typo3conf/ext/coo_quickanfrage/Resources/Public/Elements/el-form-manager-items/el-form-manager-datepicker-input/el-form-manager-datepicker-input.js
[bh.isMobile]
bhDefaultMobilePage.includeCSSLibs.el-form-manager-datepicker-input < bh.page.includeCSSLibs.el-form-manager-datepicker-input
bhDefaultMobilePage.includeJS.el-form-manager-datepicker-input < bh.page.includeJS.el-form-manager-datepicker-input
[global]
Settings-HTML: el-form-manager-datepicker-input-settings.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
{namespace anfrage=TYPO3\CooQuickanfrage\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<anfrage:manager.item.settings item="{cObj}" />
<div class="bhe-formsettings-option">
<label>Art der Eingabe</label>
<f:form.select name="style[datepicker-type]" value="{cObj.allSettings.style.datepicker-type}"
options="{cObj.allSettings.styleOptions.datepicker-type}" />
</div>
<div class="bhe-formsettings-option"
data-bhe-form-listener="tx_bh_page[data][content][settings][style][datepicker-type]"
data-bhe-form-active-on="value" data-bhe-form-active-value="time">
<label>Schritte bei Minuten</label>
<f:form.select name="style[datepicker-steps-minutes]" value="{cObj.allSettings.style.datepicker-steps-minutes}"
options="{cObj.allSettings.styleOptions.datepicker-steps-minutes}" />
</div>
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
<f:form.submit value="Speichern" />
</bh:form.settingsform>