zoukankan      html  css  js  c++  java
  • 基于bootstrap的时间选择插件daterangepicker以及汉化方法

    双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件:

    可以设定多个时间段选项;也可以自定义时间段;由用户自己选择起始时间和终止时间;时间段的最大跨度可以在程序里设定。

    支持浏览器:谷歌,火狐,safari,ie8+

    效果:

    需要引入的css和js

    <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>

    html代码

      <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>

    使用js调用daterangepicker

    <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,
                    //汉化按钮部分
                    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().subtract(29, 'days'),
                    endDate: moment()
                },
                function (start, end) {
                    $('#daterange-btn span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
                }
           );
        };
        $(document).ready(function() {
            init();
            
        });
    </script>
  • 相关阅读:
    fatal error C1189: #error : Building MFC application with /MD[d] (CRT dll version) requires MFC
    error LNK2019: 无法解析的外部符号 _Direct3DCreate9@4,该符号在函数 "long __cdecl InitD3D(struct HWND__ *)" (?InitD3D
    无法将参数 1 从“WCHAR [256]”转换为“const char *”
    WPE 过滤器 高级滤镜
    WPE 过滤器 滤镜 用法
    Easy2game使用
    JMeter Concurrency Thread Group阶梯式加压
    Selenium页面工厂+数据驱动测试框架
    讨伐Cucumber行为驱动
    Selenium LoadableComponent加载组件
  • 原文地址:https://www.cnblogs.com/moumou0213/p/6484409.html
Copyright © 2011-2022 走看看