Demo

Installation

bower install jquery-time-duration-picker

Usage

<input id="widget" type="text" readonly="readonly" placeholder="Click me!">

<!-- 3 hours, 25 minutes and 45 seconds -->

<!-- Number of seconds -->
<input id="seconds" type="hidden" name="seconds" value="12345">
<!-- ISO 8601 -->
<input id="duration" type="hidden" name="duration" value="PT3H25M45S">

...

<script>
  $(function() {
    $('#widget').timeDurationPicker({
      seconds: true,
      defaultValue: function() {
        return $('#duration').val();
      },
      onSelect: function(element, seconds, duration, text) {
        $('#seconds').val(seconds);
        $('#duration').val(duration);
        $('#widget').val(text);
      }
    });
  });
</script>

Also see this example.

Defaults

To set default options for all widgets use $.timeDurationPicker.defaults([options]) function. Call this function before widget initialization!

Options

Name Type Default Description
css object   CSS rules for main div
defaultValue
  • function
  • Number
  • String
   Initial value
  • String - ISO 8601
  • Number - number of seconds
lang String "en_US" Language identifier
onSelect function(element, seconds, duration, text)   Callback function
years Boolean true Display or not years
months Boolean true Display or not months
days Boolean true Display or not days
hours Boolean true Display or not hours
minutes Boolean true Display or not minutes
seconds Boolean false Display or not seconds

Languages

English is the default language. If you want to add any other language, follow this instructions:

  1. First, you need to add translation to your language;
  2. Second, you need to define plural rules of your language. See Language Plural Rules;

Here is example adding Russian translation:

// Add translation

$.timeDurationPicker.langs.ru_RU = {
  years: "Годы",
  months: "Месяцы",
  days: "Дни",
  hours: "Часы",
  minutes: "Минуты",
  seconds: "Секунды",
  and: "и",
  button_ok: "Выбрать",
  units: {
    year: {
      one: "год",
      few: "года",
      many: "лет"
    },
    month: {
      one: "месяц",
      few: "месяца",
      many: "месяцев"
    },
    day: {
      one: "день",
      few: "дня",
      many: "дней"
    },
    hour: {
      one: "час",
      few: "часа",
      many: "часов"
    },
    minute: {
      one: "минута",
      few: "минуты",
      many: "минут"
    },
    second: {
      one: "секунда",
      few: "секунды",
      many: "секунд"
    }
  }
}
// Define rules

$.timeDurationPicker.i18n.pluralRules.ru_RU = function( count ) {
  count = parseInt( count, 10 );
  var m10 = count % 10;
  var m100 = count % 100;

  if ( m10 === 1 && m100 !== 11 ) {
    return "one";
  } else if ( ( m10 >= 2 && m10 <= 4 ) && ( m100 < 12 || m100 > 14 ) ) {
    return "few";
  } else if ( m10 === 0 || ( m10 >= 5 && m10 <= 9 ) || ( m100 >= 11 && m100 <= 14 ) ) {
    return "many";
  } else {
    return "other";
  }
}

License

MIT