datetimepicker的用法

xiaoxiao2021-02-28  95

时间控件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

转载请注明原文地址: https://www.6miu.com/read-72632.html

最新回复(0)