专栏首页沉默王二最好用的日期范围选择组件:bootstrap-daterangepicker

最好用的日期范围选择组件: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。

再来看css。

本文作者:首席执行官(沉默王二)

本文编辑:首席执行官(沉默王二)

本文分享自微信公众号 - 沉默王二(cmower),作者:沉默王二

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-04-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Stack Overflow 上 370万浏览量的一个问题:如何比较 Java 的字符串?

    在逛 Stack Overflow 的时候,发现了一些访问量像喜马拉雅山一样高的问题,比如说这个:如何比较 Java 的字符串?访问量足足有 370万+,这不得...

    沉默王二
  • 写出整洁的代码,是每个程序员的追求

    《Clean Code》指出,要想写出好的代码,首先得知道什么是肮脏代码、什么是整洁代码;然后通过大量的刻意练习,才能真正写出整洁的代码。

    沉默王二
  • 晋升必会的 70 道 「Spring 全家桶」高频面试题

    《Java零基础实战》的作者宁楠主动送给了二哥 5 个兑换码,可以免费兑换《案例上手 Spring 全家桶》(价值 99 元)的 GitChat 课程哦。二哥突...

    沉默王二
  • Mysql Explain 详解

    在日常工作中,我们会有时会开慢查询去记录一些执行时间比较久的SQL语句,找出这些SQL语句并不意味着完事了,些时我们常常用到explain这个命令来查看一个这些...

    幽鸿
  • 构建打包工具Rollup.js入门指南

    最近在看Vue源码的时候发现一个新的打包工具Rollup.js,之前没有听说过这个工具,也不了解Rollup.js相比于常用的打包工具webpack有什么异同和...

    用户1462769
  • 基于django的个人博客网站建立(三)

    首先我希望主页面是显示我的所有文章,于是在主页面的视图函数中返回了所有的文章对象:

    py3study
  • 不推荐使用Spring Boot 2.2.0 ,这个问题你肯定会遇

    > 项目推荐: Spring Cloud 、Spring Security OAuth2的RBAC权限管理系统 欢迎关注 最新版本实践

    冷冷
  • 车牌识别--Towards End-to-End License Plate Detection and Recognition

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhangjunhit/article/de...

    用户1148525
  • 一步一步完成一个聚会摇色子游戏

          出去聚会想玩摇色子,奈何身边没有色子,网上也没找到,自己写一个吧 一、画界面       色子要大明显字要大,摇动最好有特效和声音,前端使用layu...

    用户1055830
  • overflow:hidden属性

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。

    bear_fish

扫码关注云+社区

领取腾讯云代金券