您的位置：首页 > Web前端 > BootStrap

bootstrap日期控件的使用

2017-07-04 10:38 369 查看

bootstrap日期控件构建非常丰富，可根据调用dateTimepicker()方法的参数设置可选语言，可选日期时间范围，起始时间，结束时间，视图显示格式等等。那么具体怎么用呢？

下面我来介绍下：

1、首先引入所需要的依赖，直接上代码：

<head>
<meta charset="UTF-8">
<title>Bootstrap.dataTimepicker</title>
<link rel="stylesheet" href="../res/bootstrap.min.css">
<link rel="stylesheet" href="../res/bootstrap-datetimepicker.min.css">
<script src="../res/jquery-3.2.1.js"></script>
<script src="../res/bootstrap.js"></script>
<script src="../res/bootstrap-datetimepicker.js"></script>
<script src="../res/bootstrap-datetimepicker.zh-CN.js"></script>
</head>

当然了，要引入相应的依赖，还得去下载所依赖bootstrap的文件，下载这里就不介绍了。bootstrap-datetimepicker.zh-CN.js 这个文件是为了要显示中文，默认是英文的，你也可以选择其它国家的语言。在这个文件夹下的文件是各个国家的语文包，bootstrap实现了国际化。

2.HTML代码，HTML代码可根据需要，有多种选择，可使用带有重置按钮（用于清空输入框）的组件模版式：

<body>
<div class="input-append date" id="datetimepicker">
<input class="span2" size="16" type="text" value="12-02-2012">
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>                                                                           <body>

或者只要个input输入框也行，这样更简洁

<body>
<input id="date">
</body>

接下来就是启用控件了，直接调用API接口：

<script>
$("#date").datetimepicker();
</script>

就是这样，这样就可以在网页中点击 input 弹出选择面板了.同时这个方法还可以设置许多参数，就是用来控制显示语言，日期时间范围等等的。

<script>
$("#date").datetimepicker({
format: "yyyy-mm-dd",
autoclose: true,
todayBtn: true,
todayHighlight: true,
showMeridian: true,
pickerPosition: "bottom-left",
language: 'zh-CN',//中文，需要引用zh-CN.js包
startView: 2,//月视图
minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
});
</script>

比如设置语言,就是language这个参数，值默认en,英文，zh-CN就是中文，需要其它语言就引入相应的语言包，同时设置language参数的值即可。

还比如startView,设置弹出框的初始显示视图，就是当你点击输入框，一弹出日期选择器时显示的界面，是显示分钟，还是小时，还是月日年，值有5个，分别是0、1、2、3、4，对应分、时、日、月、年

还比如minView,这个是非常实用的一个需求，控制日期可选择到什么范围，是选到月份，还是选到日，还是选到时、或分，值也是5个，0~4 分别对应分、时、日、月、年。

简单的使用就介绍到这..........

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap日期控件日期插件

相关文章推荐

新的分享

章节导航