DateField添加至Root.Course标签页后Datepicker不显示问题咨询

当我将DateField添加到主内容标签页Root.Main时，Datepicker可正常显示，但将标签页改为Root.Course后，Datepicker就不再显示了。请问我遗漏了什么配置？

代码对比 #

显示正常的代码

$dateFieldFrom = new DateField('course_DateFrom', 'Date from');
$dateFieldFrom->setConfig('showcalendar', true);
$dateFieldFrom->setConfig('dateformat', 'dd MMM YYYY');
$dateFieldTo = new DateField('course_DateTo', 'Date to');
$dateFieldTo->setConfig('showcalendar', true);
$dateFieldTo->setConfig('dateformat', 'dd MMM YYYY');
$fields->addFieldToTab('Root.Main', new DateField('course_DateFrom', 'Date from'));
$fields->addFieldToTab('Root.Main', new DateField('course_DateTo', 'Date to'));

无法显示的代码

$dateFieldFrom = new DateField('course_DateFrom', 'Date from');
$dateFieldFrom->setConfig('showcalendar', true);
$dateFieldFrom->setConfig('dateformat', 'dd MMM YYYY');
$dateFieldTo = new DateField('course_DateTo', 'Date to');
$dateFieldTo->setConfig('showcalendar', true);
$dateFieldTo->setConfig('dateformat', 'dd MMM YYYY');
$fields->addFieldToTab('Root.Course', new DateField('course_DateFrom', 'Date from'));
$fields->addFieldToTab('Root.Course', new DateField('course_DateTo', 'Date to'));

问题分析与解决办法 #

嘿，我一眼就看到了核心问题——你白做了配置！

你先创建了$dateFieldFrom和$dateFieldTo，还认真设置了showcalendar和dateformat，结果最后添加到标签页的时候，你又new了两个完全全新的DateField实例！等于之前的配置根本没用到！

为什么Root.Main的时候看起来正常？大概率是因为Main标签页里有其他字段触发了Datepicker的前端资源加载，或者系统默认给Main标签页加载了这些资源，所以即使你添加的是未配置的DateField，calendar还是出来了。但换到自定义的Root.Course标签页，没有这些默认资源，问题就暴露了。

1. 修复实例引用问题（最关键）

把你已经配置好的字段实例添加到标签页，而不是重新创建新的：

$dateFieldFrom = new DateField('course_DateFrom', 'Date from');
$dateFieldFrom->setConfig('showcalendar', true);
$dateFieldFrom->setConfig('dateformat', 'dd MMM YYYY');
$dateFieldTo = new DateField('course_DateTo', 'Date to');
$dateFieldTo->setConfig('showcalendar', true);
$dateFieldTo->setConfig('dateformat', 'dd MMM YYYY');
// 直接用配置好的变量，不要new新的！
$fields->addFieldToTab('Root.Course', $dateFieldFrom);
$fields->addFieldToTab('Root.Course', $dateFieldTo);

2. （可选）手动确保资源加载

如果修复后还是不行，可能是自定义标签页没有自动加载Datepicker的前端资源，可以手动在getCMSFields方法末尾添加：

Requirements::css('silverstripe/framework/css/DateField.css');
Requirements::javascript('silverstripe/framework/javascript/DateField.js');

不过通常只要字段正确添加到表单，资源会自动注册，所以第一个步骤应该就能解决问题。

3. 额外检查

确认course_DateFrom和course_DateTo确实是你的模型（DataObject或Page）中定义的数据库字段，比如：

private static $db = [
    'course_DateFrom' => 'Date',
    'course_DateTo' => 'Date',
];

如果字段不存在，也可能导致渲染异常，影响Datepicker显示。

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