We use custom forms with date fields quite a bit. The time format is not that friendly for hours, as not everyone in the US is used to 24 hour time format. So, I wrote a quick jQuery function that makes the display much nicer for the user, while still letting Matrix do its thing.
See it in action (used for the flight times fields): http://www.puc.edu/puc-life/transportation-registration
// Converts select menu for hour format in a Custom Form
function convertMatrixTime(obj) {
// Run through the select
var time_am = 1;
var time_pm = 1;
var item_num = 0;
obj.children('option').each(function() {
var text = $(this).text();
var val = parseInt($(this).val());
if (item_num === 1) {
$(this).text('12 am');
}//end if
if (item_num === 13) {
$(this).text('12 pm');
}//end if
if (text !== '') {
// Rewrite
if (item_num < 13 && item_num !== 1) {
$(this).text(time_am+' am');
// Increment
time_am++;
}//end if
if (item_num >= 13 && item_num !== 13) {
$(this).text(time_pm+' pm');
// Increment
time_pm++;
}//end if
}//end if
// Increment
item_num++;
// Reset our vars
if (item_num >= 25) {
time_am = 1;
time_pm = 1;
item_num = 0;
}
});//end each
}//convertTimeBecause Matrix names those select fields strangely, you have to craft the selectors like:
var matrix_hour_format = $("#q60737\\:q10value\\[h\\], #q60737\\:q12value\\[h\\]");
convertMatrixTime(matrix_hour_format);