## 日期区间列表 daterangepicker
参考文档: [http://www.daterangepicker.com/](http://www.daterangepicker.com/)
[TOC]
![](https://box.kancloud.cn/f4308d16dd7b4e34c5a4734af9bb2ba3_602x345.png)
## 基本使用
```
<input name="birthdate" value="2017-11-07 至 2017-12-22" class="form-control"/>
<script>
require(['hdjs'], function (hdjs) {
hdjs.daterangepicker({
//标签元素
element: 'input[name="birthdate"]'
});
})
</script>
```
## 显示周与时间
![](https://box.kancloud.cn/fb4a609a0ec645b2cec43585814e702a_685x377.png)
~~~
<input name="birthdate" value="2019-02-22 至 2020-3-22" class="form-control"/>
<script>
require(['hdjs', 'moment','bootstrap'], function (hdjs, moment) {
hdjs.daterangepicker({
//标签元素
element: 'input[name="birthdate"]',
//选项参考插件官网
options: {
ranges: {
//'最近1小时': [moment().subtract('hours',1), moment()],
'今日': [moment().startOf('day'), moment()],
'昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
'最近7日': [moment().subtract('days', 6), moment()],
'最近30日': [moment().subtract('days', 29), moment()],
'本月': [moment().startOf("month"), moment().endOf("month")],
'上个月': [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
},
showDropdowns: true,
alwaysShowCalendars: true,
},
callback: function (start, end, label) {
var str = start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD');
console.log(str);
}
});
})
</script>
~~~
- 文档已经迁移到后盾人
- 基础知识
- 项目介绍
- 安装配置
- 日期时间
- 日期选择
- 列表框日期
- 日期区间
- 时间选择
- moment
- 上传处理
- 初始配置
- 图片上传
- 文件上传
- 消息通知
- 消息通知
- Bootstrap消息
- izitoast
- SweetAlert
- 模态框
- 表单管理
- 异步请求
- 表单提交
- 表单验证
- 扩展组件
- GET参数
- 剪贴板
- 表情选择
- 图表
- 拾色器
- 二维码生成
- 光标控制
- 数据验证
- md5
- 设备检测
- Loading
- 预览图片
- 图标库
- COOKIE
- 百度地图
- 城市选择
- Vue.js
- jQuery
- axios
- 播放器
- 幻灯片
- 代码高亮
- 阿里云OSS
- 验证码
- 页面滚动
- lodash
- momentjs
- markdownIt
- 元素页面固定
- 编辑器
- ueditor
- editor.md
- SimpleMDE
- simditor
- 自定义组件
- 1.0(旧版)
- 基础知识
- 作者向军
- 安装配置
- 查看效果
- 元素样式
- 日期时间
- 日期选择
- 日期区间
- 时间选择
- moment
- 上传处理
- 图片上传
- 文件上传
- 后台处理
- 模态消息
- 模态
- notify
- bootstrap
- 表单管理
- 表单提交
- 表单验证
- 表单样式
- 扩展组件
- 自定义组件
- get参数
- 剪贴板
- 表情选择
- 图表
- 拾色器
- 二维码生成
- 光标控制
- 数据验证
- MD5
- loading
- 预览图片
- 图标库
- COOKIE
- 百度地图
- 城市选择
- Vuejs
- jQuery
- 播放器
- 幻灯片
- axios
- 代码高亮
- 阿里云OSS
- 验证码
- 正则表达式
- 工具函数
- 编辑器
- 百度编辑器
- markdown
- simplemde-markdow