View on GitHub

Bootstrap-durationpicker

A simple durationpicker component for Twitter Bootstrap

Download this project as a .zip file Download this project as a tar.gz file

Installation

This project is registered as a Bower package.

        $ bower install bootstrap-durationpicker

Demos

Default durationpicker. Value = ()

  + View Source 
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <link type="text/css" href="css/bootstrap.min.css" />
            <link type="text/css" href="css/bootstrap-durationpicker.min.css" />
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-durationpicker.min.js"></script>
        </head>
        <body>
            <div class="input-append bootstrap-durationpicker">
                <input id="durationpicker1" type="text" class="input-small">
                <span class="add-on"><i class="icon-time"></i></span>
            </div>

            <script type="text/javascript">
                $('#durationpicker1').durationpicker();
            </script>
        </body>
    </html>

Inside a modal.

  + View Source 
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <link type="text/css" href="css/bootstrap.min.css" />
            <link type="text/css" href="css/bootstrap-durationpicker.min.css" />
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-durationpicker.min.js"></script>
        </head>
        <body>
            <div class="input-append bootstrap-durationpicker">
                <input id="durationpicker2" type="text" class="input-small">
                <span class="add-on">
                    <i class="icon-time"></i>
                </span>
            </div>

            <script type="text/javascript">
                $('#durationpicker2').durationpicker({
                    minuteStep: 1,
                    template: 'modal',
                    appendWidgetTo: 'body',
                    showSeconds: false,
                    defaultDuration: false
                });
            </script>
        </body>
    </html>

Without component markup, keyboard input disabled and floated right.

+ View Source   


    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <link type="text/css" href="css/bootstrap.min.css" />
            <link type="text/css" href="css/bootstrap-durationpicker.min.css" />
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-durationpicker.min.js"></script>
        </head>
        <body>
            <div class="bootstrap-durationpicker pull-right">
                <input id="durationpicker3" type="text" class="input-small">
            </div>

            <script type="text/javascript">
                $('#durationpicker3').durationpicker({
                    minuteStep: 5,
                    showInputs: false,
                    disableFocus: true
                });
            </script>
        </body>
    </html>

Inside a modal with backdrop enabled, inputs disabled and with a preset value.

    Open Modal + View Source 
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <link type="text/css" href="css/bootstrap.min.css" />
            <link type="text/css" href="css/bootstrap-durationpicker.min.css" />
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-durationpicker.min.js"></script>
        </head>
        <body>
            <div> class="modal hide fade"> 
              <div class="modal-header">
                <h1>Durationpicker inside a modal</h1> 
              </div>
              <div class="modal-body">
                <div class="bootstrap-durationpicker">
                    <input id="durationpicker4" type="text" value="10:35" class="input-small">
                    <i class="icon-time"></i>
                </div>
              </div>
            </div>

            <script type="text/javascript">
                $('#durationpicker4').durationpicker({
                    minuteStep: 1,
                    secondStep: 5,
                    showInputs: false,
                    template: 'modal',
                    modalBackdrop: true,
                    showSeconds: true,
                });
            </script>
        </body>
    </html>

Without a template.

  + View Source 
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <link type="text/css" href="css/bootstrap.min.css" />
            <link type="text/css" href="css/bootstrap-durationpicker.min.css" />
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-durationpicker.min.js"></script>
        </head>
        <body>
            <div class="bootstrap-durationpicker">
                <input id="durationpicker5" type="text" class="input-small">
                <i class="icon-time"></i>
            </div>

            <script type="text/javascript">
                $('#durationpicker5').durationpicker({
                    template: false,
                    showInputs: false,
                    minuteStep: 5
                });
            </script>
        </body>
    </html>

Configuration

template The picker widget template

Name Options / Defaults Description
template 'dropdown' (default)
'modal'
false 		Show picker in a dropdown
Show picker in a modal
Don't show a widget
customTemplateContent '<table>...</table>'
false 		Use your template
Use default template
minuteStep 15 Specify a step for the minute field.
showSeconds false Show the seconds field.
secondStep 15 Specify a step for the second field.
defaultDuration 'current' (default)
'11:45'
false 		Set to the current duration.
Set to a specific duration.
Do not set a default duration
showInputs true (default)
false 		Shows the text inputs in the widget.
Hide the text inputs in the widget
disableFocus false Disables the input from focusing. This is useful for touch screen devices that display a keyboard on input focus.
disableMousewheel false Disables the input from changing on mousewheel events
modalBackdrop false Show modal backdrop.

Data Attributes

Configuration options can also be set with the use of data attributes. 

      <div class="bootstrap-durationpicker"/><input id="durationpicker" data-template="modal" data-minute-step="1" data-modal-backdrop="true" type="text"/></div>

Methods

showWidget Show the picker widget

      var duration = $('#durationpicker').durationpicker('showWidget');

setDuration Set the curation manually

      $('#durationpicker').durationpicker('setDuration', '12:45');

Events

Show Triggered when dropdown/modal widget is shown

      $('#durationpicker').durationpicker().on('show.durationpicker', function(e) {
        console.log('The duration is ' + e.duration.value);
        console.log('The hour is ' + e.duration.hour);
        console.log('The minute is ' + e.duration.minute);
      });

Hide Triggered when widget is hidden

      $('#durationpicker').durationpicker().on('hide.durationpicker', function(e) {
        console.log('The duration is ' + e.duration.value);
        console.log('The hour is ' + e.duration.hour);
        console.log('The minute is ' + e.duration.minute);
      });

Update Triggered when the date is updated

      $('#durationpicker').durationpicker().on('changeDuration.durationpicker', function(e) {
        console.log('The duration is ' + e.duration.value);
        console.log('The hour is ' + e.duration.hour);
        console.log('The minute is ' + e.duration.minute);
      });