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

标签: 日期插件
1923人阅读 评论(0) 收藏 举报
分类:

嗯,在我还没有发现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人,期待你的加入!

0
0

猜你在找
【直播】机器学习&深度学习系统实战(唐宇迪)
【直播】Kaggle 神器:XGBoost 从基础到实战(冒教授)
【直播回放】深度学习基础与TensorFlow实践(王琛)
【直播】计算机视觉原理及实战(屈教授)
【直播】机器学习之凸优化(马博士)
【直播】机器学习之矩阵(黄博士)
【直播】机器学习之概率与统计推断(冒教授)
【直播】机器学习之数学基础
【直播】TensorFlow实战进阶(智亮)
【直播】深度学习30天系统实训(唐宇迪)
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:756488次
    • 积分:9422
    • 等级:
    • 排名:第1849名
    • 原创:289篇
    • 转载:0篇
    • 译文:0篇
    • 评论:857条
    流年笑掷 未来可期
  • QQ群: 120926808
  • 沉默王二
    最新评论
    博客专栏
    文章分类