Datepicker in fluid typo3
Question
I am working with a typo3 extbase extension and I got stuck with this particular point. Can we have a typo3 fluid equivalent for
<input type="date" />
I need to have a date picker in my extension. Is it possible with typo3 fluid?
5 answers
solution1
2 2020-05-26 13:13:48
Typo3 8.7 lets you utilise jquery datepicker.
First, add the datepicker module to your extension (ext_localconf.php):
//If you want to use it in the BE, include the If line
if(TYPO3_MODE === 'BE'){
$pageRenderer = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Page\PageRenderer::class);
$pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/DateTimePicker','function() { initScript(); }');
}
...then you can use this fluid textfield to initiate the datepicker:
<f:form.textfield type="datetime" property="dateexample" id="dateexample" class="form-control t3js-datetimepicker t3js-clearable" data="{date-type:'datetime',date-offset:'0'}" value="{dateexample->f:format.date(format: 'd/m/Y')}" /><span class="input-group-btn"><label class="btn btn-default" for="dateexample"><span class="fa fa-calendar"></span></label></span>
solution2
1 2017-09-08 01:15:39
I recommend you include an external library for this. For example, I have used jquery.datetimepicker, could you find it here .
Modifiy your Typoscript setup.ts and add next lines
page {
includeCSS {
datetimepicker = EXT:your_extension/Resources/Public/Css/jquery.datetimepicker.min.css
}
includeJS {
JqueryUITimepicker = EXT:your_extension/Resources/Public/Js/jquery.datetimepicker.full.min.js
}
}
In your Fluid Template use the next code:
<f:form.textfield type="text" id="datetimepicker" name="PublishDate" />
And in JS file include
$('#datetimepicker').datetimepicker();
The argument in the Controller will be PublishDate but receive it as string you have to convert with PHP in DateTime or the data type that you use.
solution3
1 2022-10-02 14:12:30
Update for 10.4:
Add the datepicker module to your extension (ext_localconf.php):
if(TYPO3_MODE === 'BE'){
$pageRenderer = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Page\PageRenderer::class);
$pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/DateTimePicker');
}
Then you can use this Fluid in a TYPO3 Backend Module:
<div class="input-group">
<input type="text" id="my-unique-identifier"
class="t3js-datetimepicker form-control t3js-clearable hasDefaultValue" data-date-type="date"
data-formengine-input-name="my-input-field-name"
data-formengine-input-initialized="true">
<span class="input-group-btn">
<label class="btn btn-default" for="my-unique-identifier">
<core:icon identifier="actions-calendar-alternative" size="small" />
</label>
</span>
</div>
The value data-date-type can be set to "date" or "datetime".
Don't forget to add core namespace to your Fluid template for the Icon API:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
data-namespace-typo3-fluid="true">
solution4
0 2017-04-22 18:34:37
Fluid is not shipped with a date picker or required a specific one.
In fact you could use any HTML date picker.
solution5
0 2023-02-02 15:13:02
<f:form.textfield type="date" additionalAttributes="{min:'{f:format.date(date:\'now\',format:\'Y-m-d\')}'}"
name="{name}" value="{value}"
/>
You need to use modern browsers. It should be work since TYPO3 6.2. ( docu )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.