| Server IP : 49.231.201.246 / Your IP : 216.73.216.149 Web Server : Apache/2.4.18 (Ubuntu) System : Linux 246 4.4.0-210-generic #242-Ubuntu SMP Fri Apr 16 09:57:56 UTC 2021 x86_64 User : root ( 0) PHP Version : 7.0.33-0ubuntu0.16.04.16 Disable Function : exec,passthru,shell_exec,system,proc_open,popen,pcntl_exec MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /proc/11585/cwd/html/ppaobm/backend/web/assets/ee6b836/src/docs/ |
Upload File : |
<!-- ############################################################################# -->
<!-- Examples
<!-- ############################################################################# -->
<div id="tp-examples">
<h2>Examples</h2>
<ul>
<li><a href="#basic_examples" title="Basic Initializations">Basic Initializations</a></li>
<li><a href="#timezone_examples" title="Using Timezones">Using Timezones</a></li>
<li><a href="#slider_examples" title="Slider Modifications">Slider Modifications</a></li>
<li><a href="#alt_examples" title="Alternate Field">Alternate Fields</a></li>
<li><a href="#input_examples" title="Time Input">Time Input</a></li>
<li><a href="#rest_examples" title="Time Restraints">Time Restraints</a></li>
<li><a href="#range_examples" title="Time Ranges">Time Ranges</a></li>
<li><a href="#utility_examples" title="Utilities">Utilities</a></li>
</ul>
<h3 id="basic_examples">Basic Initializations</h3>
<!-- ============= example -->
<div class="example-container">
<p>Add a simple datetimepicker to jQuery UI's datepicker</p>
<div>
<input type="text" name="basic_example_1" id="basic_example_1" value="" />
</div>
<pre>
$('#basic_example_1').datetimepicker();
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Add only a timepicker:</p>
<div>
<input type="text" name="basic_example_2" id="basic_example_2" value="" />
</div>
<pre>
$('#basic_example_2').timepicker();
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Format the time:</p>
<div>
<input type="text" name="basic_example_3" id="basic_example_3" value="" />
</div>
<pre>
$('#basic_example_3').datetimepicker({
timeFormat: "hh:mm tt"
});
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Timepicker comes with a collection of localization files and one combined file with all available localizations. $.timepicker.regional["your localization code here"] is a simple object with preset options:</p>
<div>
<input type="text" name="basic_example_4" id="basic_example_4" value="" />
</div>
<pre>
$('#basic_example_4').timepicker(
$.timepicker.regional['es']
);
</pre>
</div>
<h3 id="timezone_examples">Using Timezones</h3>
<!-- ============= example -->
<div class="example-container">
<p>Simplest timezone usage:</p>
<div>
<input type="text" name="timezone_example_1" id="timezone_example_1" value="" />
</div>
<pre>
$('#timezone_example_1').datetimepicker({
timeFormat: 'hh:mm tt z'
});
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Define your own timezone options:</p>
<div>
<input type="text" name="timezone_example_2" id="timezone_example_2" value="" />
</div>
<pre>
$('#timezone_example_2').datetimepicker({
timeFormat: 'HH:mm z',
timezoneList: [
{ value: -300, label: 'Eastern'},
{ value: -360, label: 'Central' },
{ value: -420, label: 'Mountain' },
{ value: -480, label: 'Pacific' }
]
});
</pre>
</div>
<h3 id="slider_examples">Slider Modifications</h3>
<!-- ============= example -->
<div class="example-container">
<p>Add a grid to each slider:</p>
<div>
<input type="text" name="slider_example_1" id="slider_example_1" value="" />
</div>
<pre>
$('#slider_example_1').timepicker({
hourGrid: 4,
minuteGrid: 10,
timeFormat: 'hh:mm tt'
});
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Set the interval step of sliders:</p>
<div>
<input type="text" name="slider_example_2" id="slider_example_2" value="" />
</div>
<pre>
$('#slider_example_2').datetimepicker({
timeFormat: 'HH:mm:ss',
stepHour: 2,
stepMinute: 10,
stepSecond: 10
});
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Add sliderAccess plugin for touch devices:</p>
<div>
<input type="text" name="slider_example_3" id="slider_example_3" value="" />
</div>
<pre>
$('#slider_example_3').datetimepicker({
addSliderAccess: true,
sliderAccessArgs: { touchonly: false }
});</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Use dropdowns instead of sliders. By default if slider is not available dropdowns will be used.</p>
<div>
<input type="text" name="slider_example_4" id="slider_example_4" value="" />
</div>
<pre>
$('#slider_example_4').datetimepicker({
controlType: 'select',
timeFormat: 'hh:mm tt'
});</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Uses one line dropdowns instead of sliders.</p>
<div>
<input type="text" name="slider_example_4andHalf" id="slider_example_4andHalf" value="" />
</div>
<pre>
$('#slider_example_4andHalf').datetimepicker({
controlType: 'select',
oneLine: true,
timeFormat: 'hh:mm tt'
});</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Create your own control by implementing the create, options, and value methods. If you want to use your new control for all instances use the $.timepicker.setDefaults({controlType:myControl}). Here we implement jQueryUI's spinner control (jQueryUI 1.9+).</p>
<div>
<input type="text" name="slider_example_5" id="slider_example_5" value="" />
</div>
<pre>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
});</pre>
</div>
<h3 id="alt_examples">Alternate Fields</h3>
<!-- ============= example -->
<div class="example-container">
<p>Alt field in the simplest form:</p>
<div>
<input type="text" name="alt_example_1" id="alt_example_1" value="09/15/2012" />
<input type="text" name="alt_example_1_alt" id="alt_example_1_alt" value="10:15" />
</div>
<pre>
$('#alt_example_1').datetimepicker({
altField: "#alt_example_1_alt"
});
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>With datetime in both:</p>
<div>
<input type="text" name="alt_example_2" id="alt_example_2" value="" />
<input type="text" name="alt_example_2_alt" id="alt_example_2_alt" value="" />
</div>
<pre>
$('#alt_example_2').datetimepicker({
altField: "#alt_example_2_alt",
altFieldTimeOnly: false
});
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Format the altField differently:</p>
<div>
<input type="text" name="alt_example_3" id="alt_example_3" value="" />
<input type="text" name="alt_example_3_alt" id="alt_example_3_alt" value="" />
</div>
<pre>
$('#alt_example_3').datetimepicker({
altField: "#alt_example_3_alt",
altFieldTimeOnly: false,
altFormat: "yy-mm-dd",
altTimeFormat: "h:m t",
altSeparator: " @ "
});
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>With inline mode using altField:</p>
<div>
<input type="text" name="alt_example_4_alt" id="alt_example_4_alt" value="" />
<span id="alt_example_4" ></span>
</div>
<pre>
$('#alt_example_4').datetimepicker({
altField: "#alt_example_4_alt",
altFieldTimeOnly: false
});
</pre>
</div>
<h3 id="input_examples">Time Input</h3>
<!-- ============= example -->
<div class="example-container">
<p>Allows time displayed inside the picker to allow being typed in.</p>
<div>
<input type="text" name="input_example_1" id="input_example_1" value="08/20/2014 01:22 pm" />
</div>
<pre>
$('#input_example_1').datetimepicker({
timeInput: true,
timeFormat: "hh:mm tt"
});
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Don't show any sliders, only the time input.</p>
<div>
<input type="text" name="input_example_1" id="input_example_2" value="08/20/2014 01:22 pm" />
</div>
<pre>
$('#input_example_2').datetimepicker({
timeInput: true,
timeFormat: "hh:mm tt",
showHour: false,
showMinute: false
});
</pre>
</div>
<h3 id="rest_examples">Time Restraints</h3>
<!-- ============= example -->
<div class="example-container">
<p>Set the min/max hour of every date:</p>
<div>
<input type="text" name="rest_example_1" id="rest_example_1" value="" />
</div>
<pre>
$('#rest_example_1').timepicker({
hourMin: 8,
hourMax: 16
});
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Set the min/max date numerically:</p>
<div>
<input type="text" name="rest_example_2" id="rest_example_2" value="" />
</div>
<pre>
$('#rest_example_2').datetimepicker({
numberOfMonths: 2,
minDate: 0,
maxDate: 30
});
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Set the min/max date and time with a Date object:</p>
<div>
<input type="text" name="rest_example_3" id="rest_example_3" value="" />
</div>
<pre>
$('#rest_example_3').datetimepicker({
minDate: new Date(2010, 11, 20, 8, 30),
maxDate: new Date(2010, 11, 31, 17, 30)
});
</pre>
</div>
<h3 id="range_examples">Time Ranges</h3>
<!-- ============= example -->
<div class="example-container">
<p>Restrict a start and end date by using onSelect and onClose events for more control over functionality:</p>
<p>For more examples and advanced usage grab the <a href="http://trentrichardson.com/ebooks/handling-time/" title="Handling Time eBook">Handling Time eBook</a>.</p>
<div>
<input type="text" name="range_example_1_start" id="range_example_1_start" value="08/20/2014 09:22 -0400" />
<input type="text" name="range_example_1_end" id="range_example_1_end" value="08/21/2014 08:00 -0400" />
</div>
<pre>
var startDateTextBox = $('#range_example_1_start');
var endDateTextBox = $('#range_example_1_end');
startDateTextBox.datetimepicker({
timeFormat: 'HH:mm z',
onClose: function(dateText, inst) {
if (endDateTextBox.val() != '') {
var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (testStartDate > testEndDate)
endDateTextBox.datetimepicker('setDate', testStartDate);
}
else {
endDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
}
});
endDateTextBox.datetimepicker({
timeFormat: 'HH:mm z',
onClose: function(dateText, inst) {
if (startDateTextBox.val() != '') {
var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (testStartDate > testEndDate)
startDateTextBox.datetimepicker('setDate', testEndDate);
}
else {
startDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
}
});
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Timepicker also includes some shortcut methods for ranges:</p>
<div>
<input type="text" name="range_example_2_start" id="range_example_2_start" value="" />
<input type="text" name="range_example_2_end" id="range_example_2_end" value="" />
</div>
<pre>
var startDateTextBox = $('#range_example_2_start');
var endDateTextBox = $('#range_example_2_end');
$.timepicker.datetimeRange(
startDateTextBox,
endDateTextBox,
{
minInterval: (1000*60*60), // 1hr
dateFormat: 'dd M yy',
timeFormat: 'HH:mm',
start: {}, // start picker options
end: {} // end picker options
}
);
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>To use only times for a time range use $.timepicker.timeRange():</p>
<div>
<input type="text" name="range_example_3_start" id="range_example_3_start" value="09:16" />
<input type="text" name="range_example_3_end" id="range_example_3_end" value="10:16" />
</div>
<pre>
var startTimeTextBox = $('#range_example_3_start');
var endTimeTextBox = $('#range_example_3_end');
$.timepicker.timeRange(
startTimeTextBox,
endTimeTextBox,
{
minInterval: (1000*60*60), // 1hr
timeFormat: 'HH:mm',
start: {}, // start picker options
end: {} // end picker options
}
);
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Even though this plugin focuses on datetime, it also provides a dateRange function:</p>
<div>
<input type="text" name="range_example_4_start" id="range_example_4_start" value="" />
<input type="text" name="range_example_4_end" id="range_example_4_end" value="" />
</div>
<pre>
var startDateTextBox = $('#range_example_4_start');
var endDateTextBox = $('#range_example_4_end');
$.timepicker.dateRange(
startDateTextBox,
endDateTextBox,
{
minInterval: (1000*60*60*24*4), // 4 days
maxInterval: (1000*60*60*24*8), // 8 days
start: {}, // start picker options
end: {} // end picker options
}
);
</pre>
</div>
<h3 id="utility_examples">Utilities</h3>
<!-- ============= example -->
<div class="example-container">
<p>Get and Set Datetime with the getDate and setDate methods. This example uses timezone to demonstrate the timepicker regonizes the timezones and computes the offsets when getting and setting.</p>
<div>
<input type="text" name="utility_example_1" id="utility_example_1" value="" />
<button id="utility_example_1_setdt" value="1">Set Datetime</button>
<button id="utility_example_1_getdt" value="1">Get Datetime</button>
</div>
<pre>
var ex13 = $('#utility_example_1');
ex13.datetimepicker({
timeFormat: 'hh:mm tt z',
separator: ' @ ',
showTimezone: true
});
$('#utility_example_1_setdt').click(function(){
ex13.datetimepicker('setDate', (new Date()) );
});
$('#utility_example_1_getdt').click(function(){
alert(ex13.datetimepicker('getDate'));
});
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Use the utility function to format your own time. $.datepicker.formatTime(format, time, options)</p>
<dl class="defs">
<dt>format</dt><dd>required - string represenation of the time format to use</dd>
<dt>time</dt><dd>required - hash: { hour, minute, second, millisecond, timezone }</dd>
<dt>options</dt><dd>optional - hash of any options in regional translation (ampm, amNames, pmNames..)</dd>
</dl>
<p>Returns a time string in the specified format.</p>
<div>
<div id="utility_example_2"></div>
</div>
<pre>
$('#utility_example_2').text(
$.datepicker.formatTime('HH:mm z', { hour: 14, minute: 36, timezone: '+2000' }, {})
);
</pre>
</div>
<!-- ============= example -->
<div class="example-container">
<p>Use the utility function to parses a formatted time. $.datepicker.parseTime(format, timeString, options)</p>
<dl class="defs">
<dt>format</dt><dd>required - string represenation of the time format to use</dd>
<dt>time</dt><dd>required - time string matching the format given in parameter 1</dd>
<dt>options</dt><dd>optional - hash of any options in regional translation (ampm, amNames, pmNames..)</dd>
</dl>
<p>Returns an object with hours, minutes, seconds, milliseconds, timezone.</p>
<div>
<div id="utility_example_3"></div>
</div>
<pre>
$('#utility_example_3').text(JSON.stringify(
$.datepicker.parseTime('HH:mm:ss:l z', "14:36:21:765 +2000", {})
));
</pre>
</div>