SilverStripe 3 GridFieldEditableColumns DateField 日历

Question

在 GridField 中我使用 GridFieldEditableColumns。使用 DateTimeField.

时，内联编辑正在运行并显示日历

但是在使用 DateField 时这不起作用。（日历未显示）。有什么我想念的吗？

$holiDayConfig = GridFieldConfig_RecordEditor::create();
$holiDayConfig->removeComponentsByType('GridFieldDataColumns');
$holiDayConfig->removeComponentsByType('GridFieldAddNewButton');
$holiDayConfig->removeComponentsByType('GridFieldDetailForm');
$holiDayConfig->removeComponentsByType('GridFieldEditButton');
$holiDayConfig->addComponent(new GridFieldEditableColumns());
$holiDayConfig->addComponent(new GridFieldLayoutHelper());
$holiDayConfig->addComponent($newButton = new GridFieldAddNewInlineButton());
$newButton->setTitle(_t('OpenTimes.AddSchedule', 'add newSchedule'));

$holiDayGridfield = new GridField(_t('OpenTimes.SchedulesTab','Schedules / Holidays'), _t('OpenTimes.ScheduleTab','Schedule / Holidays'), $this->owner->HoliDays(), $holiDayConfig);

$holiDayConfig->getComponentByType('GridFieldEditableColumns')->setDisplayFields(array(
    'Schedule' => array(
        'callback' => function ($record, $column, $holiDayGridfield){

            $tPF = DateField::create('Schedule', 'AM');                 // NOT WORKING 
            $tPF->setConfig('showcalendar', true);                      // NOT WORKING / NO CALENDAR

            //$tPF = DateTimeField::create('Schedule', 'AM');           // WORKING
            //$tPF->getDateField()->setConfig('showcalendar', true);    // WORKING / SHOWING CALENDAR

            return $tPF;
        },
        'title' => _t('OpenTimes.On', 'On')
    )
    )
));

Answer 1

问题是 SilverStripe JavaScript 以 div 中的 input 字段为目标，class 名称为 .field 和 .date。 CMS 中的普通 DateField 将具有此父级 div。 GridFieldEditableColumn 里面的一个 DateField 没有这个父 div.

这是应用日期选择器日历的当前JavaScript：

framework/admin/javascript/LeftAndMain.js

$('.cms .field.date input.text').entwine({
    onmatch: function() {
        var holder = $(this).parents('.field.date:first'), config = holder.data();
        if(!config.showcalendar) {
            this._super();
            return;
        }

        config.showOn = 'button';
        if(config.locale && $.datepicker.regional[config.locale]) {
            config = $.extend(config, $.datepicker.regional[config.locale], {});
        }

        $(this).datepicker(config);
        // // Unfortunately jQuery UI only allows configuration of icon images, not sprites
        // this.next('button').button('option', 'icons', {primary : 'ui-icon-calendar'});

        this._super();
    },
    onunmatch: function() {
        this._super();
    }
});

以下文件还为 DateField:

的某些实例添加了日期选择器

framework/admin/javascript/DateField.js

(function($) {

    $.fn.extend({
        ssDatepicker: function(opts) {
            return $(this).each(function() {
                if($(this).data('datepicker')) return; // already applied

                $(this).siblings("button").addClass("ui-icon ui-icon-calendar");

                var holder = $(this).parents('.field.date:first'),
                    config = $.extend(opts || {}, $(this).data(), $(this).data('jqueryuiconfig'), {});
                if(!config.showcalendar) return;

                if(config.locale && $.datepicker.regional[config.locale]) {
                    config = $.extend(config, $.datepicker.regional[config.locale], {});
                }

                if(config.min) config.minDate = $.datepicker.parseDate('yy-mm-dd', config.min);
                if(config.max) config.maxDate = $.datepicker.parseDate('yy-mm-dd', config.max);

                // Initialize and open a datepicker
                // live() doesn't have "onmatch", and jQuery.entwine is a bit too heavyweight for this, so we need to do this onclick.
                config.dateFormat = config.jquerydateformat;
                $(this).datepicker(config);
            });
        }
    });

    $(document).on("click", ".field.date input.text,.fieldholder-small input.text.date", function() {
        $(this).ssDatepicker();

        if($(this).data('datepicker')) {
            $(this).datepicker('show');
        }
    });
}(jQuery));

这对 DateTimeField 有效的原因是 DateTimeField 仍然用 classes .field 和 [=17 包装 div 中输入的日期=]，甚至在 GridFieldEditableColumn。我猜这是因为这个字段有多个输入。

这对 DateField 不起作用的原因是 GridFieldEditableColumn 没有用这个 div 包装输入字段。

要解决这个问题，我们可以添加一些 JavaScript 来调用我们字段上的日期选择器脚本。

在配置 yml 文件中，我们添加一个 JavaScript 文件，由 LeftAndMain class:

加载

mysite/_config/config.yml

---
Name: mysite
After: 'framework/*','cms/*'
---

LeftAndMain:
  extra_requirements_javascript:
    - 'mysite/javascript/cms.js'

在我们的 JavaScript 文件中，我们在单击日期字段时调用 ssDatepicker。

mysite/javascript/cms.js

(function($) {
    $(document).on('click', '.cms .ss-gridfield-editable td > input.text.date', function() {
        $(this).ssDatepicker();

        if($(this).data('datepicker')) {
            $(this).datepicker('show');
        }
    });
}(jQuery));

Answer 2

在@3dgoo 的友好帮助下，我得出了以下结论：（要显示日期选择器，请参阅@3dgoo 的回答，最后 javascript 部分）。为了始终包含正确的 language-file（如果存在），我做了：

使用GridDateField::create('Start', 'On');而不是 DateField::create('Start', 'On')

和 class GridDateField 扩展了 DateField：

<?php
class GridDateField extends DateField {


public function Field($properties = array()) {

    if($this->getConfig('showcalendar')){
        $locale = i18n::get_locale();
        $lang = i18n::get_lang_from_locale($locale);
        $localeFile = THIRDPARTY_DIR . "/jquery-ui/datepicker/i18n/jquery.ui.datepicker-{$lang}.js";
        if (file_exists(Director::baseFolder() . '/' .$localeFile)){
            Requirements::javascript($localeFile);
        }
    }

     return parent::Field($properties);
}

}

Answer 3

感谢@3dgoo 的信息

我实现它的方法是创建自定义（表单字段）模板，然后将其分配给 DateField，因此我不需要任何额外的 JavaScript 或扩展 class 本身：

$displayFields['StartDate'] = function($record, $column, $grid) {
    return DateField::create($column)
        ->setConfig('dateformat', 'dd-MM-yyyy')
        ->setConfig('showcalendar', true)
        ->setTemplate('GridFieldEditable_DateField');
};

字段模板只是将输入包装在具有字段和日期 classes

的 div 中

<div class="field date"><input $AttributesHTML /></div>

请在此处查看完整代码段：
https://gist.github.com/giovdk21/5001061e0262b7903ca339cc55991870

SilverStripe 3 GridFieldEditableColumns DateField 日历

SilverStripe 3 GridFieldEditableColumns DateField Calendar

datepicker

silverstripe