README

一个提供使用 flatpickr.js 的前端日期和时间选择器的包。

特性

• 在前端表单中显示日期或时间选择器
• 使用webpack动态导入动态加载语言文件
• 集成
  • Contao表单生成器
  • 过滤包
• 支持 Contao Encore Bundle
• 支持 Twig Templates Bundle

使用方法

安装

使用composer或contao管理器安装，然后更新数据库

composer require heimrichhannot/contao-flatpickr-bundle

表单生成器

创建一个具有输入验证的日期、时间或日期和时间的文本字段，并检查“激活flatpickr”

过滤包

创建类型为日期、日期时间、时间或文本的过滤元素，并检查“激活flatpickr”。您还可以从dca激活flatpickr并传递额外的选项。有关更多信息，请参阅dca配置章节。Flatpickr包会检查过滤元素的对应字段dca配置。

DCA / 其他前端表单

其他前端表单系统可能也可以工作（例如 formhybrid），如果表单小部件由getAttributesFromDca钩子处理。您需要在dca字段配置中激活flatpickr并在页面级别（布局部分）激活flatpickr。配置是继承的，但可以覆盖。

要激活dca字段的flatpickr，将 field.eval.flatpickr.active 设置为 true。

$GLOBALS['TL_DCA']['tl_content']['fields']['date']['eval']['flatpickr']['active'] = true;

您可以使用 rgxp 评估选项自定义选择器类型并传递额外的flatpickr配置

$GLOBALS['TL_DCA']['tl_content']['fields']['date'] = [
    'eval' => [
        'rgxp' => 'datim' # one of 'date', 'time' or 'datim'
        'flatpickr' => [
            'active' => true,
            'options' => [], // Pass addtional flatpickr option, see configuration chapter
            'plugins' => [], // Use and configure flatpickr plugins, see configuration chapter
          ],
    ]   
];

配置

如果为字段激活了flatpickr，它将“开箱即用”。有时还需要额外的自定义。

Flatpickr选择器类型

支持三种选择器类型：日期、时间和日期时间。通过将 rgxp 值设置为 'date'、'time' 或 'datim' 自动选择类型

$field['eval']['rgxp'] = 'time'

自定义配置

flatpickr的大多数配置选项应该与该包兼容。

这些选项可以设置如下

• DCA（适用于过滤包和其他前端表单）：将配置添加到 $field['eval']['flatpickr']['options']
• php事件（适用于所有类型）：请参阅开发人员章节
• javascript事件（适用于所有类型）：请参阅开发人员章节

典型配置选项

此包还提供了以下附加配置

插件

Flatpickr可以通过插件进行扩展。此包支持的插件可以从 $field['eval']['flatpickr']['plugins'] 激活和配置。

monthSelectPlugin

monthSelectPlugin 显示仅显示月份的日历视图。除了插件的默认配置选项之外，还有一个额外的 disabledMonths 选项。

示例

$GLOBALS['TL_DCA']['tl_content']['fields']['date']['eval']['flatpickr']['plugins']['monthSelectPlugin'] = [
    'shorthand' => true,
    'dateFormat' => "M Y",
    'disabledMonths' => [2021 => [0,3,6]]
];

rangePlugin

rangePlugin 通过两个输入添加范围选择。它可以在表单生成器中启用或在dca中启用

$GLOBALS['TL_DCA']['tl_content']['fields']['startDate']['eval']['flatpickr']['plugins']['rangePlugin'] = [
    'input' => '#stopDate',
];

开发人员

事件

JavaScript事件

从版本1.x升级到2.x

• 将 flatpickr => [ active => true ] 添加到dca配置的eval数组中
• 将dca中的配置从eval移动到eval => [ flatpickr => [ options => [ option => value ] ] ]