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 举报

相关文章推荐

Time-Selector日期选择控件【可以设置当前时间】

github上面有这个包,网址:https://github.com/mrfluency/Time-Selector 但是我在使用时候发现不能设置当前时间,所以我这里简单封装了一下。 目前增加的新...

vue日期组件,支持vue1.0和2.0

vue-datetime使用vue编写的时间组件,小巧实用,支持vue1.0,vue2.0v1.0 功能: 1.支持同时展开多个日期选择框 2.支持单击选中和取消,可配置单选和多选 3.支持双击启动连...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

Vue中用到jeDate日期控件,Vue对象中的值滞后,总是滞后当前选择的值

Vue中用到jeDate日期控件,在选择完日期没有办法直接绑定到Vue对象上,需要用传统的Jquery或者Input的Value属性再赋值到Vue对象上。或者在js 中注册了日期组件并和Vue对象绑定...

图解script的三种加载方式 异步加载顺序

摘录如下:可以很清晰的看出:: 脚本的获取和执行是同步的。此过程中页面被阻塞,停止解析。:脚本的获取是异步的,执行是同步的。脚本加载不阻塞页面的解析,脚本在获取完后并不立即执行,而是等到DOMread...

为什么你写博客时感觉很困难?

有很多小伙伴写博客时感觉很困难,为什么会这样呢?

python3网络爬虫:爬取煎蛋网美女照片

1.1 前言 今天开学不久,课野不多,就想着来做个爬虫,看着好多老司机喜欢看美女图片,想做个爬去煎蛋网的小爬虫。哈哈,下面开车了,各位,上车记得滴卡 参考: http://blog.csdn.n...

web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史

秒懂Vuejs、Angular、React原理和前端发展历史2017-04-07 小北哥哥 前端你别闹今天来说说 “前端发展历史和框架” 「前端程序发展的历史」「 不学自知,不问自晓,古今行事,未之有...

上传开源项目到GitHub,原来这么简单啊

上传项目到GitHub,其实很简单!10分钟搞定!
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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