<html>
<head>
<title></title>
<link rel="stylesheet" media="all" type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<style type='text/css'>
body{ font: 11px Arial, Helvetica, sans-serif; }
/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
</head>
<body>
<input type="text" name="example1" id="example1" value="" >
<script type='text/javascript'>
$('#example1').datetimepicker({
showSecond: true,
dateFormat: 'yy-mm-dd',
timeFormat: 'hh:mm:ss',
numberOfMonths: 3
});
</script>
</body>
</html>
<head>
<title></title>
<link rel="stylesheet" media="all" type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<style type='text/css'>
body{ font: 11px Arial, Helvetica, sans-serif; }
/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
</head>
<body>
<input type="text" name="example1" id="example1" value="" >
<script type='text/javascript'>
$('#example1').datetimepicker({
showSecond: true,
dateFormat: 'yy-mm-dd',
timeFormat: 'hh:mm:ss',
numberOfMonths: 3
});
</script>
</body>
</html>
If you want to use a date picker only, just use:
$('#example1').datepicker({ ...
If you want to use a time picker only, just do:
$('#example1').timepicker({ ...
Thanks to Trent Richardson
No comments:
Post a Comment