bootstrap-daterangepicker:最好用的日期范围选择组件

原创 2017年04月04日 09:55:11

嗯,在我还没有发现bootstrap-daterangepicker组件时,
在页面需要选择日期范围时,我是傻乎乎的创建两个日期组件。
现在想想,以前的low劲真是不可忍呐!

零、效果展示

现在是这样的:

这里写图片描述

以前是这样的:

这里写图片描述

不比不知道,一比高下立断。

一、源码下载

Date Range Picker for Bootstrap

注意要依赖Bootstrap, jQuery and Moment.js。

Date Range Picker relies on Bootstrap, jQuery and Moment.js. Include the required scripts and stylesheet in your page.

二、使用方法

<div class="form-group daterange">
    <label>下单时间:</label>
    <input class="form-control" name="range_date" type="text">
    <i class="fa fa-calendar"></i>
</div>
  1. 外层div上增加daterange class。
  2. 一个普通的input标签。
  3. 一个日历的i标签。

如此就好。

三、内部封装

首先是js。

$(function() {
    $(".daterange input").each(function() {
        var $this = $(this);

        $this.daterangepicker({
            locale : {
                "format" : "YYYY-MM-DD",// 显示格式
                "separator" : " / ",// 两个日期之间的分割线
                // 中文化
                "applyLabel" : "确定",
                "cancelLabel" : "取消",
                "fromLabel" : "开始",
                "toLabel" : "结束",
                "daysOfWeek" : [ "日", "一", "二", "三", "四", "五", "六" ],
                "monthNames" : [ "一月", "二月", "三月", "四月", "五月", "六", "七月", "八月", "九月", "十月", "十一月", "十二月" ],
                "firstDay" : 1
            },
        }, function(start, end, label) {
            // 点击确定后的事件,下面是为了bootstrap validate得校验,
            // 若未使用,可忽视
            if ($this.parents("form.required-validate").length > 0) {
                var $form = $this.parents("form.required-validate");

                var name = $this.attr("name");
                if ($form.length > 0) {
                    var data = $form.data('bootstrapValidator');
                    data.updateStatus(name, 'NOT_VALIDATED', null)
                    // Validate the field
                    .validateField(name);
                }
            }
        // 设置最小宽度,否则显示不全
        }).css("min-width", "210px").next("i").click(function() {
            // 对日期的i标签增加click事件,使其在鼠标点击时可以拉出日期选择
            $(this).parent().find('input').click();
        });
    });
});

再来看css。

/* 定位i标签在input标签内 */
.daterange i {
    position: absolute;
    bottom: 10px;
    right: 14px;
    top: auto;
    cursor: pointer;
}
.daterange {
    position: relative;
}
/* daterange i end */

沉默王二公众号正在招募原创团队(写作、朗读),我们目前已有9人,期待你的加入!

版权声明:本文出自沉默王二的博客,转载必须注明出处。技术交流群 120926808

bootstrap-datepicker限定可选时间范围

一、应用场景 实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制, 如:开始时间不能大于结束时间,结束时间不能小于开始时间,此时就要为开始日期选择器和结束日期选...
  • biedazhangshu
  • biedazhangshu
  • 2016年02月23日 23:38
  • 40640

BootStrap dateRangePicker时间范围控件

 BootStrap dateRangePicker时间范围控件 1      安装引用 1.1    下载zip Github:https://github.com/da...
  • u010648190
  • u010648190
  • 2014年07月16日 15:19
  • 47521

bootstrap-datetimepicker时间段区间选择的问题

后面的时间不能大于前面的时间 $("#startDate").datetimepicker({         format: "yyyy-mm-dd hh:ii",         autoc...
  • zhuzj12345
  • zhuzj12345
  • 2017年02月17日 10:22
  • 4571

bootstrap-daterangepicker- 基于 Bootstrap 框架的日期范围选择控件

  • 2014年04月04日 16:58
  • 102KB
  • 下载

bootstrap-daterangepicker 双日历控件

bootstrap-daterangepicker点击下载 需要bootstrap跟jquery的支持。 实例代码: ...
  • hzw2312
  • hzw2312
  • 2017年06月01日 17:33
  • 1232

日期时间范围选择插件-daterangepicker使用总结

分享说明:   项目中要使用日期时间范围选择对数据进行筛选;精确到年月日 时分秒;起初,使用了layui的时间日期选择插件;但是在IIE8第一次点击会报设置格式错误;研究了很久没解决,但能确定不是l...
  • ggabcda
  • ggabcda
  • 2017年09月14日 15:50
  • 1549

Bootstrap-daterangepicker双日历时间段选择控件实例

  • 2017年09月21日 15:40
  • 296KB
  • 下载

bootstrap-datepicker限定可选时间范围

一、应用场景 实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制, 如:开始时间不能大于结束时间,结束时间不能小于开始时间,此时就要为开始日期选择器和结束...
  • LuoSiSan
  • LuoSiSan
  • 2017年01月18日 15:53
  • 1037

Bootstrap-daterangepicker(时间范围选择器使用及汉化)

你需要引用如下Js文件且顺序不得有误,否则会报诸如$().moment()is not a function的错误,这就是JS文件加载顺序导致的,请不要作死。 /*bootstrap*/ 使用方法...
  • qq_16371909
  • qq_16371909
  • 2017年01月12日 20:33
  • 2684

Bootstrap的DatePicker日期范围选择

Bootstrap DatePicker实现日期选择 开始日期不大于结束时间,结束时间不小于开始时间,开始日期和结束日期都不大于当前日期。...
  • liusaint1992
  • liusaint1992
  • 2016年09月20日 00:10
  • 12654
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrap-daterangepicker:最好用的日期范围选择组件
举报原因:
原因补充:

(最多只允许输入30个字)