簡體   English   中英

流體中的日期選擇器 typo3

[英]Datepicker in fluid typo3

我正在使用 typo3 extbase 擴展,我被這個特殊點卡住了。 我們可以用 typo3 流體當量嗎

<input type="date" />

我的擴展程序中需要有一個日期選擇器。 typo3 流體可以嗎?

Typo3 8.7 允許您使用 jquery 日期選擇器。

首先,將 datepicker 模塊添加到您的擴展 (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(); }');
}

...然后您可以使用此流體文本字段來啟動日期選擇器:

<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>

我建議您為此包含一個外部庫。 例如,我使用過 jquery.datetimepicker,你能在這里找到它嗎?

修改您的 Typoscript setup.ts 並添加下一行

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   
 }
}

在您的流體模板中使用下一個代碼:

<f:form.textfield type="text" id="datetimepicker" name="PublishDate" />

並且在 JS 文件中包含

$('#datetimepicker').datetimepicker();

Controller 中的參數將是PublishDate但將其作為字符串接收,您必須在 DateTime 或您使用的數據類型中使用 PHP 進行轉換。

10.4 更新:

將日期選擇器模塊添加到您的擴展 (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');
}

然后你可以在 TYPO3 后端模塊中使用這個流體:

<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>

data-date-type可以設置為“date”或“datetime”。

不要忘記將核心命名空間添加到圖標 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">

流體不隨日期選擇器一起提供或需要特定的選擇器。

事實上,您可以使用任何 HTML 日期選擇器。

<f:form.textfield type="date" additionalAttributes="{min:'{f:format.date(date:\'now\',format:\'Y-m-d\')}'}"
                    name="{name}" value="{value}"
                    
/>

您需要使用現代瀏覽器。 它應該從 TYPO3 6.2 開始工作。 文件

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM