زمان‌بردار جلالی

انتخاب زمان و تاریخ

$('#basic_example_1').datetimepicker();

انتخاب زمان

$('#basic_example_2').timepicker();

انتخاب زمان و تاریخ در قالب مشخص

$('#basic_example_3').datetimepicker({
    timeFormat: "hh:mm tt"
});

بومی‌سازی

$('#basic_example_4').timepicker(
    $.timepicker.regional['tr']
);

استفاده از منطقه زمانی

$('#timezone_example_1').datetimepicker({
    timeFormat: 'hh:mm tt z'
});

تعریف منطقه زمانی دلخواه

$('#timezone_example_2').datetimepicker({
    timeFormat: 'HH:mm z',
    timezoneList: [ 
            { value: -300, label: 'شرقی'}, 
            { value: -360, label: 'مرکزی' }, 
            { value: -420, label: 'کوهستانی' }, 
            { value: -480, label: 'جنوبی' } 
        ]
});

تغییرات بر لغزنده

$('#slider_example_1').timepicker({
    hourGrid: 4,
    minuteGrid: 10,
    timeFormat: 'hh:mm tt'
});

تعیین طول گام برای مقادیر

$('#slider_example_2').datetimepicker({
    timeFormat: 'HH:mm:ss',
    stepHour: 2,
    stepMinute: 10,
    stepSecond: 10
});

منوی انتخابی در زمان

در انتخاب زمان، به جای استفاده از لغزنده، از منوی انتخابی استفاده نمائید. همچنین در صورتی که لغزنده در دسترس نباشد، به جای لغزنده از منوی انتخابی استفاده خواهد شد.

$('#slider_example_4').datetimepicker({
    controlType: 'select',
    timeFormat: 'hh:mm tt'
});

استفاده از منوی انتخابی در یک خط

$('#slider_example_4andHalf').datetimepicker({
    controlType: 'select',
    oneLine: true,
    timeFormat: 'hh:mm tt'
});

شخصی‌سازی زمان‌بردار

شما می‌توانید ابزارهای کنترلی موردنیاز خود را مطابق با سلیقه‌ی خودتان و دیگر ابزارهای موجود، شخصی‌سازی کنید. پس از پیاده‌سازی شخصی‌سازی‌های دلخواه خود، از $.timepicker.setDefaults({controlType:yourPleasuredCustomazation}) برای اعمال تغییرات استفاده کنید.

var myControl=  {
    create: function(tp_inst, obj, unit, val, min, max, step){
        $('<input class="ui-timepicker-input" value="'+val+'" style="width:50%">')
            .appendTo(obj)
            .spinner({
                min: min,
                max: max,
                step: step,
                change: function(e,ui){ // key events
                        // don't call if api was used and not key press
                        if(e.originalEvent !== undefined)
                            tp_inst._onTimeChange();
                        tp_inst._onSelectHandler();
                    },
                spin: function(e,ui){ // spin events
                        tp_inst.control.value(tp_inst, obj, unit, ui.value);
                        tp_inst._onTimeChange();
                        tp_inst._onSelectHandler();
                    }
            });
        return obj;
    },
    options: function(tp_inst, obj, unit, opts, val){
        if(typeof(opts) == 'string' && val !== undefined)
            return obj.find('.ui-timepicker-input').spinner(opts, val);
        return obj.find('.ui-timepicker-input').spinner(opts);
    },
    value: function(tp_inst, obj, unit, val){
        if(val !== undefined)
            return obj.find('.ui-timepicker-input').spinner('value', val);
        return obj.find('.ui-timepicker-input').spinner('value');
    }
};

$('#slider_example_5').datetimepicker({
    controlType: myControl
});

نمایش تاریخ محدودشده بین کمینه/بیشینه

$('#rest_example_2').datetimepicker({
    numberOfMonths: 2,
    minDate: 0,
    maxDate: 30
});

جداسازی زمان و تاریخ

$('#alt_example_1').datetimepicker({
    altField: "#alt_example_1_alt"
});

نمایش زمان به صورت‌های متفاوت

$('#alt_example_3').datetimepicker({
    altField: "#alt_example_3_alt",
    altFieldTimeOnly: false,
    altFormat: "yy-mm-dd",
    altTimeFormat: "h:m t",
    altSeparator: " @ "
});

نمایش به صورت درون‌خطی

$('#alt_example_4').datetimepicker({
    altField: "#alt_example_4_alt",
    altFieldTimeOnly: false
});

مثال‌های بیشتر…

برای دیدن کاربردها و نمونه‌های بیشتری از این افزونه، به صفحه‌ی مثال‌های افزونه اصلی، واقع در اینجا مراجعه نمائید.