Handle showDuration when spanning midnight?

[realuser]

If I want to have a start time of 11pm and a finish time of 1am, is there already an established way to get showDuration to display the duration as 2 hours (instead of 22 hours as it currently shows)?

I can see how this could be application specific as to how to handle it. I don't need to handle periods longer than 24 hours. But for me if there could be an option to assume that whenever the displayed time in the select drop down is less than durationTime, then display the duration as assuming the span crosses midnight.

[jonthornton]

This should be possible- you can see an example on the demo page if you set the "Datepair Plugin Example" start time to 11pm. The key is setting minTime on your end time input.

[realuser]

Thanks does this functionality require jquery.datepair.js?

I tried setting the minTime option of the end time picker to a function value equaling the start time but that didn't seem to work.

[jonthornton]

If you post a jsfiddle that demonstrates the problem I can try to help you debug it. You don't need datepair.js for this, but it does take care of all of the logic needed to make this work.

[realuser]

Thanks, here's what I'm trying: https://jsfiddle.net/orvm7k03/2/

I'd like to be able to set the start time to 11pm and have the durations in the the end time drop down show times from 11pm. So it would show:

11:30pm (30 mins)
11:45pm (45 mins)
12:00am (1 hr)
12:15am (1 hr 15 mins)
etc. 

[jonthornton]

Ah ok, this issue is that minTime doesn't take a function. (It probably should; this is making me realize the option input types are needlessly inconsistent.)

Here's what worked for me

$(document).ready(function () {

    $('#startTime').timepicker({ 
        step: 15,
        scrollDefault: '10pm',
        timeFormat: 'g:ia'
    }).on('changeTime', function() {
        $('#endTime').timepicker('option', 'minTime', $('#startTime').val());
    });

  $('#endTime').timepicker(
  { 
        //durationTime: function () { return $('#startTime').val(); },
//        minTime: function () { return $('#startTime').val(); },
        step: 15,
        scrollDefault: '11pm',
        showDuration: true,
        timeFormat: 'g:ia'
    }
  );

[realuser]

Works perfectly!