Options guide of timedropper

This plugin is deprecated, get the new javascript version

On this page:

    Try the new timedropper configurator to easily get the best plugin configuration!
    Configure now

    How to set an option

    Set an option by using Javascript

    You can set an option during the initialization by customizing the related .timeDropper() function.

    $('.roundtrip-input').timeDropper({
      format: 'hh:mm'
    });

    Options and default values

    timedropper provides you with several options to customize your time pickers.

    Basic options

    Advanced options


    Basic options


    format

    Returns a string formatted according to the given format string

    FEATURES

    Typestring
    Defaulthh:mm

    PERMITTED VALUES

    ValueDescriptionResult
    H24-hour format non-padded number0-24
    h12-hour format non-padded number1-12
    HH24-hour format padded number00-24
    hh12-hour format padded number01-12
    mNon-padded numeric minutes1-59
    mmpadded numeric minutes01-59
    alower case meridianam-pm
    Aupper case meridianAM-PM

    EXAMPLE

    $('#myInput').timeDropper({
      format: 'h:m A'
    });

    meridians

    Set time in 12-hour clock in which the 24 hours of the day are divided into two periods.

    FEATURES

    Typeboolean
    Defaultfalse

    EXAMPLE

    $('#myInput').timeDropper({
      meridians: true
    });

    init_animation

    Animation style to use when init timedropper.

    FEATURES

    Typestring
    DefaultfadeIn
    ValuesfadeIn, dropDown

    EXAMPLE

    $('#myInput').timeDropper({
      init_animation: 'dropDown'
    });

    setCurrentTime

    Sets automatically current time by default value.
    If "false", the input value is considered as main time.

    FEATURES

    Typeboolean
    Defaulttrue

    EXAMPLE

    $('#myInput').timeDropper({
      setCurrentTime: false
    });

    Advanced options


    autoswitch

    Changes hour-minute or minute-hour on mouseup/touchend.

    FEATURES

    Typeboolean
    Defaultfalse

    EXAMPLE

    $('#myInput').timeDropper({
      autoswitch: true
    });

    mousewheel

    Enables time change using mousewheel.

    FEATURES

    Typestring
    Defaultfalse

    EXAMPLE

    $('#myInput').timeDropper({
      mousewheel: false
    });

    minutesSteps

    It specifies the granularity that the value must adhere to. The value must be one of these permitted options [5, 10, 15, 20, 25, 30] otherwise it will be considered false.

    FEATURES

    Typeinteger
    Defaultfalse
    Permitted values5, 10, 15, 20, 25, 30

    EXAMPLE

    $('#myInput').timeDropper({
      minutesSteps: 15
    });