2013-11-26 09:58:34 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
2013-11-27 19:28:25 +00:00
|
|
|
<link rel="stylesheet" type="text/css" href="./jquery.datetimepicker.css"/>
|
2013-11-26 09:58:34 +00:00
|
|
|
</head>
|
2013-11-03 10:35:38 +00:00
|
|
|
<body>
|
2013-11-07 04:24:58 +00:00
|
|
|
<h3>DateTimePicker</h3>
|
|
|
|
|
<input type="text" value="2014/03/15 05:06" id="datetimepicker"/><br><br>
|
|
|
|
|
<h3>TimePicker</h3>
|
|
|
|
|
<input type="text" id="datetimepicker1"/><br><br>
|
|
|
|
|
<h3>DatePicker</h3>
|
|
|
|
|
<input type="text" id="datetimepicker2"/><br><br>
|
|
|
|
|
<h3>Inline DateTimePicker</h3>
|
|
|
|
|
<input type="text" id="datetimepicker3"/><br><br>
|
|
|
|
|
<h3>Button Trigger</h3>
|
|
|
|
|
<input type="text" id="datetimepicker4"/><input id="open" type="button" value="open"/><input id="close" type="button" value="close"/>
|
2013-11-15 06:47:44 +00:00
|
|
|
<h3>TimePicker allows time</h3>
|
|
|
|
|
<input type="text" id="datetimepicker5"/><br><br>
|
2013-11-19 09:20:05 +00:00
|
|
|
<h3>Destroy DateTimePicker</h3>
|
|
|
|
|
<input type="text" id="datetimepicker6"/><input id="destroy" type="button" value="destroy"/>
|
2013-11-03 10:35:38 +00:00
|
|
|
</body>
|
2013-11-27 19:28:25 +00:00
|
|
|
<script src="./jquery.js"></script>
|
|
|
|
|
<script src="./jquery.datetimepicker.js"></script>
|
2013-11-03 10:35:38 +00:00
|
|
|
<script>
|
|
|
|
|
$('#datetimepicker').datetimepicker();
|
|
|
|
|
$('#datetimepicker').datetimepicker({value:'2015/04/15 05:06'});
|
|
|
|
|
$('#datetimepicker1').datetimepicker({
|
|
|
|
|
datepicker:false,
|
|
|
|
|
format:'H:i',
|
2013-11-27 19:28:25 +00:00
|
|
|
step:5
|
2013-11-03 10:35:38 +00:00
|
|
|
});
|
|
|
|
|
$('#datetimepicker2').datetimepicker({
|
|
|
|
|
timepicker:false,
|
|
|
|
|
format:'d/m/Y',
|
2013-11-26 07:28:31 +00:00
|
|
|
formatDate:'Y/m/d',
|
|
|
|
|
minDate:'-1970/01/02', // yesterday is minimum date
|
2013-11-27 19:28:25 +00:00
|
|
|
maxDate:'+1970/01/02' // and tommorow is maximum date calendar
|
2013-11-03 10:35:38 +00:00
|
|
|
});
|
|
|
|
|
$('#datetimepicker3').datetimepicker({
|
2013-11-27 19:28:25 +00:00
|
|
|
inline:true
|
2013-11-03 10:35:38 +00:00
|
|
|
});
|
2013-11-07 04:24:58 +00:00
|
|
|
$('#datetimepicker4').datetimepicker();
|
|
|
|
|
$('#open').click(function(){
|
|
|
|
|
$('#datetimepicker4').datetimepicker('show');
|
|
|
|
|
});
|
|
|
|
|
$('#close').click(function(){
|
|
|
|
|
$('#datetimepicker4').datetimepicker('hide');
|
|
|
|
|
});
|
2013-11-15 06:47:44 +00:00
|
|
|
$('#datetimepicker5').datetimepicker({
|
|
|
|
|
datepicker:false,
|
2013-11-27 19:28:25 +00:00
|
|
|
allowTimes:['12:00','13:00','15:00','17:00','17:05','17:20','19:00','20:00']
|
2013-11-15 06:47:44 +00:00
|
|
|
});
|
2013-11-19 09:20:05 +00:00
|
|
|
$('#datetimepicker6').datetimepicker();
|
|
|
|
|
$('#destroy').click(function(){
|
|
|
|
|
if( $('#datetimepicker6').data('xdsoft_datetimepicker') ){
|
|
|
|
|
$('#datetimepicker6').datetimepicker('destroy');
|
|
|
|
|
this.value = 'create';
|
|
|
|
|
}else{
|
|
|
|
|
$('#datetimepicker6').datetimepicker();
|
|
|
|
|
this.value = 'destroy';
|
|
|
|
|
}
|
|
|
|
|
});
|
2013-11-03 10:35:38 +00:00
|
|
|
</script>
|
|
|
|
|
</html>
|
