优雅的日期选择插件daterangepicker

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

 63656  225  查看评论 (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
});
相关插件-日期和时间

选择日期

一个选择下拉日期的代码
  日期和时间
 57678  288

jquery ui酒店预订日历选择器控件代码

jquery ui酒店预订日历选择器控件代码
  日期和时间
 47870  294

jQuery多功能秒表闹钟计时器插件

jQuery多功能秒表闹钟计时器插件
  日期和时间
 41499  206

基于vuejs的移动端未来30天时间选择器

此项目由于时间原因写的比较草,但是功能还是完善了,字体单位采用rem,所以在PC端预览的时候可能会出现兼容性问题
  日期和时间
 30195  226

讨论这个项目(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

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

    回复
取消回复