今天主要是由于项目的需要,做了一个daterangepicker双日历插件,做出来的效果如下:

个人感觉这个daterangepicker双日历插件很好用,并且实现起来也不是很麻烦,我是根据它的官方文档去写的,并将Bootstrap也整合进去了,daterangepicker.js下载  官方文档下载

下面就开始详细介绍我是怎么实现的吧。

1.在头部导入必要的js和css:

<link rel="stylesheet" type="text/css" media="all" href="${ctxStatic}/daterangepicker/daterangepicker.css" />

<script src="${ctxStatic}/daterangepicker/jquery-1.11.3.min.js"></script>
<script src="${ctxStatic}/daterangepicker/bootstrap.min.js"></script>
<script src="${ctxStatic}/daterangepicker/moment.js"></script>
<script src="${ctxStatic}/daterangepicker/daterangepicker.js"></script>

2.在body中写div:

<div style="float:left">//隐藏作用域,用于将日历选中的开始时间和结束时间传到后台
<input name="datetime[start]" type="hidden" value="${startTime}">
<input name="datetime[end]" type="hidden" value="${endTime}">
</div>

<div class="btn-group btn-group-sm" style="padding-right:0;">
<button style="width:240px" id="config-demo" class="btn btn-default daterange daterange-time" type="button"><span class="date-title">下单时间</span></button>//点击按钮显示时间插件,并展示选中的时间段
<button class="btn btn-default btn-sm" type="button" onclick="clearTime(this)" placeholder="下单时间"><i class="fa fa-remove"></i></button>//点击按钮清空选中的时间段
</div>

3.编写js函数:

<script type="text/javascript">
$(document).ready(function() {
$('.demo i').click(function() {
$(this).parent().find('input').click();
});

updateConfig();

function updateConfig() {
var options = {};

options.timePicker = true;

options.timePicker24Hour = true;

options.ranges = {
'今天': [moment().startOf('day'), moment()],
'一周内': [moment().subtract(6, 'days'), moment()],
'两周内': [moment().subtract(13, 'days'), moment()],
'一月内': [moment().subtract(29, 'days'), moment()],
};
options.locale = {
direction: 'ltr',
format: 'YYYY-MM-DD HH:mm',
separator: ' 至 ',
applyLabel: '确定',
cancelLabel: '取消',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: '日期范围',
daysOfWeek: ['日', '一', '二', '三', '四', '五','六'],
monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
firstDay: 1
};

options.linkedCalendars = true;

options.autoUpdateInput = true;

options.showCustomRangeLabel = true;

$('#config-demo').daterangepicker(options, function(start, end, label) {
var elm = $("#config-demo");
var container =$(elm).parent().prev();
// console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
// alert(startc);
// alert(end.format('YYYY-MM-DD HH:mm'));
$(elm).find(".date-title").html(start.format('YYYY-MM-DD HH:mm') + " 至 " + end.format('YYYY-MM-DD HH:mm'));
container.find(":input:first").val(start.format('YYYY-MM-DD HH:mm'));
container.find(":input:last").val(end.format('YYYY-MM-DD HH:mm'));
});
}
});
function clearTime(obj){
$(obj).prev().html("<span class="date-title">" + $(obj).attr("placeholder") + "</span>");
$(obj).parent().prev().find("input").val("");
}
</script>

这样写好了所有的配置以后就可以显示了,你们要是遇到了什么不懂的地方就问我,乐意解答!

daterangepicker双日历插件的使用的更多相关文章

  1. bootstrap双日历插件实例化

    网站中难免会用到日期选择插件,常见的有jquery的,也有bootstrap的.单日历的就不说了,实例化都比较简单.今天给大家介绍一下bootstrap的双日历插件. http://www.jq22. ...

  2. 基于bootstrap的双日历插件 daterangepicker

    我遇到需求是要求我将daterangepicker的一个双日期选择格式修改成两个单日期格式的日期选择框(方便手机端显示),要求如下: 1.两个单日期格式分别为开始日期和结束日期 2.开始日期可选择范围 ...

  3. daterangepicker 时间插件

    在工作中学习到的一种插件 上网查询之后发现 在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker HTML <div id="repo ...

  4. daterangepicker时间段插件

    1.序言: daterangepicker是Bootstrap的一个时间组件,使用很方便 用于选择日期范围的JavaScript组件. 设计用于Bootstrap CSS框架. 它最初是为了改善报表而 ...

  5. daterangepicker 双日历/格式化日期/日期限制minDate,maxDate

    var locale = { "format": 'YYYY/MM/DD', "separator": " - ", "apply ...

  6. daterangepicker日历插件使用参数注意问题

    显示具体时间时分秒: timePicker设置为true,//有些资料写的pickerTime不太对 重点大坑:修改时间默认展示格式,把fomat写在locale中,网上很多资料说直接写在datera ...

  7. 双日历插件--jq datepicker时间范围选择

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 关于daterangepicker取消默认值的设置

    1.项目中用到了daterangepicker这个插件,需求要求不能有默认值. 2.查资料得知,可以修改插件内的属性 autoUpdateInput值来实现这个效果. 顾虑有二: 1.修改插件内容,导 ...

  9. js 插件 issue

    1 iscroll 5 和 lazyload 同时使用  转自 yinjie //lazyload var $scrollEle = $("#wrapper") $("i ...

随机推荐

  1. Clumsy 利用无线网卡结合Clumsy软件模拟弱网络测试

    利用无线网卡结合Clumsy软件模拟弱网络测试 by:授客 QQ:1033553122 实践环境 Clumsy 0.2 下载地址:http://jagt.github.io/clumsy/downlo ...

  2. Flutter 布局(六)- SizedOverflowBox、Transform、CustomSingleChildLayout详解

    本文主要介绍Flutter布局中的SizedOverflowBox.Transform.CustomSingleChildLayout三种控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. ...

  3. Android 动态渐变按钮

    先上个图 看着特别炫酷吧 其实就是自定义颜色两秒轮播动画 AnimationDrawable animationDrawable = (AnimationDrawable) button.getBac ...

  4. [20180122]列统计与直方图.txt

    [20180122]列统计与直方图.txt --//昨天看了https://jonathanlewis.wordpress.com/2018/01/18/column-stats/,提到分析metho ...

  5. 洗礼灵魂,修炼python(29)--装饰器(1)—>利用经典案例解析装饰器概念

    前提必备 不急着进入正题,在前面函数作用域那一章介绍了闭包,全局变量局部变量,这里再看几个简单的闭包案例: 1):不带参数 注意: 1.这里的name属性是每个函数都有的,可以反馈函数名 2.temp ...

  6. 开发测试技巧|辅助开发调试:goolge浏览器利用F12在控制台输入脚本实现表单自动填充

    一个开发测试技巧的指引和截图,利用google浏览器的F12调试和Console执行,注入JavaScript脚本实现表单的自动填充和测试. 原文链接: http://www.lookdaima.co ...

  7. 跨域访问的解决方案(非HTML5的方法:JSONP)

    http://supercharles888.blog.51cto.com/609344/856886 跨域访问一直是困扰很多开发者的问题之一.因为涉及到安全性问题,所以跨域访问默认是不可以进行的,否 ...

  8. Decentraleyes - Local emulation of Content Delivery Networks

    Decentraleyes, 是一个本地化第三方库文件的浏览器插件,提供三十多种语言支持.大致原理如下: 保存常用的第三方库文件到本地,当打开的页面中需要加载的第三方库文件在本地有副本时,随即进行拦截 ...

  9. Activity总结

    1)Activity在app构建中的位置: 2)与window和视图体系.事件处理的关系: 3)生命周期: 4)启动方式: 5)activity管理: 6)加载管理:

  10. Android的进阶学习(六)--理解View事件分发

    http://www.jianshu.com/p/34cb396104a7 有些无奈,期末考试抱佛脚,还好没有挂,现在继续进阶. 好久以前就看到了View的事件分发,但是当时功底不够,源码也不敢深究, ...