常考地址：http://www.bootcss.c
直接上代码：
步骤：1.http://www.bootcss.com/p/bootstrap-datetimepicker/下载包
2.将里面的js,css脚本引入
就oK了
<!DOCTYPE html> <html> <head> <!--<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />--> <title></title> <!--<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">--> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> </head> <body> <div class="container"> <form action="" class="form-horizontal" role="form"> <fieldset> <legend>Test</legend> <div class="form-group"> <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label> <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1"> <input class="form-control" size="16" type="text" value="" readonly> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> </div> <input type="hidden" id="dtp_input1" value="" /><br /> </div> <div class="form-group"> <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label> <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"> <input class="form-control" size="16" type="text" id="datetimepicker" value="" readonly> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> <input type="hidden" id="dtp_input2" value="" /><br /> </div> <div class="form-group"> <label for="dtp_input3" class="col-md-2 control-label">Time Picking</label> <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii"> <input class="form-control" size="16" type="text" value="" readonly> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span> </div> <input type="hidden" id="dtp_input3" value="" /><br /> </div> </fieldset> </form> </div> <!--<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script> <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script> <script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>--> <script src="jquery/jquery-1.8.3.min.js" charset="UTF-8"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="js/bootstrap-datetimepicker.js" charset="UTF-8"></script> <!--<script src="js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>--> <script type="text/javascript" charset="utf-8"> (function ($) { $.fn.datetimepicker.dates['zh-CN'] = { days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"], daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"], daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"], months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], today: "今天", suffix: [], meridiem: ["上午", "下午"] }; }(jQuery)); $('.form_datetime').datetimepicker({ format: 'yyyy-mm-dd', language: 'zh-CN', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, showMeridian: 1, }); $('.form_date').datetimepicker({ format: 'yyyy-mm-dd', language: 'zh-CN', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0 }) .on('changeDate', function (ev) { alert("ces测试"); //if (ev.date.valueOf() < date-start-display.valueOf()){ // .... //} });; $('.form_time').datetimepicker({ language: 'zh-CN', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 1, minView: 0, maxView: 1, forceParse: 0 }); </script> </body> </html>
om/p/bootstrap-datetimepicker/