JS组件福利广播推荐12个易于使用的Bootstrap组件

我之前分享过很多常用的引导组件，包括表单、表单验证、文件上传、勾选下拉框、弹出框等等。在此期间，博主收集了一些有用的组件(其中一些已经在项目中使用)。过了两天，有些已经整理好了。本着“好事要与人分享”的原则，今天就给一些好处，分享博主收集的东西，供有需要的园林朋友参考。大部分组件都是开源组件，也有一部分是博主在网上找到的结果重写的，可能不尽如人意。如果你感兴趣，请看看。

首先，时间部分

有许多自举式的时间组件。您可以在github上搜索关键字“datepicker”，并找到许多时间组件。博主之前用过两个，发现会有一些大大小小的问题。经过一些筛选，我们发现了一个工作良好的时间组件，可以应用于各种场景。我们来看看它的风格。

1.效果显示

初始效应

组件中区域性和日期格式的自定义：仅显示日期

显示日期和时间(手机和平板设备可能体验更好)

2.源代码描述

一开始，我看到了下一个组件的效果，或者给出了源地址

3.代码示例

首先，引用所需的文件

link href=' ~/Content/Bootstrap/CSS/Bootstrap . CSS ' rel='样式表'/link href=' ~/Content/Bootstrap-datetimepicker-master/build/CSS/Bootstrap-datetimepicker . CSS ' rel='样式表'/脚本src=' http : ~/Content/jquery-1 . 9 . 1 . js '/脚本脚本src=' http : ~/Content/Bootstrap/js/Bootstrap . js '/脚本src=' :此外，还必须引用带有-locales.js的文件moment，当然也可以不使用这个cdn方法，将这个js文件下载到本地，然后添加一个本地引用。

(1)初始效应

label class=' control-label col-xs-3 ' date:/label div class=' input-group date ' id=' datetime picker 1 ' input type=' text ' class=' form-control '/span class=' input-group-addon ' span class=' glyphicon glyphicon-calendar '/span/span/div script type=' text/JavaScript ' $(function(){ $(' # datetime picker 1 ')。datetime picker()；});/script以便出现上图所示的效果。

(2)中国文化和日期格式

Html部分保持不变。初始化js时添加参数。

脚本类型=' text/JavaScript ' $(function(){ $(' # datetime picker 1 ')。datetime picker({ format : ' yyyy-mm-DD '，//日期格式，仅日期区域设置3360 ' zh-cn '/})中的区域性；});/script(3)显示时间

label class=' control-label col-xs-3 ' time:/label div class=' input-group date ' id=' datetime picker2 ' input type=' text ' class=' form-control '/span class=' input-group-addon ' span class=' glyphicon glyphicon-calendar '/span/span/div script type=' text/JavaScript ' $(function(){ $(' # da