Jump to content
Daniel Schmitz

Time hh:mm in custom field?

Recommended Posts

We don't have a time custom field. What you could do is create a text custom field and manually change the data type for the field's column in the #__jreviews_content table to TIME. Then come up with a REGEX to only allow time-formatted values if your site allows user generated content for this field.

Share this post


Link to post

Hi,

 

did create a field with regex ^(?:2[0-3]|[0-1]?[0-9])?:?[0-5]?[0-9]$

Works so far. But I found that in fact time is stored in date fields as well in a way that could confuse users:

 

- If a listing has a date field and a user sets it the first time, it shows a calendar and dat is set without time

- date goes to DB field with time set to 00-00-00 and when user will edit the field next time, he will see date and time in this field (pls check screenshot). Thus, users mght be confused since in fact there is time in date field and there is another custom field for typing time. 

...would be great if the "core" date field would have the option to set time as well...

 

Regards,

Daniel

post-19706-0-14409900-1495170660_thumb.jpg

Share this post


Link to post

The timestamp does not appear when a user first selects a date, so there's no point of confusion there at all. It only shows up when editing at which point the user probably already selected a time in your other field. Removing the empty timestamp is a 30-second fix that we'll do for the next update. Refactoring the code to also include a time in the date picker is, on the other hand, a big effort that also involves changing the date picker jQuery plugin and for the time being it's not going to happen.

Share this post


Link to post
On 5/19/2017 at 12:50 PM, Alejandro said:

Refactoring the code to also include a time in the date picker is, on the other hand, a big effort that also involves changing the date picker jQuery plugin and for the time being it's not going to happen.

are there any news that the date function will be soon extendet so that we can choose easily add the time too with the date custom field? I'm trying to create an event-based listing type but without a information about the starting and end time it is more or less useless (https://demo.jreviews.com/events/sport-events your demosite for the sportevents demostrates this perfect, a event without times does not feel the actual purpose).
i know i could set up a separate field for the time, but this is odd because i want also i good user experiences so that the users can with few clicks as possible setup a event, especially on mobile devices.

an example of an linked start date/time and end date/time snippet:
https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers

Edited by n00bster
working sample

Share this post


Link to post

I used a text custom field as above with max 5 characters, regex ([01]?[0-9]|2[0-3]):[0-5][0-9] and a placeholder description hh:mm to create a 'time' field.

I then used the 'jrListingFieldsLoaded' javascript event to append the 'time' field input box to the date field, and hid the 'time' field label.

You could modify this code further to add your chosen timepicker plugin/widget to the time field. I decided not to do this as I a) couldn't find an easy to use jQuery plugin that I liked that worked equally well on desktop and mobile and b) didnt' feel the small extra benefit provided to the end user justified writing and maintaining this extra code (which may clash with future jreviews updates).

Finally I hid the time field on detail and list views, and used PHP Based Formatting on the date field to show the date and time together. Alternatively you could just add the time field to the Output Format of the date field but I wanted a more complex output based on which of the start date/time, end date/time field pairs were completed, if they were on the same day/month/year etc.

<script>
(function($) {
	$(document).ready(function(){
		$('div.jr-page').on('jrListingFieldsLoaded',function() {
			 var dtfields = {
				'.jrStarttime':'.jr_startdate',
				'.jrEndtime':'.jr_enddate'
			};

			for (var key in dtfields) {
				$(key).hide();
				$(dtfields[key]).parent().append($(key + " input")); 
			}	
		});
	});
})(jQuery);
</script>

datetime.jpg.cd0dbcc3e77a1a78e6c95a60b6468e4f.jpg

 

Share this post


Link to post

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Please refer to our Privacy Policy.