How to set time range for datebox

Question

I am trying to set a time range (e.g. from 9am to 3pm only). So far, I have only been able to set the default time.

$('#time').trigger('datebox', {"method":"set", "value":"06:00 PM"});

Answer 1

Sorry, it isn't supported. It looks like days and years are the only thing that support a min and max. This probably wouldn't be difficult to add to the code if you fork his repo.

You can view all options, documented and undocumented, by looking at the source on github https://github.com/jtsage/jquery-mobile-datebox/blob/master/js/jquery.mobile.datebox.js

options: {
    // All widget options, including some internal runtime details
    version: '1.0.1-2012022700', // jQMMajor.jQMMinor.DBoxMinor-YrMoDaySerial
    theme: false,
    defaultTheme: 'c',
    pickPageTheme: 'b',
    pickPageInputTheme: 'e',
    pickPageButtonTheme: 'a',
    pickPageHighButtonTheme: 'e',
    pickPageOHighButtonTheme: 'e',
    pickPageOAHighButtonTheme: 'e',
    pickPageODHighButtonTheme: 'e',
    pickPageTodayButtonTheme: 'e',
    pickPageSlideButtonTheme: 'd',
    pickPageFlipButtonTheme: 'b',
    forceInheritTheme: false,
    centerWindow: false,
    calHighToday: true,
    calHighPicked: true,
    transition: 'pop',
    noAnimation: false,
    disableManualInput: false,

    disabled: false,
    wheelExists: false,
    swipeEnabled: true,
    zindex: '500',
    debug: false,
    clickEvent: 'vclick',
    numberInputEnhance: true,
    internalInputType: 'text',
    resizeListener: true,

    titleDialogLabel: false,
    meridiemLetters: ['AM', 'PM'],
    timeOutputOverride: false,
    timeFormats: { '12': '%l:%M %p', '24': '%k:%M' },
    durationFormat: 'DD ddd, hh:ii:ss',
    timeOutput: false,
    rolloverMode: { 'm': true, 'd': true, 'h': true, 'i': true, 's': true },

    mode: 'datebox',
    calShowDays: true,
    calShowOnlyMonth: false,
    useDialogForceTrue: false,
    useDialogForceFalse: true,
    fullScreen: false,
    fullScreenAlways: false,
    useDialog: false,
    useModal: false,
    useInline: false,
    useInlineBlind: false,
    useClearButton: false,
    collapseButtons: false,
    noButtonFocusMode: false,
    focusMode: false,
    noButton: false,
    noSetButton: false,
    openCallback: false,
    openCallbackArgs: [],
    closeCallback: false,
    closeCallbackArgs: [],
    open: false,
    nestedBox: false,
    lastDuration: false,

    fieldsOrder: false,
    fieldsOrderOverride: false,
    durationOrder: ['d', 'h', 'i', 's'],
    defaultDateFormat: '%Y-%m-%d',
    dateFormat: false,
    timeFormatOverride: false,
    headerFormat: false,
    dateOutput: false,
    minuteStep: 1,
    calTodayButton: false,
    calWeekMode: false,
    calWeekModeFirstDay: 1,
    calWeekModeHighlight: true,
    calStartDay: false,
    defaultPickerValue: false,
    defaultDate : false,    //this is deprecated and will be removed in the future versions (ok, may be not)
    minYear: false,
    maxYear: false,
    afterToday: false,
    beforeToday: false,
    maxDays: false,
    minDays: false,
    highDays: false,
    highDates: false,
    highDatesAlt: false,
    blackDays: false,
    blackDates: false,
    enableDates: false,
    fixDateArrays: false,
    durationSteppers: {'d': 1, 'h': 1, 'i': 1, 's': 1},
    useLang: 'en',
    lang: {
        'en' : {
            setDateButtonLabel: 'Set Date',
            setTimeButtonLabel: 'Set Time',
            setDurationButtonLabel: 'Set Duration',
            calTodayButtonLabel: 'Jump to Today',
            titleDateDialogLabel: 'Set Date',
            titleTimeDialogLabel: 'Set Time',
            daysOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
            daysOfWeekShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
            monthsOfYear: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            monthsOfYearShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            durationLabel: ['Days', 'Hours', 'Minutes', 'Seconds'],
            durationDays: ['Day', 'Days'],
            timeFormat: 24,
            headerFormat: '%A, %B %-d, %Y',
            tooltip: 'Open Date Picker',
            nextMonth: 'Next Month',
            prevMonth: 'Previous Month',
            dateFieldOrder: ['m', 'd', 'y'],
            timeFieldOrder: ['h', 'i', 'a'],
            slideFieldOrder: ['y', 'm', 'd'],
            dateFormat: '%Y-%m-%d',
            useArabicIndic: false,
            isRTL: false,
            calStartDay: 0,
            clearButton: 'Clear'
        }
    }
}

Answer 2

Indeed, it is not supported in DateBox1 - it is however supported in DateBox2: http://dev.jtsage.com/jQM-DateBox2/demos/opt/limit.html (jquery 1.7.1+ is required for this version at this time) (and it is still pretty beta, but it's reasonably solid).