by
KK » Fri Jan 05, 2018 1:33 am
I know my answer to this post is too late but the solution perhaps would be helpful to many so I am going ahead and posting it.
The obvious answer that comes to mind is the use of repeatable-regions (one row for each day). While we can use the type 'datetime' editable region (
http://www.couchcms.com/forum/viewtopic ... 667#p12667) to input the opening and closing time, a problem is that the datetime region insists upon displaying the 'date' part - i.e does not display only the 'time' part in isolation.
For our solution we require only the 'time' part so we'll use some CSS to hide the 'date' part.
This is what I defined within the <cms:template> block of my template -
- Code: Select all
<cms:repeatable name='schedule' label='Weekly Schedule' >
<cms:editable
type='dropdown'
name='my_day'
label='Day'
opt_values='Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | Sunday'
/>
<cms:editable
type='datetime'
name='my_opening_time'
label='Opening Time'
allow_time='1'
am_pm='1'
default_time='2018-01-01 00:00:01'
/>
<cms:editable
type='datetime'
name='my_closing_time'
label='Closing Time'
allow_time='1'
am_pm='1'
default_time='2018-01-01 00:00:01'
/>
</cms:repeatable>
<cms:config_form_view>
<cms:style>
#f_schedule .dt_month,
#f_schedule .dt_month + .dt_sep,
#f_schedule .dt_day,
#f_schedule .dt_day + .dt_sep,
#f_schedule .dt_year,
#f_schedule .dt_year + .dt_sep
{ display:none; }
</cms:style>
</cms:config_form_view>
Please note that the CSS rule is using #f_schedule as the ID where the 'name' of our region is 'schedule' - that is to say, it appends a 'f_' to the region's name. Keep this in mind if you are using a different name for the repeatable-region.
Ok, with that definition I can get the following in the admin-panel -
- Untitled-1.png (14.35 KiB) Viewed 4734 times
As can be seen, our datetime now shows only the time component which is perfect for our requirement.
On the frontend, we can use the <cms:date> tag with the proper 'format' (
http://docs.couchcms.com/tags-reference/date.html) to isolate the time part from the inputted date. For example as follows -
- Code: Select all
<table>
<tr>
<th>Day</th>
<th>Opening Time</th>
<th>Closing Time</th>
</tr>
<cms:show_repeatable 'schedule' >
<tr>
<td><cms:show my_day /></td>
<td><cms:date my_opening_time format='h:i A' /></td>
<td><cms:date my_closing_time format='h:i A' /></td>
</tr>
</cms:show_repeatable>
</table>
Output -
- Untitled-2.png (3.62 KiB) Viewed 4734 times
Hope this helps.
