头像

jQuery双日历日期区间选择插件【原创

来源:http://www.sucaihuo.com/js/3600 素材火管理员 2018-04-04 11:48浏览(193) 收藏

一款界面简洁美观又实用的jQuery双日历日期区间选择插件,酒店入住离店日期范围选择代码。还提供了最近7天,30天,60天等便捷日期选择,非常完美。
jQuery双日历日期区间选择插件
分类:日期时间 > 日期控件 难易:初级

程序员,你不是一个人;网站开发QQ群:436471830,在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 7 下载资源 下载积分: 20 积分

js代码

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<script type="text/javascript">
    $('.ranges_1 ul').remove();
    $('#daterange-btn').daterangepicker({
        ranges: {
            '全部': [moment(), moment().subtract(-1, 'days')],
            '今天': [moment(), moment()],
            '明天': [moment().subtract(-1, 'days'), moment().subtract(-1, 'days')],
            '未来七天': [moment(),moment().subtract(-6, 'days')],
            '未来30天': [moment(),moment().subtract(-29, 'days')],
            '未来60天': [moment(),moment().subtract(-59, 'days'), ]
        },
        startDate: moment(),
        endDate: moment()
    },
    function(start, end,label) {
        //label:通过它来知道用户选择的是什么,传给后台进行相应的展示
//      console.log(label)
        if(label=='全部'){
            $('#daterange-btn span').html('全部');
        }else if(label=='今天'){
            $('#daterange-btn span').html(end.format('YYYY/MM/DD'));
        }else if(label=='明天'){
            $('#daterange-btn span').html(start.format('YYYY/MM/DD'));
        }else if(label=='未来七天'){
            $('#daterange-btn span').html(start.format('YYYY/MM/DD')+'-'+end.format('YYYY/MM/DD'));
        }else if(label=='未来30天'){
            $('#daterange-btn span').html(start.format('YYYY/MM/DD')+'-'+end.format('YYYY/MM/DD'));
        }else if(label=='未来60天'){
            $('#daterange-btn span').html(start.format('YYYY/MM/DD')+'-'+end.format('YYYY/MM/DD'));
        }
        
    }
);
</script>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:http://www.sucaihuo.com/js/3600.html
评论14
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 13楼
    04-15 06:35
    ta***uo
    这个日历效果不错 双日历
  • 头像 12楼
    04-09 22:00
    vi***90
    这样的效果在实际使用肯定很棒
  • 头像 11楼
    04-09 21:51
    •*** ั
    过来看看,需要
  • 头像 10楼
    04-09 09:45
    wp***nl
    看着不错,很好的日历插件,用的不错
  • 头像 9楼
    04-08 14:54
    开***心
    正好需要日历插件,找了半天,这个最好看!
  • 头像 8楼
    04-08 11:10
    he***xx
    代码值得研究,感谢楼主分享
  • 头像 7楼
    04-06 16:13
    So***er
    非常好的日历插件,值得下载
  • 头像 6楼
    04-05 23:31
    vi***90
    很好很全面,值得学习
  • 头像 5楼
    04-05 21:43
    流***影
    很棒,这正是我需要的。
  • 头像 4楼
    04-05 20:02
    木***偶
    不错的插件,挺实用的。。。
1 2