Settnig duration values in jtsage datebox in mode durationflipbox

Question

I'm having difficulty setting a time (duration) value in a datebox. A simple demonstration of the problem is if I do something like:

function initDuration() {
  this.d['header Text'] = "Set";
  this.d['headerText'] = "Set Duration";
  var element = 'input#'+this.element[0].id;
  var currentDt = $(element).datebox('getTheDate');
  // ***************
  var dt = $(element).datebox('parseDate', '%H:%M', this.element[0].value); // Where this.element[0].value = "01:00:00"
  // ***************
  $(element).datebox('setTheDate', this.element[0].value);
  $(element).trigger('datebox', { 'method': 'doset' });
}

dt just contains the current date/time; i.e. jtsage didn't like it. The element is defined (in jade) as:

input.Duration(type="text" name="duration" form="form#{i}" 
    id="duration#{i}" value="#{map[i].duration}" data-role="datebox"
    data-options=
    '{"mode":"durationflipbox", "overrideDurationOrder":["h","i"],'
    +' "overrideTimeFormat": "%l:%M", "minuteStep":15, "beforeOpenCallback": "initDuration"}')

Also I'm not sure how to change the flipbox title. The 2nd line in initDuration() sets the text for the button but the title still says 'Set Time'.

Because of the first problem the last 2 lines in initDuration() don't do what I want. i.e. they just use the current time, whatever that happens to be.

Answer 1

My apologies that this is going to be an incomplete answer, but it was going to be too long for a comment.

For the title - give "overrideHeaderText" a shot instead. It is entirely possible that I screwed this up at some point, it's not a feature I use in any of my own projects.

Next...

var dt = $(element).datebox('parseDate', '%H:%M', this.element[0].value); // Where this.element[0].value = "01:00:00"

I think I am reading you correctly that "dt" isn't containing what you are expecting. It's because 01:00:00 != %H:%M - to read this "format", you'd need to either use "%H:%M:%S" or "%H:%M:00" (the later ignoring the seconds field).

That said, I think what you are trying to do is set a duration, which, is a little different. There are a few ways to do it - and I'm noticing that there isn't a lot of support to do it functionally. The simplest method, is the set the value of the input, and let datebox handle the math - just be aware that the format you drop into the input must be exactly the same as the output format - it will read it when the control opens (or is initialized if the control is being shown inline - if you are doing it inline, and set the value "later", you can use the 'refresh' method to update it).

For what it's worth, if you really, really, really want to use the setTheDate method, duration modes work by comparing "theDate" (the publicly available date, i.e. setTheDate, getTheDate) with an internal initDate - which is not exposed to the API, but can be found here:

$(element).data('jtsage-datebox').initDate 

So, in pseudo-code, for a duration of an hour

myNewDate = $(element).data( 'jtsage-datebox' ).initDate;
myNewDate.setHour( myNewDate.getHour() + 1 );
$(element).datebox( 'setTheDate', myNewDate );