美文网首页前端
js日期范围选择插件

js日期范围选择插件

作者: 足迹人生2017 | 来源:发表于2018-07-05 17:34 被阅读9次

有区间的datarangepicker使用说明

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
    <head>
        <meta charset="UTF-8" />
        <title>A date range picker for Bootstrap</title>
      <!--cdn上面的地址-->
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.css" rel="stylesheet">
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/moment.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
       
    </head>
    <body style="margin: 60px 0">
        <div class="row">
            <div class="col-md-4 col-md-offset-2 demo">
                <h4>Your Date Range Picker</h4>
                <input type="text" id="config-demo" class="form-control">
                <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
            </div>
        </div>
        <style type="text/css">
            .demo {
                position: relative;
            }
            
            .demo i {
                position: absolute;
                bottom: 10px;
                right: 24px;
                top: auto;
                cursor: pointer;
            }
        </style>
    
        <script type="text/javascript">
            var beginTimeStore = '';
            var endTimeStore = '';
            $('#config-demo').daterangepicker({
                "timePicker": true,
                "timePicker24Hour": true,
                "linkedCalendars": false,
                "autoUpdateInput": false,
                "locale": {
                    format: 'YYYY-MM-DD',
                    separator: ' ~ ',
                    applyLabel: "应用",
                    cancelLabel: "取消",
                    resetLabel: "重置",
                    customRangeLabel: '自定义',
                    daysOfWeek:["日","一","二","三","四","五","六"],
            monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
                },
                "ranges" :{
              '今天': [moment(), moment()],
              '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
              '最近7天': [moment().subtract(6, 'days'), moment()],
              '最近一个月': [moment().subtract(29, 'days'), moment()],
              '这个月': [moment().startOf('month'), moment().endOf('month')],
              '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
            }, function(start, end, label) {
                beginTimeStore = start;
                endTimeStore = end;
                console.log(this.startDate.format(this.locale.format));
                console.log(this.endDate.format(this.locale.format));
                if(!this.startDate){
                    this.element.val('');
                }else{
                    this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
                }
            });
        </script>
    </body>
</html>

git地址 https://github.com/dangrossman/daterangepicker

http://www.daterangepicker.com/

相关文章

网友评论

    本文标题:js日期范围选择插件

    本文链接:https://www.haomeiwen.com/subject/bsnpuftx.html