I always prefer manual methods if I can, then you're in full control of what is being loaded into your page.
I suggest comparing getTime()
's, like so:
var Now = new Date(),
T1 = {},
T2 = {};
T1.Start = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 8, 30); // 8:30am
T1.End = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 12, 30); // 12:30pm
T2.Start = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 13, 0); // 1:00pm
T2.End = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 17, 30); // 5:30pm
T1.Length = T1.End.getTime() - T1.Start.getTime()
T2.Length = T2.End.getTime() - T2.Start.getTime()
if (T1.Length > T2.Length) { // Longer than
} else if (T2.Start > T1.Start && T2.End < T1.End) { // Inbetween
} else if (T2.Start < T1.End || T2.End > T1.Start) { // Overlapping
}