mirror of
https://github.com/xdan/datetimepicker.git
synced 2024-11-18 06:24:22 +00:00
b551dad1e2
Fixed some bugs Added example runtime set options Code become cleaner
534 lines
15 KiB
Smarty
534 lines
15 KiB
Smarty
<div class="page-header">
|
|
<h1>DateTimePicker <small>jQuery plugin select date and time</small></h1>
|
|
</div>
|
|
<p>
|
|
Use this plugin to unobtrusively add a datetimepicker, datepicker or timepicker dropdown to your forms. It's easy to customize options. <a href="https://github.com/xdan/datetimepicker">Source code on GitHub</a> or <a href="https://github.com/xdan/datetimepicker/archive/master.zip">download (zip)</a>.
|
|
</p>
|
|
<h3>DateTimepicker</h3>
|
|
<input type="text" value="2014/03/15 05:06" id="datetimepicker"/><br/>
|
|
<h3>Use mask DateTimepicker</h3>
|
|
<input type="text" value="" id="datetimepicker_mask"/><br/>
|
|
<h3>TimePicker</h3>
|
|
<input type="text" id="datetimepicker1"/><br/>
|
|
<h3>DatePicker</h3>
|
|
<input type="text" id="datetimepicker2"/><br/>
|
|
<h3>Inline DateTimePicker</h3>
|
|
<input type="text" id="datetimepicker3"/><br/>
|
|
<script>
|
|
$(function(){
|
|
$('#datetimepicker_mask').datetimepicker({
|
|
mask:'9999/19/39 29:59',
|
|
});
|
|
$('#datetimepicker').datetimepicker();
|
|
$('#datetimepicker').datetimepicker({value:'2015/04/15 05:06'});
|
|
$('#datetimepicker1').datetimepicker({
|
|
datepicker:false,
|
|
format:'H:i',
|
|
value:'12:00'
|
|
});
|
|
$('#datetimepicker2').datetimepicker({
|
|
timepicker:false,
|
|
format:'d/m/Y'
|
|
});
|
|
$('#datetimepicker3').datetimepicker({
|
|
inline:true
|
|
});
|
|
});
|
|
</script>
|
|
</p>
|
|
<p>
|
|
<a class="btn btn-large btn-primary" href="https://github.com/xdan/datetimepicker/archive/master.zip">Download (zip)</a>
|
|
</p><?php echo $this->parse('adsense5')?>
|
|
<h2>How do I use it?</h2>
|
|
<p>
|
|
First include to page css and js files
|
|
<pre><code data-language="html"><!-- this should go after your </body> -->
|
|
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
|
|
<script src="jquery.js"></script>
|
|
<script src="jquery.datetimepicker.js"></script></code></pre>
|
|
</p>
|
|
<h2>Examples</h2>
|
|
|
|
<hr id="Simple"/>
|
|
<h4>Simple init DateTimePicker Example <a href="#Simple">#</a></h4>
|
|
<p>HTML</p>
|
|
<pre><code data-language="html"><input id="datetimepicker" type="text" ></code></pre>
|
|
<p><strong>javaScript</strong></p>
|
|
<pre><code data-language="javascript">$('#datetimepicker').datetimepicker();</code></pre>
|
|
<p><strong>Result</strong></p>
|
|
<p><input id="_datetimepicker" type="text" value="2014/03/15 05:06" /></p>
|
|
<script>
|
|
$(function(){$('#_datetimepicker').datetimepicker();});
|
|
</script>
|
|
|
|
<hr id="i18n"/>
|
|
<h4>i18n DatePicker Example <a href="#i18n">#</a></h4>
|
|
<p><strong>javaScript</strong></p>
|
|
<pre><code data-language="javascript">$('#datetimepicker1').datetimepicker({
|
|
lang:'de',
|
|
i18n:{
|
|
de:{
|
|
months:[
|
|
'Januar','Februar','März','April',
|
|
'Mai','Juni','Juli','August',
|
|
'September','Oktober','November','Dezember',
|
|
],
|
|
dayOfWeek:[
|
|
"So.", "Mo", "Di", "Mi",
|
|
"Do", "Fr", "Sa.",
|
|
]
|
|
}
|
|
},
|
|
timepicker:false,
|
|
format:'d.m.Y'
|
|
});</code></pre>
|
|
<p><strong>Result</strong></p>
|
|
<p><input id="_datetimepicker1" type="text" value="15.08.2013" /></p>
|
|
<script>$(function(){
|
|
$('#_datetimepicker1').datetimepicker({
|
|
lang:'de',
|
|
i18n:{de:{
|
|
months:[
|
|
'Januar','Februar','Marz','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'
|
|
],
|
|
dayOfWeek:["So.", "Mo", "Di", "Mi", "Do", "Fr", "Sa."]
|
|
}},
|
|
timepicker:false,
|
|
format:'d.m.Y'
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<hr id="TimePicker"/>
|
|
<h4>Only TimePicker Example <a href="#TimePicker">#</a></h4>
|
|
<p><strong>javaScript</strong></p>
|
|
<pre><code data-language="javascript">$('#datetimepicker2').datetimepicker({
|
|
datepicker:false,
|
|
format:'H:i'
|
|
});</code></pre>
|
|
<p><strong>Result</strong></p>
|
|
<p><input id="_datetimepicker2" type="text" value="23:16" /></p>
|
|
<script>$(function(){
|
|
$('#_datetimepicker2').datetimepicker({
|
|
datepicker:false,
|
|
format:'H:i'
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<hr id="Inline"/>
|
|
<h4>Inline DateTimePicker Example <a href="#Inline">#</a></h4>
|
|
<p><strong>javaScript</strong></p>
|
|
<pre><code data-language="javascript">$('#datetimepicker3').datetimepicker({
|
|
format:'d.m.Y H:i',
|
|
inline:true,
|
|
lang:'ru'
|
|
});</code></pre>
|
|
<p><strong>Result</strong></p>
|
|
<p><input id="_datetimepicker3" type="text" value="10.12.2013 23:45" /></p>
|
|
<script>$(function(){
|
|
$('#_datetimepicker3').datetimepicker({
|
|
format:'d.m.Y H:i',
|
|
inline:true,
|
|
lang:'en'
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<hr id="trigger"/>
|
|
<h4>Icon trigger <a href="#trigger">#</a></h4>
|
|
<p>Click the icon next to the input field to show the datetimepicker</p>
|
|
<p><strong>javaScript</strong></p>
|
|
<pre><code data-language="javascript">$('#datetimepicker4').datetimepicker({
|
|
format:'d.m.Y H:i',
|
|
lang:'ru'
|
|
});</code></pre>
|
|
and handler onclick event
|
|
<pre><code data-language="javascript">$('#image_button').click(function(){
|
|
$('#datetimepicker4').datetimepicker('show'); //support hide,show and destroy command
|
|
});</code></pre>
|
|
<p><strong>Result</strong></p>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="input-group">
|
|
<input id="_datetimepicker4" type="text" value="10.12.2013 23:45" class="form-control">
|
|
<span class="input-group-btn">
|
|
<button id="image_button" class="btn btn-default" type="button"><span class="glyphicon glyphicon-calendar"></span></button>
|
|
</span>
|
|
</div><!-- /input-group -->
|
|
</div><!-- /.col-lg-6 -->
|
|
</div><!-- /.row -->
|
|
<script>$(function(){
|
|
$('#_datetimepicker4').datetimepicker({
|
|
format:'d.m.Y H:i',
|
|
lang:'en'
|
|
});
|
|
$('#image_button').click(function(){
|
|
$('#_datetimepicker4').datetimepicker('show');
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<hr id="allowTimes"/>
|
|
<h4>allowTimes options TimePicker Example <a href="#allowTimes">#</a></h4>
|
|
<p><strong>javaScript</strong></p>
|
|
<pre><code data-language="javascript">$('#datetimepicker5').datetimepicker({
|
|
datepicker:false,
|
|
allowTimes:[
|
|
'12:00', '13:00', '15:00',
|
|
'17:00', '17:05', '17:20', '19:00', '20:00'
|
|
]
|
|
});</code></pre>
|
|
<p><strong>Result</strong></p>
|
|
<p><input id="_datetimepicker5" type="text" value="23:45" /></p>
|
|
<script>$(function(){
|
|
$('#_datetimepicker5').datetimepicker({
|
|
datepicker:false,
|
|
allowTimes:['12:00','13:00','15:00','17:00','17:05','17:20','19:00','20:00']
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<hr id="onChangeDateTime"/>
|
|
<h4>handler onChangeDateTime Example <a href="#onChangeDateTime">#</a></h4>
|
|
<p><strong>javaScript</strong></p>
|
|
<pre><code data-language="javascript">$('#datetimepicker6').datetimepicker({
|
|
timepicker:false,
|
|
onChangeDateTime:function(dp,$input){
|
|
alert($input.val())
|
|
}
|
|
});</code></pre>
|
|
<p><strong>Result</strong></p>
|
|
<p><input id="_datetimepicker6" type="text" value="" /></p>
|
|
<script>$(function(){
|
|
$('#_datetimepicker6').datetimepicker({
|
|
timepicker:false,
|
|
onChangeDateTime:function(current_time,$input){
|
|
alert($input.val())
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<hr id="mindate"/>
|
|
<h4>minDate and maxDate Example <a href="#mindate">#</a></h4>
|
|
<p><strong>javaScript</strong></p>
|
|
<pre><code data-language="javascript">$('#datetimepicker7').datetimepicker({
|
|
timepicker:false,
|
|
formatDate:'Y/m/d',
|
|
minDate:'-1970/01/02',//yesterday is minimum date(for today use 0 or -1970/01/01)
|
|
maxDate:'+1970/01/02'//tommorow is maximum date calendar
|
|
});</code></pre>
|
|
<p><strong>Result</strong></p>
|
|
<p><input id="_datetimepicker7" type="text" value="" /></p>
|
|
<script>$(function(){
|
|
$('#_datetimepicker7').datetimepicker({
|
|
timepicker:false,
|
|
formatDate:'Y/m/d',
|
|
minDate:'-1970/01/02', // yesterday is minimum date
|
|
maxDate:'+1970/01/02' // and tommorow is maximum date calendar
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<hr id="mask"/>
|
|
<h4>Use mask input Example <a href="#mask">#</a></h4>
|
|
<p><strong>javaScript</strong></p>
|
|
<pre><code data-language="javascript">$('#datetimepicker_mask').datetimepicker({
|
|
timepicker:false,
|
|
mask:true, // '9999/19/39 29:59' - digit is the maximum possible for a cell
|
|
});</code></pre>
|
|
<p><strong>Result</strong></p>
|
|
<p><input id="_datetimepicker_mask" type="text" value="" /></p>
|
|
<script>$(function(){
|
|
$('#_datetimepicker_mask').datetimepicker({
|
|
timepicker:false,
|
|
mask:'9999/19/39',
|
|
format:'Y/m/d'
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<hr id="runtime_options"/>
|
|
<h4>Set options runtime DateTimePicker <a href="#runtime_options">#</a></h4>
|
|
<p>If select day is Saturday, the minimum set 11:00, otherwise 8:00</p>
|
|
<p><strong>javaScript</strong></p>
|
|
<pre><code data-language="javascript">var logic = function( currentDateTime ){
|
|
// 'this' is jquery object datetimepicker
|
|
if( currentDateTime.getDay()==6 ){
|
|
this.setOptions({
|
|
minTime:'11:00'
|
|
});
|
|
}else
|
|
this.setOptions({
|
|
minTime:'8:00'
|
|
});
|
|
};
|
|
$('#datetimepicker_rantime').datetimepicker({
|
|
onChangeDateTime:logic,
|
|
onShow:logic
|
|
});</code></pre>
|
|
<p><strong>Result</strong></p>
|
|
<p><input id="_datetimepicker_runtime" type="text" value="" /></p>
|
|
<script>$(function(){
|
|
var logic = function( currentDateTime ){
|
|
if( currentDateTime.getDay()==6 ){
|
|
this.setOptions({
|
|
minTime:'11:00'
|
|
});
|
|
}else
|
|
this.setOptions({
|
|
minTime:'8:00'
|
|
});
|
|
};
|
|
$('#_datetimepicker_runtime').datetimepicker({
|
|
onChangeDateTime:logic,
|
|
onShow:logic
|
|
});
|
|
});
|
|
</script>
|
|
<h2>Full options list</h2>
|
|
<table class="table table-condensed table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="text-align: center;"><strong>Name</strong></th>
|
|
<th style="text-align: center;"><strong> default</strong></th>
|
|
<th style="text-align: center;"><strong>Descr</strong></th>
|
|
<th style="width:200px;text-align: center;"><strong>Ex.</strong></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>value</td>
|
|
<td>null</td>
|
|
<td>Current value datetimepicker. If it is set, ignored input.value</td>
|
|
<td>
|
|
<pre><code data-language="javascript">{value:'12.03.2013',
|
|
format:'d.m.Y'}</code></pre>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>lang</td>
|
|
<td>en</td>
|
|
<td>Language i18n (en,ru,de,nl)</td>
|
|
<td>
|
|
<pre><code data-language="javascript">{lang:'ru'}</code></pre>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>format</td>
|
|
<td>Y/m/d H:i</td>
|
|
<td>Format datetime. <a href="http://php.net/manual/ru/function.date.php" target="_blank">More</a> </td>
|
|
<td>
|
|
<pre><code data-language="javascript">{format:'H'}
|
|
{format:'Y'}</code></pre>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>formatDate</td>
|
|
<td>Y/m/d</td>
|
|
<td>Format date for minDate and maxDate</td>
|
|
<td><pre><code data-language="javascript">{formatDate:'d.m.Y'}</code></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>formatTime</td>
|
|
<td>H:i</td>
|
|
<td> Similarly, formatDate . But for minTime and maxTime</td>
|
|
<td><pre><code data-language="javascript">{formatTime:'H'}</code></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>step</td>
|
|
<td>60</td>
|
|
<td>Step time</td>
|
|
<td>
|
|
<pre><code data-language="javascript">{step:5}</code></pre>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>closeOnDateSelect</td>
|
|
<td>0</td>
|
|
<td>
|
|
|
|
</td>
|
|
<td><pre><code data-language="javascript">{closeOnDateSelect:true}</code></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>closeOnWithoutClick</td>
|
|
<td>true</td>
|
|
<td></td>
|
|
<td><pre><code data-language="javascript">{ closeOnWithoutClick :false}</code></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>validateOnBlur</td>
|
|
<td>true</td>
|
|
<td>Verify datetime value from input, when losing focus. If value is not valid datetime, then to value inserts the current datetime</td>
|
|
<td><pre><code data-language="javascript">{ validateOnBlur:false}</code></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>timepicker</td>
|
|
<td>true</td>
|
|
<td></td>
|
|
<td><pre><code data-language="javascript">{timepicker:false}</code></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>datepicker</td>
|
|
<td>true</td>
|
|
<td></td>
|
|
<td><pre><code data-language="javascript">{datepicker:false}</code></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>minDate</td>
|
|
<td>false</td>
|
|
<td></td>
|
|
<td><pre><code data-language="javascript">{minDate:0} // today
|
|
{minDate:'2013/12/03'}
|
|
{minDate:'-1970/01/02'} // yesterday
|
|
{minDate:'05.12.2013',formatDate:'d.m.Y'}</code></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>maxDate</td>
|
|
<td>false</td>
|
|
<td></td>
|
|
<td><pre><code data-language="javascript">{maxDate:0,}
|
|
{maxDate:'2013/12/03'}
|
|
{maxDate:'+1970/01/02'} // tommorrow
|
|
{maxDate:'05.12.2013',formatDate:'d.m.Y'}</code></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>minTime</td>
|
|
<td>false</td>
|
|
<td></td>
|
|
<td><pre><code data-language="javascript">{minTime:0,}// now
|
|
{minTime:'12:00'}
|
|
{minTime:'13:45:34',formatTime:'H:i:s'}</code></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>maxTime</td>
|
|
<td>false</td>
|
|
<td></td>
|
|
<td><pre><code data-language="javascript">{maxTime:0,}
|
|
{maxTime:'12:00'}
|
|
{maxTime:'13:45:34',formatTime:'H:i:s'}</code></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>allowTimes</td>
|
|
<td>[]</td>
|
|
<td></td>
|
|
<td><pre><code data-language="javascript">{allowTimes:[
|
|
'09:00',
|
|
'11:00',
|
|
'12:00',
|
|
'21:00'
|
|
]}</code></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>mask</td>
|
|
<td>false</td>
|
|
<td>Use mask for input. true - automatically generates a mask on the field 'format', Digit from 0 to 9, set the highest possible digit for the value. For example: the first digit of hours can not be greater than 2, and the first digit of the minutes can not be greater than 5</td>
|
|
<td><pre>{mask:'9999/19/39',format:'Y/m/d'}
|
|
{mask:true,format:'Y/m/d'} // automatically generate a mask 9999/99/99
|
|
{mask:'29:59',format:'H:i'} //
|
|
{mask:true,format:'H:i'} //automatically generate a mask 99:99</pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>opened</td>
|
|
<td>false</td>
|
|
<td></td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>inline</td>
|
|
<td>false</td>
|
|
<td></td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>timepickerScrollbar</td>
|
|
<td>true</td>
|
|
<td></td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>onSelectDate</td>
|
|
<td>function(){}</td>
|
|
<td></td>
|
|
<td><pre><code data-language="javascript">onSelectDate:function(current_time,$input){
|
|
alert(current.dateFormat('d/m/Y'))
|
|
}</code></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>onSelectTime</td>
|
|
<td>function(){}</td>
|
|
<td></td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>onChangeMonth</td>
|
|
<td>function(){}</td>
|
|
<td></td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>onChangeDateTime</td>
|
|
<td>function(){}</td>
|
|
<td></td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>onShow</td>
|
|
<td>function(){}</td>
|
|
<td></td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>onClose</td>
|
|
<td>function(){}</td>
|
|
<td></td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>withoutCopyright</td>
|
|
<td>true</td>
|
|
<td></td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>inverseButton</td>
|
|
<td>false</td>
|
|
<td></td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>hours12</td>
|
|
<td>false</td>
|
|
<td></td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>yearStart</td>
|
|
<td>1950</td>
|
|
<td>Start value for fast Year selector</td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>yearEnd</td>
|
|
<td>2050</td>
|
|
<td>End value for fast Year selector</td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>dayOfWeekStart</td>
|
|
<td>0</td>
|
|
<td>
|
|
<p>Star week DatePicker. Default Sunday - 0.</p>
|
|
|
|
<p>Monday - 1 ...</p>
|
|
</td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr><td>className</td><td></td><td></td><td></td></tr>
|
|
<tr><td>id</td><td></td><td></td><td></td></tr>
|
|
<tr><td>style</td><td></td><td></td><td></td></tr>
|
|
</tbody>
|
|
</table> |