2014-08-27 50 views
2

我想讓用戶能夠輸入多個日期,並希望我可以使用repeatable表單字段類型(Joomla 3.3的新版本)。如何在Joomla表單的可重複字段中使用日曆字段?

我確實用模式彈出行添加/刪除項目,但日曆圖標不會彈出日曆選取器。我嘗試了一個text輸入,似乎工作正常。

我的表單定義的相關部分:

<field 
     name="event_dates" 
     type="repeatable" 
     id="event_dates" 
     icon="calendar" 
     label="Event calendar dates" 
     select="Select dates" 
    > 
    <fields name="jmfields_event_dates"> 
     <fieldset 
       name="event_dates_modal" 
       repeat="true" 
       hidden="true"> 
      <field 
       name="event_date" 
       type="calendar" 
       format="%d-%m-%Y" 
       label="Date" 
       /> 
     </fieldset> 
    </fields> 
</field> 

回答

1

我沒試過有重複的領域內的日曆字段,但重複的領域太有一堆的JavaScript問題/衝突的又馬車。檢查您的瀏覽器錯誤控制檯是否有任何此類問題。我建議等到可重複字段變得更加穩定。

+0

可惜,將是很好的方式來處理多個日期。我沒有在控制檯中看到錯誤,但我注意到日曆按鈕都具有相同的ID。 – 2014-08-28 13:49:52

+0

@JanMisker「日曆按鈕都具有相同的ID」 - 這很有趣,因爲它肯定會使頁面上的任何代碼行爲不當 – Sbpro 2014-08-28 13:59:08

-1

您可以試用this(「乘數模塊」)。我使用了不同的方法來獲得與Joomla可重複表單字段類型相同的結果,並且避免了「彈出窗口內的彈出窗口」。仍處於開發階段,但也許你可以嘗試一下這個概念。問候。

我做了什麼來解決類似的問題?

我有一個默認的Joomla可重複表單字段類型的類似問題,特別是與「彈出」表單字段類型(例如Joomla「日期」)。因爲我創建了某種模塊模式(mod_multiplier),我使用了不同的方法 - >我不會重複字段(部分)的形式,我想使用相同的部分進行多次插入

模塊mod_multiplier

內部模塊的XML文件是3個保留字段 「包裝」, 「轉發」 和 「內容」。

內「包裝」是「重複」字段中的地方:

<fieldset name="basic" addfieldpath="/modules/mod_multiplier/models/fields"> 
    <!-- Wrapper is container for repeatable fields--> 
    <fields name="wrapper"> 

    <!--This is the place where you insert your fields--> 

    </fields> 
    <field name="repeater" label="" type="repeater" /> 
    <field name="content" hidden="true" label="Content" type="hidden" /> 
</fieldset> 

的所有內容將被存儲在裏面JSON格式「內容」字段。每次當我們按下「添加」按鈕表格時,我們會將一行數據添加到「內容」字段。畢竟,在「內容」中,我們將有數據行。

tmpl/default.php文件裏面的內容以及如何獲取字段值?

分層數據結構有3個級別:行,行和字段。

  • 所有數據=> $行
  • 數據的
  • 一行=> $行
  • 一個字段=> $行向> FIELD_NAME

從mod_multiplier實例:

裏面的「包裝」是字段「國家」和「城市」,我們稱它們爲名稱(在tmpl/default中。PHP)是這樣的:

<ul> 
<?php foreach ($rows as $row):?> 
    <li> 
    <?php echo $row->country;?>:<?php echo $row->city;?>  
    </li> 
<?php endforeach; ?> 
</ul> 
0

我也想這樣做,而不是默認的日曆字段我最終起來使用jQuery日期選擇在一個普通的文本字段來代替。您在頁面上添加jQuery腳本以定位輸入字段,並且您有一些解決辦法,直到默認日曆的實際修補程序結束。

你在你的頭需要這些文件:

JHtml::_('jquery.framework'); 
JHtml::_('jquery.ui'); 
$doc =& JFactory::getDocument(); 
// loaded from the code.jquery.com site 
$doc->addStylesheet('http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css'); 
// I downloaded the datepicker only and placed it in this folder 
$doc->addScript(JURI::root().'/media/jui/js/datepicker/jquery-ui.min.js'); 

該字段的XML:

<!-- Course_date Field. Type: Repeatable. (joomla) --> 
<field 
    type="repeatable" 
    name="course_date" 
    label="Course Dates" 
    description="COM_LEARNINGMANAGER_EVENT_COURSE_DATE_DESCRIPTION" 
    id="course_date" 
    class="course_dates" 
    select="COM_LEARNINGMANAGER_EVENT_COURSE_DATE_SELECT" 
    icon="list" 
    maximum="50"> 
    <fields name="course_date_fields" label=""> 
     <fieldset hidden="true" name="course_date_modal" repeat="true"> 
      <!-- Course Field. Type: Courses. (custom) --> 
      <field 
       type="courses" 
       name="course" 
       label="COM_LEARNINGMANAGER_EVENT_COURSE_LABEL" 
       class="list_class" 
       button="false" 
      /> 
      <!-- Date Field. Type: Text. (joomla) --> 
      <field 
       type="text" 
       name="date" 
       label="COM_LEARNINGMANAGER_EVENT_DATE_LABEL" 
       size="20" 
       maxlength="50" 
       description="COM_LEARNINGMANAGER_EVENT_DATE_DESCRIPTION" 
       class="text_area datepicker" 
       readonly="false" 
       disabled="false" 
       filter="STRING" 
       message="Error! Please add date here." 
       hint="COM_LEARNINGMANAGER_EVENT_DATE_HINT" 
      /> 
     </fieldset> 
    </fields> 
</field> 

以下是你需要添加到如default.php或edit.php文件中的腳本:

<script type="text/javascript"> 
// means your repteable field can only take 50 rows 
<?php $fieldNrs = range(1,50,1); ?> 
jQuery('input.form-field-repeatable').on('row-add', function (e) { 
<?php foreach($fieldNrs as $nr): ?> 
    jQuery('#jform_course_date_fields_date-<?php echo $nr ?>').datepicker(
     { 
      minDate: -1, 
      prevText: '', 
      nextText: '', 
      maxDate: '+3M', 
      firstDay: 1, 
      dateFormat: 'yy-mm-dd', 
      onSelect: function(dateText, inst) { 
      jQuery('#jform_course_date_fields_date-<?php echo $nr ?>').val(dateText); 
     } 
    }); 
<? endforeach; ?> 
}); 
</script> 

Enjoy!