优雅的日期选择插件daterangepicker

所属分类:输入-日期和时间

 73845  344  查看评论 (22)
分享到微信朋友圈
X
优雅的日期选择插件daterangepicker ie兼容8

使用方法

第一步:引入css文件:

bootstrap.min.cssfont-awesome.min.cssdaterangepicker.css

第二步:引入js文件:

jquery-2.2.3.min.jsmoment.jsdaterangepicker.js

第三步:在html部分设置日期选择控件:

<div class="input-group">
    <button type="button" class="btn btn-default pull-right" id="daterange-btn">
	<span><i class="fa fa-calendar"></i> 日期选择</span>
	<i class="fa fa-caret-down"></i>
    </button>
</div>

第四步:设置js

$('#daterange-btn').daterangepicker({
        ranges: {
            '今天': [moment(), moment()],
            '本周': [moment().startOf('week'), moment().endOf('week')],
            '本月': [moment().startOf('month'), moment().endOf('month')],
            '今年': [moment().startOf('year'), moment().endOf('year')]
        },
        startDate: moment(),
        endDate: moment().endOf('month')
    },
    function(start, end) {
        $('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        alert(start.format('YYYYMMDD') + " " + end.format('YYYYMMDD'));
    }
);

//Date picker
$('#datepicker').datepicker({
    autoclose: true
});
相关插件-日期和时间

jQuery日期时间选择器

基于Bootstrup 3的jQuery日期时间选择器
  日期和时间
 135098  438

类似当当网促销栏目特效日历制作

类似当当网促销栏目特效日历制作
  日期和时间
 28262  261

商城取货时间选择插件(原创)

自动获取当前时间,展示用户可选取货的时间列表
  日期和时间
 29337  303

jQuery日期时间选择器插件

jQuery日期时间选择器插件
  日期和时间
 69912  400

讨论这个项目(22)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    晚风里有你、 0
    2019/10/21 23:48:47
    请问下怎么改为单日历?
        因为我是林学0
        2019/11/14 9:50:11
        我之前也找了很久没找到,然后我就改源码了
        ??柒柒??1
        2019/12/11 11:56:55
        singleDatePicker:false;
    回复
    1-D1=_=1 0
    2019/6/19 14:30:11
    如果之前选择过时间,下次再选择时间的时候,日历上面会覆盖一层div显示之前选择过的时间。请问这个可以禁止显示吗
        因为我是林学1
        2019/11/14 9:50:49
        input标签属性 autocomplete="off"
    回复
    727727 0
    2019/5/31 10:59:42
    我可以选择完时间之后 时间不显示在input框,再通过输入关键字实现双重搜索吗
        stranger0
        2020/4/3 19:24:08
        这个不可以
    回复
    Hi Look 0
    2018/10/26 11:45:17
    我一直都在。 0
    2018/8/15 9:55:24
    周日选择本周会出错
        7277270
        2019/5/31 10:55:12
        现在还有这个错吗
    回复
    llxxyy 0
    2018/4/9 17:22:59
    为什么下载出错
        西瓜0
        2018/4/9 20:49:58
        我这里测试没有问题。
    回复
    kitty_4146 0
    2017/11/16 17:47:58
    webpack该怎么引入
        无心落寞胜寒雪0
        2017/12/8 15:06:18

        先下载

    回复
    小生丶 0
    2017/11/7 11:38:44
    可以的,支持下 回复
    [VIP]Moon 0
    2017/9/28 16:31:56

    不错啊

        睁眼看世界-站着等风来0
        2017/10/23 13:34:48

        666

    回复
    呵呵 0
    2017/9/5 10:31:05

    谢谢楼主```````````

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复