快速上手日期插件daterangepicker

最新推荐文章于 2024-07-19 12:58:53 发布

dengcai7005

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量98

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/myIvan/p/9532459.html

版权

参数介绍：

参数	格式	示例	含义
startDate	MM/DD/YYYY	“startDate”:”10/14/2017”	设置默认的开始日期
endDate	MM/DD/YYYY	“endDate”:”10/22/2017”	设置默认的结束日期
minDate	MM/DD/YYYY	“minDate”:”10/14/1995”	设置最小可用日期
maxDate	MM/DD/YYYY	“maxDate”:”10/14/2017”	设置最大可用日期
autoApply	true/false	默认值：false	不用点击Apply或者应用按钮就可以直接取得选中的日期
singleDatePicker	true/false	默认值：false	设置为单个的datepicker，而不是有区间的datepicker
singleDatePicker	true/false	默认值：false	设置为单个的datepicker，而不是有区间的datepicker
showDropdowns	true/false	默认值：false	当设置值为true的时候，允许年份和月份通过下拉框的形式选择
timePicker	true/false	默认值：false	可选中时分
timePicker24Hour	true/false	默认值：false	设置小时为24小时制
timePickerSeconds	true/false	默认值：false	可选中秒
opens	可选值：right left center	默认值：center	设置datepicker面板防止的位置：左边、右边或者中间
drops	可选值：down up	默认值：down	设置面板防止的位置：input输入框上面或者input输入框下面
locale			本地配置
locale.applyLabel			确认按钮文字
locale.cancelLabel			取消按钮文字
locale.format			格式

详细例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css"/>
    <link href="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.css" rel="stylesheet">
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/moment.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
</head>
<body>
    <div class="input-group">
        <button type="button" class="btn btn-default pull-right" id="daterange-btn">
            <i class="fa fa-calendar"></i>
            <span>时间</span>
            <i class="fa fa-caret-down"></i>
        </button>
    </div>
    <script>
    function init() {
        //定义locale汉化插件
        var locale = {
            "format": 'YYYY-MM-DD',
            "separator": " -222 ",
            "applyLabel": "确定",
            "cancelLabel": "取消",
            "fromLabel": "起始时间",
            "toLabel": "结束时间'",
            "customRangeLabel": "自定义",
            "weekLabel": "W",
            "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
            "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            "firstDay": 1
        };
        //初始化显示当前时间
        $('#daterange-btn span').html(moment().subtract('hours', 1).format('YYYY-MM-DD') + ' - ' + moment().format('YYYY-MM-DD'));
        //日期控件初始化
        $('#daterange-btn').daterangepicker(
            {
                'locale': locale,
                showDropdowns:true,
                autoApply:true,
                //汉化按钮部分
                ranges: {
                    '今日': [moment(), moment()],
                    '昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '最近7日': [moment().subtract(6, 'days'), moment()],
                    '最近30日': [moment().subtract(29, 'days'), moment()],
                    '本月': [moment().startOf('month'), moment().endOf('month')],
                    '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
               },
                startDate: moment(),
                endDate: moment(),
                minDate:'2000-01-01',
                maxDate:moment(),
            },
            function (start, end) {
                $('#daterange-btn span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
            }
       );
    };
    $(document).ready(function() {
        init();
        
    });
</script>
</body>
</html>

问题以及小BUG修复(可以看看):https://www.cnblogs.com/gtlm/p/7719739.html

转载于:https://www.cnblogs.com/myIvan/p/9532459.html

dengcai7005

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
快速上手日期插件daterangepicker

参数介绍：参数格式示例含义startDateMM/DD/YYYY“startDate”:”10/14/2017”设置默认的开始日期endDateMM/DD/YYYY“endDate”:”10/22/2017”设置默认的结束日期minDateMM/DD/YYYY“minDate”:”10/14/1995”...
复制链接

扫一扫