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定位input内的div字段，其中包含类名.field和.date。 CMS中的正常DateField将具有此父div。 DateField内的GridFieldEditableColumn没有此父div。

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

<强>框架/管理/ 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的某些实例添加了datepicker：

<强>框架/管理/ 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仍然在div中包含类.field和.date的日期输入，即使在GridFieldEditableColumn中也是如此{1}}。我猜这是因为这个字段有多个输入。

DateField GridFieldEditableColumn不起作用的原因是div不会使用此LeftAndMain包装输入字段。

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

在config yml文件中，我们添加了一个由--- Name: mysite After: 'framework/*','cms/*' --- LeftAndMain: extra_requirements_javascript: - 'mysite/javascript/cms.js'类加载的JavaScript文件：

<强> mysite的/ _config / config.yml

ssDatepicker

在我们的JavaScript文件中，我们点击日期字段时调用(function($) { $(document).on('click', '.cms .ss-gridfield-editable td > input.text.date', function() { $(this).ssDatepicker(); if($(this).data('datepicker')) { $(this).datepicker('show'); } }); }(jQuery));。

<强> mysite的/ JavaScript的/ cms.js

Service.onStartCommand()

Answer 2

在@ 3dgoo的友好帮助下，我想出了以下内容：（显示日期选择器，请参阅@ 3dgoo的答案，最后的javascript部分）。为了总是包含正确的语言文件（如果存在）我做了：

使用GridDateField :: create（＆＃39; Start＆＃39;，＆＃39; On＆＃39;）;而不是DateField :: create（＆＃39; Start＆＃39;，＆＃39; On＆＃39;）

和类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或扩展类本身：

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

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

的div中

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

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

SilverStripe 3 GridFieldEditableColumns DateField日历

3 个答案: