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>

相关推荐