码迷,mamicode.com
首页 > 其他好文 > 详细

daterangepicker 使用方法总结

时间:2018-05-22 16:01:59      阅读:3297      评论:0      收藏:0      [点我收藏+]

标签:图片   ref   https   访问   options   ora   实现   技术分享   文件目录结构   

daterangepicker 是一个时间段选择插件。官网地址:http://www.daterangepicker.com/

项目中需要实现如下图的效果:

技术分享图片

 

1.引入该插件所需要的JS 和 CSS ,该项目是以bootstrap为基础开发的,所以同时也要引用bootstrap相关的文件。

文件目录结构如下:

技术分享图片

我的项目中引用路径如下:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>

 

 2.写文本框,HTML代码如下:

<div class="input-group input-medium" id="defaultrange">
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button class="btn default date-range-toggle" type="button">
            <i class="fa fa-calendar"></i>
        </button>
    </span>
</div>

 

3.使用JS调用daterangepicker,并汉化。

$("#defaultrange").daterangepicker({
    opens: "left", //打开的方向,可选值有‘left‘/‘right‘/‘center‘
    format: "YYYY-MM-DD",
    separator: " to ",
    startDate: moment().subtract("days", 6),
    endDate: moment(),
    ranges: {
        "今天": [moment(), moment()],
        "昨天": [moment().subtract("days", 1), moment().subtract("days", 1)],
        "7天前": [moment().subtract("days", 6), moment()],
        "30天前": [moment().subtract("days", 29), moment()],
        "这个月": [moment().startOf("month"), moment().endOf("month")],
        "上个月": [moment().subtract("month", 1).startOf("month"), moment().subtract("month", 1).endOf("month")]
    },
    locale: {
        applyLabel: ‘确定‘,
        cancelLabel: ‘取消‘,
        fromLabel: ‘起始时间‘,
        toLabel: ‘结束时间‘,
        customRangeLabel: ‘自定义‘,
        daysOfWeek: [‘日‘, ‘一‘, ‘二‘, ‘三‘, ‘四‘, ‘五‘, ‘六‘],
        monthNames: [‘一月‘, ‘二月‘, ‘三月‘, ‘四月‘, ‘五月‘, ‘六月‘,‘七月‘, ‘八月‘, ‘九月‘, ‘十月‘, ‘十一月‘, ‘十二月‘],
        firstDay: 1,

    },
    minDate: "01/01/2012",
    maxDate: "12/31/2018"
}, function (t, e) {
    $("#defaultrange input").val(t.format("YYYY-MM-DD") + " - " + e.format("YYYY-MM-DD"))
}),
$("#defaultrange input").val(moment().subtract("days", 6).format("YYYY-MM-DD")+ " - "+ moment().format("YYYY-MM-DD")); //设置初始值

更多的案例参数配置,事件,方法,可访问:http://www.daterangepicker.com/#options

 

daterangepicker 使用方法总结

标签:图片   ref   https   访问   options   ora   实现   技术分享   文件目录结构   

原文地址:https://www.cnblogs.com/sese/p/9072292.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!