整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
ootstrap-datepicker是一个开源、基于bootstrap的日期选择器，内置60+种语言，基于bootstrap也使得选择器非常美观适合现代网站，功能强大，通过内置属性、方法、事件组合配置可以满足几乎所有日期选择需求，唯一遗憾的是不支持时间选择，只能选择年月日。
1、下载及初始化
https://github.com/uxsolutions/bootstrap-datepicker
下载完成后解压，把dist文件夹中的所有文件放到项目中任意位置，引入下图所示的文件即可。
然后在页面body元素中创建一个容器，如下所示。
最后在id为sandbox-container的div元素中创建input元素，并运行以下代码脚本，一个日期选择器就创建好了。
2、特色展示
⑴组件选择
⑵内联选择
⑶范围选择
⑷格式化日期
⑸最大最小日期
⑹选择器开始界面
0：天（默认）
1：月
2：年
3：十年
4：世纪
⑺最大最小选择精度
minViewMode最小、maxViewMode最大
0：天（最小默认）
1：月
2：年
3：十年
4：世纪（最大默认）
⑻今日、清除按钮
⑼选择器方向
auto：自动（默认）
top auto：向上自动
bottom auto：向下自动
auto left：自动向左
top left：左上
bottom left：左下
auto right：自动向右
top right：右上
bottom right：右下
⑽星期禁用、高亮
⑾多选、分隔符
⑿显示第几周
⒀选择后自动关闭
⒁今日高亮
⒂选择器界面显示之前的回调函数
有世纪、十年、年、月、日五种类型，如下所示是（日的例子）
⒃禁用日期
⒄选中取消
⒅默认初始化视图
⒆键盘操作
⒇星期几作为一周的开始
在线演示网站：
https://uxsolutions.github.io/bootstrap-datepicker/
API文档：
https://bootstrap-datepicker.readthedocs.io/en/latest/index.html
bootstrap datepicker内置8个事件（显示、隐藏选择器事件、清除日期选中事件和世纪、十年、年、月、日改变事件），内置20个方法（如销毁、显示、隐藏、更新选择器方法等），支持键盘操作选择日期，支持日期校验等，功能丰富，希望以后能够加入时间选择。
有哪里写得不好的地方请大家提出来，请轻喷，谢谢。 同时有什么与编程相关的好东西可以推举给我，再次感谢！
网:
http://www.daterangepicker.com
关于参数汇总:
http://www.daterangepicker.com/#options
<link href="/css/daterangepicker.min.css?ver=0.6" rel="stylesheet" type="text/css" />
<script src="/js/date-time/moment.js?ver=0.6" type="text/javascript"></script>
<script src="/js/date-time/daterangepicker.zh-CN.js?ver=0.6" type="text/javascript"></script>
<script src="/js/date-time/daterangepicker.js?ver=0.6" type="text/javascript"></script>
<div class="input-group" style="width: 240px; margin-left: -5px;">
<input type="text" class=&qu·ot;form-control date-picker" id="dateTimeRange" value="" />
<span class="input-group-addon">
<i class="fa fa-calendar bigger-110"></i>
</span>
<input type="hidden" name="beginTime" id="beginTime" value="" />
<input type="hidden" name="endTime" id="endTime" value="" />
</div>
<a href="javascript：;" onclick="begin_end_time_clear();">清除</a>
<script type="text/javascript">
$(function() {
$('#dateTimeRange').daterangepicker({
applyClass : 'btn-sm btn-success',
cancelClass : 'btn-sm btn-default',
locale: {
applyLabel: '确认',
cancelLabel: '取消',
fromLabel : '起始时间',
toLabel : '结束时间',
customRangeLabel : '自定义',
firstDay : 1
},
ranges : {
//'最近1小时': [moment().subtract('hours',1), moment()],
'今日': [moment().startOf('day'), moment()],
'昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
'最近7日': [moment().subtract('days', 6), moment()],
'最近30日': [moment().subtract('days', 29), moment()],
'本月': [moment().startOf("month"),moment().endOf("month")],
'上个月': [moment().subtract(1,"month").startOf("month"),moment().subtract(1,"month").endOf("month")]
},
opens : 'right', // 日期选择框的弹出位置
separator : ' 至 ',
showWeekNumbers : true, // 是否显示第几周
//timePicker: true,
//timePickerIncrement : 10, // 时间的增量，单位为分钟
//timePicker12Hour : false, // 是否使用12小时制来显示时间
//maxDate : moment(), // 最大时间
format: 'YYYY-MM-DD'
}, function(start, end, label) { // 格式化日期显示框
$('#beginTime').val(start.format('YYYY-MM-DD'));
$('#endTime').val(end.format('YYYY-MM-DD'));
})
.next().on('click', function(){
$(this).prev().focus();
});
});
/**
* 清除时间
*/
function begin_end_time_clear() {
$('#dateTimeRange').val('');
$('#beginTime').val('');
$('#endTime').val('');
}
</script>单一时间显示方法
1. 兼容IE8-11、360浏览器、chrome、firefox等主流浏览器，手机端也可使用；
2. 添加点击前一周、后一周和高亮等功能。
1、初始化周历原理：
首先获取表示当前星期几的数字currDay = d.getDay()，一般是0（周日）-6（周六）；
然后把值取负数传到方法creatWeeklyCalendar进行循环显示一周时间；
Tips：方法calcTime是利用当前毫秒数+-循环数的毫秒数（someTime = d.getTime() + (24 * 60 * 60 * 1000) * num）算出这天的年月日。
for (var i = some, len = some + 7; i < len; i++) {
if (this.calcTime(i).month == currMonth && this.calcTime(i).date == currDate) {
html += '<li class="active"><a href="javascript：;" data-year="' + this.calcTime(i).year + '" title="' + this.calcTime(i).month + '月">' + this.calcTime(i).date + '</a></li>';
} else {
html += '<li><a href="javascript：;" data-year="' + this.calcTime(i).year + '" title="' + this.calcTime(i).month + '月">' + this.calcTime(i).date + '</a></li>';
}
}最后把html输出到页面。
2、前一周和后一周原理：
首先利用点击前一周和后一周按钮，对计算数clickedTimes进行+-；
然后把clickedTimes新值传到方法changeWeek；
最后执行this.creatWeeklyCalendar(-currDay - (7 * clickedTimes))，重新输出新一周的数据。
3、最后把构造函数暴露window.WeeklyCalendar = WeeklyCalendar。
*请认真填写需求信息，我们会在24小时内与您取得联系。
