Skip to content

Commit 08daf38

Browse files
author
ShiHao
committed
添加bootstrap-datetimepicker插件
1 parent b12e3f1 commit 08daf38

File tree

5 files changed

+108
-7
lines changed

5 files changed

+108
-7
lines changed

‎bootstrap.csproj

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
</ItemGroup>
6060
<ItemGroup>
6161
<Content Include="css\bootstrap.datepicker\bootstrap-datepicker3.min.css" />
62+
<Content Include="css\bootstrap.datetimepicker\bootstrap-datetimepicker.min.css" />
6263
<Content Include="css\bootstrap.metisMenu\demo.css" />
6364
<Content Include="css\bootstrap.metisMenu\metisMenu.min.css" />
6465
<Content Include="css\bootstrap.switch\bootstrap-switch.min.css" />
@@ -148,6 +149,7 @@
148149
<Content Include="js\bootstrap.datepicker\locales\bootstrap-datepicker.zh-TW.min.js" />
149150
<Content Include="js\bootstrap.DateRangePicker\daterangepicker.js" />
150151
<Content Include="js\bootstrap.DateRangePicker\moment-with-locales.min.js" />
152+
<Content Include="js\bootstrap.datetimepicker\bootstrap-datetimepicker.min.js" />
151153
<Content Include="js\bootstrap.metisMenu\metisMenu.min.js" />
152154
<Content Include="js\bootstrap.sweetalert\sweet-alert.min.js" />
153155
<Content Include="js\bootstrap.switch\bootstrap-switch.min.js" />

‎css/bootstrap.datetimepicker/bootstrap-datetimepicker.min.css

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,11 @@ <h1>这是一套简单的基于bootstrap的简易框架</h1>
166166
</li>
167167
<li class="list-group-item">
168168
<span class="badge">插件库&nbsp;2016.4.22</span>
169-
<a href="plugs.html?#plug-datapicker">加入bootstrap-datapicker日期选择插件库</a>
169+
<a href="plugs.html?#plug-datepicker">加入bootstrap-datepicker日期选择插件库</a>
170+
</li>
171+
<li class="list-group-item">
172+
<span class="badge">插件库&nbsp;2016.4.28</span>
173+
<a href="plugs.html?#plug-datetimepicker">加入bootstrap-datetimepicker日期时间选择插件库</a>
170174
</li>
171175
</ul>
172176
</div>

‎js/bootstrap.datetimepicker/bootstrap-datetimepicker.min.js

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugs.html

Lines changed: 87 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
</ul>
8484
<!--我是主要内容 start-->
8585
<div class="col-sm-12">
86-
<!--时间范围选择插件data-picker start-->
86+
<!--日期选择插件data-picker start-->
8787
<div class="row" id="plug-datepicker">
8888
<div class="page-header text-center">
8989
<h2>bootstrap日期选择插件</h2>
@@ -173,18 +173,18 @@ <h2>bootstrap日期选择插件</h2>
173173
</div>
174174
</div>
175175
</div>
176-
<!--时间范围选择插件data-picker end-->
177-
<!--时间范围选择插件DateRangePicker start-->
176+
<!--日期选择插件data-picker end-->
177+
<!--日期及时间范围选择插件DateRangePicker start-->
178178
<div class="row" id="plug-DateRangePicker">
179179
<div class="page-header text-center">
180-
<h2>bootstrap时间范围选择插件</h2>
180+
<h2>bootstrap日期及时间范围选择插件</h2>
181181
</div>
182182
<div class="col-sm-6">
183183
<div class="form-group">
184184
<label for="inputEmail3" class="col-sm-2 control-label">插件名</label>
185185
<div class="col-sm-10">
186186
<p class="form-control-static">
187-
Bootstrap Date Range Picker
187+
Bootstrap Date Range Picker
188188
</p>
189189
</div>
190190
</div>
@@ -248,7 +248,88 @@ <h2>bootstrap时间范围选择插件</h2>
248248
</div>
249249
</div>
250250
</div>
251-
<!--时间范围选择插件DateRangePicker end-->
251+
<!--日期及时间范围范围选择插件DateRangePicker end-->
252+
<!--日期时间选择插件datetimepicker start-->
253+
<div class="row" id="plug-datetimepicker">
254+
<div class="page-header text-center">
255+
<h2>bootstrap日期时间选择插件</h2>
256+
</div>
257+
<div class="col-sm-6">
258+
<div class="form-group">
259+
<label for="inputEmail3" class="col-sm-2 control-label">插件名</label>
260+
<div class="col-sm-10">
261+
<p class="form-control-static">
262+
Bootstrap 3 Datepicker
263+
</p>
264+
</div>
265+
</div>
266+
</div>
267+
<div class="col-sm-6">
268+
<div class="form-group">
269+
<label for="inputEmail3" class="col-sm-2 control-label">官网</label>
270+
<div class="col-sm-10">
271+
<a href="http://eonasdan.github.io/bootstrap-datetimepicker/" class="btn btn-info" target="_blank">http://eonasdan.github.io/bootstrap-datetimepicker/</a>
272+
</div>
273+
</div>
274+
</div>
275+
<div class="col-sm-12">
276+
<div class="form-group">
277+
<label for="inputEmail3" class="col-sm-1 control-label">特殊说明</label>
278+
<div class="col-sm-11">
279+
<p class="form-control-static">
280+
该插件依赖bootstrap库<br />
281+
部分涉及时间格式的功能依赖moment.js<br />
282+
多说一句：moment-with-locales.min.js支持中文了，详细信息参考官网
283+
</p>
284+
</div>
285+
</div>
286+
</div>
287+
<div class="clearfix"></div>
288+
<link href="css/bootstrap.datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" />
289+
<script src="js/bootstrap.datetimepicker/bootstrap-datetimepicker.min.js"></script>
290+
<style>
291+
/*这里为了解决上面插件定义的样式污染的问题*/
292+
#plug-datetimepicker .datepicker { margin-top: auto; }
293+
</style>
294+
<script type="text/javascript">
295+
$(function () {
296+
$('#datetimepicker1').datetimepicker();
297+
//这里的函数用到了moment.js，因为前面插件已经引用进去了，所以不再引用。
298+
//否则是需要引用moment.js的。
299+
$('#datetimepicker3').datetimepicker({
300+
format: 'LT'
301+
});
302+
});
303+
</script>
304+
<div class="col-sm-12">
305+
<div class="form-group">
306+
<label for="inputEmail3" class="col-sm-1 control-label">使用效果</label>
307+
<div class="col-sm-10">
308+
<div class="col-sm-6">
309+
<div class="form-group">
310+
<div class='input-group date' id='datetimepicker1'>
311+
<input type='text' class="form-control" />
312+
<span class="input-group-addon">
313+
<span class="glyphicon glyphicon-calendar"></span>
314+
</span>
315+
</div>
316+
</div>
317+
</div>
318+
<div class="col-sm-6">
319+
<div class="form-group">
320+
<div class='input-group date' id='datetimepicker3'>
321+
<input type='text' class="form-control" />
322+
<span class="input-group-addon">
323+
<span class="glyphicon glyphicon-time"></span>
324+
</span>
325+
</div>
326+
</div>
327+
</div>
328+
</div>
329+
</div>
330+
</div>
331+
</div>
332+
<!--日期时间选择插件datetimepicker end-->
252333
<!--通知插件toastr start-->
253334
<div class="row" id="plug-toastr">
254335
<div class="page-header text-center">

0 commit comments

Comments
 (0)