jquery datepicker
asdjkl 2013-01-17
在设置好jQuery UI Datepicker以后需要添加的内容如下：
一、下载Timepicker Addon文件包含到页面中
说明：
//设置是否显示时分秒
Show Seconds, Minutes, or Hours
showHour Show the hour, default=true
showMinute Show the minute, default=true
showSecond Show the second, default=false
//设置时分秒步长
stepHour hour steps, default=1
stepMinute minute steps, default=1
stepSecond second steps, default=1
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link type="text/css" href="css/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui-timepicker-addon.css" rel="stylesheet" />
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script src="js/jquery-1.8.2.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script src="ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
<link rel="stylesheet" href="css/demos.css">
<style>
</style>
<script>
$(function() {
//$("#datepicker").datetimepicker('option', $.datepicker.regional['zh-CN']);
$( "#datepicker" ).datetimepicker(
{
//showOn: "button",
// buttonImage: "./css/images/icon_calendar.gif",
// buttonImageOnly: true,
// showSecond: true,
// timeFormat: 'hh:mm:ss',
// stepHour: 1,
// stepMinute: 5,
// stepSecond: 10
numberOfMonths: 1,//设置弹出多少个月列表
showSecond: true, //显示秒
timeFormat: 'hh:mm:ss',//格式化时间
stepHour: 2,//设置步长
stepMinute: 10,
stepSecond: 10
}
);
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" class="ui_timepicker"></p>
<div class="demo-description">
<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div>
</body>
</html>
相关推荐
.ui-datepicker{width:17em;padding:.2em.2em0;display:none;font-size:大小}可惜我试了不起作用。我试着用js加载后改，发现成功了！！！！