TYPO3 v12+中如何在Fluid模板使用后台日期时间选择器？

方法1：直接使用Web Component标签 #

TYPO3 v12后台的日期时间选择器基于Web Component实现，可直接在Fluid模板中使用<typo3-formengine-element-datetime>标签，步骤如下：

1. 引入依赖资源 #

如果是自定义后端页面，用f:be.container确保加载后台所需的ES模块和样式：

<f:be.container includeJsModules="{0: '@typo3/backend/form-engine/element/datetime-element.js'}">
  <!-- 模板内容区域 -->
</f:be.container>

2. 编写Web Component代码 #

在表单中添加组件标签并配置属性：

<div class="form-group">
  <typo3-formengine-element-datetime
    name="tx_yourextension_domain_model_yourmodel[myDate]"
    value="{myDate -> f:format.date(format: 'Y-m-d')}" <!-- 已有日期值，需符合格式要求 -->
    identifier="myDate"
    label="选择日期"
    enable-time="false" <!-- false仅选日期，true包含时间选择 -->
    required="false"
  ></typo3-formengine-element-datetime>
</div>

• name需匹配表单字段命名规范，确保提交后能映射到模型属性
• value传入已有数据时，格式需为Y-m-d或ISO标准格式

方法2：手动初始化日期选择器（兼容式） #

若不想依赖Web Component，可手动初始化新版日期选择器实例：

1. 调整HTML结构 #

适配v12的类名和数据属性：

<div class="input-group">
  <f:form.textfield
    type="text"
    property="myDate"
    id="my_date"
    class="form-control form-control-clearable t3js-datetimepicker-input"
    data-date-type="date" <!-- 可选值：date/datetime -->
    data-date-offset="0"
  />
  <span class="input-group-btn">
    <label class="mb-0 btn btn-default" for="my_date">
      <core:icon identifier="actions-edit-pick-date" />
    </label>
  </span>
</div>

2. 手动初始化JS模块 #

在模板末尾添加初始化代码：

<script type="module">
  import { DateTimePicker } from '@typo3/backend/date-time-picker.js';
  document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('my_date');
    if (input) {
      new DateTimePicker(input, {
        type: input.dataset.dateType || 'date',
        offset: parseInt(input.dataset.dateOffset) || 0
      });
    }
  });
</script>

关键注意事项 #

• TYPO3 v12已弃用旧版jQuery依赖的日期选择器，旧的t3js-datetimepicker类名失效，需改用新类名或Web Component
• 使用后台组件时，确保页面处于TYPO3后台上下文（加载了后台基础样式和模块），避免样式错乱
• 前端模板（非后台场景）不建议直接复用后台组件，推荐使用独立前端日期组件（如Flatpickr）避免依赖冲突

内容的提问来源于stack exchange，提问作者Moongazer