Is it possible to add just a time as a custom data field for an event?

Question

We want to show multiple dates for the event, each with its own start and stop time.

Day 1
  Start Time #1
  Stop Time #1

Day 2
  Start Time #2
  Stop Time #2

But in custom data (Administer > Customize Data and Screens > Custom Fields), it doesn't seem to be possible to add a field that is just a time without a date.

I realize we could create two fields, each of which contains both a date and a time:

Day 1 Start
Day 1 End
Day 2 Start
Day 2 End

But we'd have to enter each date twice, extra work and introducing an opportunity for errors in entering the redundant information. For each day of the event, we want to enter three items: the date, a start time and a stop time.

Answer 1

You could create custom text fields, then add these 3 lines of javascript somewhere to your site where it will get loaded on every CiviCRM page:

CRM.$(document).on('crmLoad', function(e) {
  CRM.$('input[data-crm-custom="Event_Time:Start_Time"], input[data-crm-custom="Event_Time:Start_Time"]', e.target).timeEntry();
});

This assumes you've named the custom group "Event Time" and the fields "Start Time" and "End Time". Adjust the code as needed to match the actual names of your fields (while creating/editing an event, right-click on a field and "Inspect" it - in your console look for the data-crm-custom attribute).

The .timeEntry() widget will store the data in human readable format (e.g. 12:53PM). If you prefer it to be stored in a searchable format (so you can sort your events by time, etc) use .crmDatepicker({date: false}) instead of .timeEntry().

Also be careful you don't load this snippet on every page of your website as it will cause an error on non-civi pages due to the lack of CRM variable. hook_civicrm_coreResourceList is a good choice for achieving this.