沉默王二

不务正业的IT狗,喜欢读书和写作

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

嗯,在我还没有发现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 https://blog.csdn.net/qing_gee/article/details/65629720
文章标签: 日期插件
个人分类: 全栈
所属专栏: Web开发进阶之路
想对作者说点什么? 我来说一句

bootstrap daterangepicker 汉化

2016年09月24日 36KB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭