daterangepicker 使用方法总结

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 使用方法总结相关推荐

python线性回归预测pm2.5_李宏毅线性回归预测PM2.5
作业说明给定训练集train.csv,要求根据前9个小时的空气监测情况预测第10个小时的PM2.5含量. 训练集介绍: (1):CSV文件,包含台湾丰原地区240天的气象观测资料(取每个月前20天的 ...
在 Oracle Enterprise Linux 和 iSCSI 上构建您自己的 Oracle RAC 11g 集群
作者:Jeffrey Hunter 了解如何以低于 2,700 美元的费用在 Oracle Enterprise Linux 上安装并配置 Oracle RAC 11g 第 2 版开发集群. 本指南中 ...
Java面试题大全2021版
一.Java 基础 JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境. JRE:Java Run ...
基于bootstrap的时间选择插件daterangepicker以及汉化方法
双日历时间段选择插件 - daterangepicker是bootstrap框架后期的一个时间控件: 可以设定多个时间段选项:也可以自定义时间段:由用户自己选择起始时间和终止时间:时间段的最大跨度可以 ...
php日期选择插件,优雅的日期选择插件daterangepicker
插件描述:jQuery bootstrap日期选择插件daterangepicker,多种时间类型选择使用方法第一步:引入css文件: bootstrap.min.css.font-awesome ...
daterangepicker java_日期选择插件Date Range Picker
Date Range Picker jQuery Date Range Picker 是一个基于 jQuery 的日期选择插件,使用起来也算方便,主要提日期范围.单个日期 (时间.周.快捷键.每周其 ...
Query UI DateRangePicker自定义面板个数
jQuery UI DateRangePicker 最大的特色是可以定义展示的月面板个数,可以直接选择时间范围, 还可以定义快捷日期连接,而bootstarp的Date Range Picker只能展 ...
daterangepicker 清空_Date Range Picker 中文网
首先,在您的网页中包含jQuery,Moment.js和Date Range Picker的文件: 然后将日期范围选择器附加到您想要触发它的任何内容: Code: $('input[name=&quo ...
jquery日历插件daterangepicker全面详解汇总
引入插件库 <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script ...

daterangepicker 使用方法总结

daterangepicker 使用方法总结相关推荐

最新文章

热门文章