datetimepicker的用法

来源：互联网发布：淘宝卖家贷款多久到账编辑：程序博客网时间：2024/05/18 06:30

时间控件datetimepicker的用法：

1.准备以下所需文件.

bootstrap-combined.min.css

bootstrap-datetimepicker.min.css

jquery.min.js

bootstrap.min.js

bootstrap-datetimepicker.min.js

glyphicons-halflings.png

2.jsp页面代码

<!DOCTYPE HTML><html>  <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <link href="css/bootstrap-combined.min.css" rel="stylesheet">    <link rel="stylesheet" type="text/css" media="screen"  href="css/bootstrap-datetimepicker.min.css">  </head>  <body>    <div id="datetimepicker" class="input-append date">      <input type="text" name="time" id="time"></input>      <span class="add-on">        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>      </span>    </div>    <script type="text/javascript"  src="js/jquery.min.js"></script>     <script type="text/javascript"  src="js/bootstrap.min.js"></script>    <script type="text/javascript"  src="js/bootstrap-datetimepicker.min.js"  charset="utf-8"></script>    <script type="text/javascript">      $('#datetimepicker').datetimepicker({        /*format: 'MM/dd/yyyy hh:mm',时间和日期*//*format: 'yyyy-MM-dd hh:mm:ss',        language: 'en',        pickDate: true,        pickTime: true,        hourStep: 1,        minuteStep: 15,        secondStep: 30,        inputMask: true*//*显示日期和时间，带上午和下午*//*format: 'yyyy-MM-dd HH:mm:ss PP',        language: 'en',        pickDate: true,        pickTime: true,        hourStep: 1,        minuteStep: 15,        secondStep: 30,        inputMask: true,pick12HourFormat: true*//*只显示时间*//*format: 'hh:mm:ss',        language: 'en',        pickDate: false,        pickTime: true*//*只显示日期*//*format: 'yyyy-MM-dd',        language: 'en',        pickDate: true,        pickTime: false*//*中文格式*/format: 'yyyy-MM-dd hh:mm:ss',        language: 'ch',        pickDate: true,        pickTime: true,        hourStep: 1,        minuteStep: 15,        secondStep: 30,        inputMask: true      });    </script>  </body><html>

3.显示效果图，这里我只显示带时间日期的。

参考实例地址及下载地址:

http://download.csdn.net/detail/xiaofenglu/6876861

阅读全文

0 0