最近做的项目需要添加时间插件，而且是有时间区间选择的需求，并不是我们直接加一个<input type="date">就算完事了，在网上搜索了一下，找到了datepicker这个插件，通过不段的测试和修改最终有了下面这点自己的理解，看完下面的内容，在项目中使用肯定是没有问题了，如果还遇到更难或者不能理解的地方，可以进入它的github地址去看看，或者能找到你想要的内容：
github地址：https://github.com/fengyuanchen/datepicker
另外还有几个介绍的比较详情的网站，在需要的时候都可以用来参考：
https://bootstrap-datepicker.readthedocs.io/en/latest/index.html#
http://fengyuanchen.github.io/datepicker/
我总共做了两个demo，一个是直接clone上面的github地址，然后根据examples下面的datepicker-in-modal.html这个文件自己组装了一个，为什么要这样做呢？
因为之前从网上搜索了很多关于这个插件的信息，然后根据别人的例子和自己的理解写了一个，结果发现有些引用的代码不是最新的，配置选项中有些最新的版本已经不再用了，为了保险起见，还是决定用引用github中的文件。另一个就是通过根据别人的例子和自己的理解写的。我会把两个都简单介绍一下，您可以根据自己的需要去选择。
先说根据github中的文件写的这个：
github中examples下面的datepicker-in-modal.html的文件结构大致是这个样子的，由于考虑篇幅问题，我只留下了关键的内容，其他的您可以自己clone到本地查看。
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="../dist/datepicker.css">
</head>
<body>
<input type="text" class="form-control" data-toggle="datepicker">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="../dist/datepicker.js"></script>
<script>
$(function() {
$('[data-toggle="datepicker"]').datepicker({
autoHide: true,
zIndex: 2048,
});
});
</script>
</body>
</html>
根据上面这个例子，以及自己的经验和理解，整理出下面这个demo。
目录结构：
�目录结构.jpeg
在这个例子中，我保留了datepicker-in-modal.html中引用到bootstrap文件的代码，都是必不可少的，考虑到效率问题，就没有去下载了，jquery-3.1.1.min.js是自己下载的。
下面我们来看具体的代码：
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="css/datepicker.css">
</head>
<body>
<div class="input-daterange" id="datepicker">
<input type="text" value="2017-11-20" id="dateValue"/>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="js/datepicker.js"></script>
<script src="js/datepicker.zh-CN.js"></script>
<!-- 这里要特别注意，上面这个文件一定要放在datepicker.js后面，否则无效 -->
<script type="text/javascript">
$(function () {
$('#dateValue').datepicker({
autoPick: false,
autoHide: true,
language: "zh-CN",
startView: 0,
format: "yyyy-mm-dd",
clearBtn: true,
todayBtn: false,
endDate: "2017-11-20",
startDate: "2017-11-14",
date: new Date(2016, 4, 24)
});
});
</script>
</body>
</html>
以上代码亲测有效，简单好用。下面我们来说一下各个配置项分别代码什么意思，以下这些是比较常用的，文档中还有很多，这里没有的您可以去看文档：
autoPick: false, // 自动选择初始化日期
autoHide: true, // 选择好日期后自动隐藏
language: "zh-CN", // 语言 当前为中文
startView: 0, // 默认最先选择什么，0：天，1：月份，2：年
format: "yyyy-mm-dd", // 时间格式
clearBtn: true, // 清空按钮，点击该按钮，输入框中没有内容
todayBtn: false, // 点击回到今天按钮
endDate: "2017-11-20", // 结束的时间
startDate: "2017-11-14", // 开始的时间
date: new Date(2016, 4, 24) // 点击输入框显示日历表的时候定位到这一天 注意：月份是从0开始，0表示1月，1表示2月。
下面再来看看我自己根据网上别人的例子写的代码，目录结构是这样的：
目录结构.jpeg
我们再来看看test2.html中的代码是什么样子的：
<head>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
</head>
<body>
<div class="input-daterange" id="datepicker">
<input type="text" value="2017-11-14" id="dateValue"/>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript">
$(function () {
$('.input-daterange').datepicker({
language: "zh-CN", // 语言 当前为中文
autoclose: true, // 选择好日期后自动隐藏，github上的版本改了
startView: 2, // 默认最新选择什么，0：天，1：月份，2：年
format: "yyyy-mm-dd", // 时间格式
clearBtn: true, // 清空按钮，点击该按钮，输入框中没有内容
todayBtn: false, // 点击回到今天按钮
endDate: "2017-11-20", // 结束的时间
startDate: "2017-11-14" // 开始的时间
});
});
</script>
以上代码，亲测有效，跟前一个demo代码是差不多的。
如果需要用到它里面的方法，也可以像下面这样写：
var $dataValue = $('#dateValue');
console.log($dataValue.datepicker("getDate"));
console.log($dataValue.datepicker("setDate", "10/12/2012"));
Bootstrap的DatePicker日期范围选择
用日期插件时，经常会有一种需求。两个input框选择。开始时间小于结束时间，结束时间大于开始时间，开始时间和结束时间都不大于当前时间。通过下面的例子，Bootstrap DatePicker实现这个需求。
演示地址：http://runningls.com/demos/2016/daily/datepicker/
demo在github地址:https://github.com/liusaint/JavaScript-record/tree/master/datepicker
以下内容来至：http://blog.csdn.net/liusaint1992/article/details/52590681
目录结构如下：
目录结构.jpeg
需要引入的文件：
<!-- 在最前面引入jQuery.js文件 -->
<link href="bootstrap-datepicker3.css" rel="stylesheet">
<script src="bootstrap-datepicker.min.js"></script>
<script src="bootstrap-datepicker.zh-CN.min.js"></script>
<input type="text" id="date_begin" value="2017-11-20">
<input type="text" id="date_end" value="2017-11-20">
页面样子.jpeg
function DatePicker(beginSelector,endSelector){
// 仅选择日期
$(beginSelector).datepicker(
{
language: "zh-CN",
autoclose: true,
startView: 0,
format: "yyyy-mm-dd",
clearBtn:true,
todayBtn:false,
endDate:new Date()
}).on('changeDate', function(ev){
if(ev.date){
console.log(new Date(ev.date.valueOf()));
$(endSelector).datepicker('setStartDate', new Date(ev.date.valueOf()))
}else{
$(endSelector).datepicker('setStartDate',null);
}
});
$(endSelector).datepicker(
{
language: "zh-CN",
autoclose: true,
startView:0,
format: "yyyy-mm-dd",
clearBtn:true,
todayBtn:false,
endDate:new Date()
}).on('changeDate', function(ev){
if(ev.date){
$(beginSelector).datepicker('setEndDate', new Date(ev.date.valueOf()))
}else{
$(beginSelector).datepicker('setEndDate',new Date());
}
})
}
DatePicker("#date_begin", "#date_end");
网友评论