为了熟悉一下bootstrap-datetimepicker插件，动手再实践了一下bootstrap-datetimepicker。用它写了一个简单的日期选择器，可以选择一个日期中的时间范围。同时可以动态添加和删除日期控件。并且控制每个日期的结束的小时时间必须要晚于开始的小时时间，同时给表单生成好了name名称，以在提交的时候可以以一个数组提交。
需要加载多个JS和jquery,bootstrap,统一打了一个包，请点击下载源代码包：bootstrap-datetimepicker实现动态添加日期时间范围源码实例。
效果截图如下：
主要的页面源代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>DateTime test page</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22jquery_17min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22javascript%22%20src%3D%22bootstrap-datetimepicker.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22bootstrap-datetimepicker.zh-CN.js%22%20charset%3D%22UTF-8%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap-datetimepicker.min.css" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%20%20%20%20.timetext%20input%7Btext-align%3Acenter%3Bcolor%3Ablue%3B%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<form method="post" action="">
<div class="container timetext">
<div class="row clearfix">
<hr>
<div class="col-md-12 column">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4>
日期时间选择器测试：bootstrap-datetimepicker
</h4>
时间选择器：bootstrap-datetimepicker 测试
</div>
</div>
</div>
<div class="row clearfix" id="first_text">
<div class="col-md-12 column" style="margin-top:15px;">
<form role="form">
<div class="input-append">
<span class="col-xs-3">请选择：</span><input size="16" type="text" name="tdata[date_1]" class="form_datetime" value="" > 到
<input type="text" size="8" id="mirror_field" value="" class="form_time" name="tdata[time_1]" />
</div>
</form>
</div>
</div>
<div class="row clearfix" id="addtext"></div>
<hr>
<div class="row clearfix">
<div class="col-md-4 column">
<button type="button" class="btn active btn-xs btn-primary " id="add_date">增加日期</button>
<button type="submit" class="btn active btn-xs btn-success active" >提交表单</button>
</div>
</div>
</div>
</form>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20var%20initText%20%3D%20%24(%22%23first_text%22).html().replace('%E8%AF%B7%E9%80%89%E6%8B%A9%EF%BC%9A'%2C'%3Cbutton%20type%3D%22button%22%20class%3D%22btn%20active%20btn-xs%20btn-warning%20active%20del_line%22%3E%E5%88%A0%E9%99%A4%E6%AD%A4%E8%A1%8C%3C%2Fbutton%3E')%3B%0A%20%20%20%20var%20i%20%3D2%3B%0A%20%20%20%20%24(%22%23add_date%22).click(function()%7B%0A%20%20%20%20%20%20%20%20var%20re%3Dnew%20RegExp(%22_1%22%2C%20%22g%22)%3B%0A%20%20%20%20%20%20%20%20%24(%22%23addtext%22).append(%20initText.replace(re%2C%20'_'%2Bi))%3B%0A%20%20%20%20%20%20%20%20i%2B%2B%3B%0A%20%20%20%20%20%20%20%20%24.initDataPlugin()%3B%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%24.initDataPlugin%20%3D%20function()%7B%0A%20%20%20%20%20%20%20%20%24(%22.form_datetime%22).datetimepicker(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20format%3A%20%22hh%3Aii%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20language%3A'zh-CN'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20autoclose%3Atrue%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20todayBtn%3Afalse%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20showMeridian%3Afalse%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20minuteStep%3A15%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20startView%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20minView%3A%200%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20maxView%3A%201%2C%0A%20%20%20%20%20%20%20%20%7D).on(%22hide%22%2Cfunction(ev)%7B%0A%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%24(%22.form_time%22).datetimepicker(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20format%3A%20%22hh%3Aii%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20language%3A'zh-CN'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20autoclose%3Atrue%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20todayBtn%3Afalse%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20showMeridian%3Afalse%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20minuteStep%3A15%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20startView%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20minView%3A%200%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20maxView%3A%201%2C%0A%20%20%20%20%20%20%20%20%7D).on('hide'%2C%20function(ev)%7B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20endt%20%3D%20%24(this).val().replace('%3A'%2C'')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20stat%20%3D%20%24(this).prev(%22input%22).val().replace('%3A'%2C'')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20if(endt!%3D''%20%26%26%20stat%20%3E%3D%20endt)%7Balert('%E7%BB%93%E6%9D%9F%E6%97%B6%E9%97%B4%E5%BF%85%E9%A1%BB%E8%A6%81%E6%99%9A%E4%BA%8E%E8%B5%B7%E5%A7%8B%E6%97%B6%E9%97%B4!')%3B%24(this).val('')%3Breturn%20false%3B%7D%0A%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%24(%22.del_line%22).click(function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(this).parent().parent().remove()%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%3B%0A%20%20%20%20%24.initDataPlugin()%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
© 著作权归作者所有
雷雷
这个人太懒什么东西都没留下
文章评论（0）