SilverStripe 3 GridFieldEditableColumns DateField日曆

在GridField我使用GridFieldEditableColumns。內聯編輯正在運行，並在使用DateTimeField時顯示日曆。SilverStripe 3 GridFieldEditableColumns DateField日曆

但是，當使用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') 
    ) 
    ) 
));

來源

2017-02-10 Sepp Hofer

的問題是SilverStripe JavaScript的目標與類名.field和.date一個div內的input場。 CMS中的正常DateField將具有此父母div。 A 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：

框架/管理/ 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仍然與包裝類.field和.date在div日期輸入，甚至在GridFieldEditableColumn。我想這是因爲這個領域有多個輸入。

這個不起作用的原因是DateField是GridFieldEditableColumn沒有用這個div包裝輸入字段。

要解決這個問題，我們可以添加一些JavaScript來調用我們的字段上的日期選擇器腳本。

在一個配置文件陽明海運我們添加JavaScript文件由LeftAndMain類加載：

的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));

來源

2017-02-13 02:10:41 3dgoo

我敢肯定有一個整潔自定義JavaScript的方式來做到這一點。在接下來的兩天裏，我沒有任何空閒時間，但在那之後，我有機會看看它，並分享我的想法。 – 3dgoo

:) ............. –

我添加了一個簡單的解決方案，將日期選擇器添加到可編輯網格字段列中的DateField。 – 3dgoo

與@友好的幫助3dgoo我想出了以下內容：（可顯示日期選擇器看到@ 3dgoo的答案，最後JavaScript的一部分）。要始終有正確的語言文件包括（如果存在）我做了：

use GridDateField :: create（'Start'，'On'）;代替的DateField ::創建（ '開始'， '開'）

和類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); 
}

}

來源

2017-02-20 08:07:47

感謝您的信息@ 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 class="field date"><input $AttributesHTML /></div>

在一個div輸入請參閱完整的片段在這裏：
https://gist.github.com/giovdk21/5001061e0262b7903ca339cc55991870

來源

2017-03-01 11:56:34 Giovanni

SilverStripe 3 GridFieldEditableColumns DateField日曆

回答

相關問題