使用bootstrap-datetimepicker 实现动态添加节点日期时间范围

2018 年 2 月 27 日 0 条评论 3.75k 次阅读 0 人点赞

为了熟悉一下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="&lt;script&gt;" title="&lt;script&gt;" />
    <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="&lt;script&gt;" title="&lt;script&gt;" />
    <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="&lt;script&gt;" title="&lt;script&gt;" />
    <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="&lt;style&gt;" title="&lt;style&gt;" />

</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="" >&nbsp;到&nbsp;
                    <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> &nbsp;&nbsp;
             <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="&lt;script&gt;" title="&lt;script&gt;" />             
</body>
</html>

雷雷

这个人太懒什么东西都没留下

文章评论(0)

(Spamcheck Enabled)