daterangepicker 是Bootstrap的一个时间日期选择插件,跟Bootstrap风格很好的结合在一起,用起来也比较方便,整理了该插件的简单使用和参数说明:
该插件基于 Bootstrap, Moment.js and jQuery 。
项目地址

基本的调用方法:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />
<script type="text/javascript">
$(document).ready(function() {
  $('input[name="daterange"]').daterangepicker();
});
</script> 

参数

  • startDate: (日期对象、实践对象或者字符串)初始开始时间
  • endDate: (日期对象、实践对象或者字符串) 初始结束时间
  • minDate: (日期对象、实践对象或者字符串) 可选最早时间
  • maxDate: (日期对象、实践对象或者字符串) 可选最晚时间
  • dateLimit: (对象) 选择开始日期和结束日期之间的最大跨度
  • timeZone: (字符串或数字) 时区,默认为本地时区
  • showDropdowns: (布尔) 在年月份选择框上面显示可以跳刀特定月份的选择
  • showWeekNumbers: (布尔) 日历的每周前显示周数
  • timePicker: (布尔) 是否显示时间选择框
  • timePickerIncrement: (数字) 步长
  • timePicker12Hour: (布尔) 使用12小时制替代24小时,并添加AM/PM下拉框选项
  • timePickerSeconds: (布尔) 时间选择框是否显示秒数
  • ranges: (对象) 设定预定义日期范围
  • opens: (字符串: 'left'/'right'/'center')选择相对日期框的相对位置
  • buttonClasses: (数组) 自定义按钮样式
  • applyClass: (字符串) 自定义按钮样式(apply/应用)
  • cancelClass: (字符串) 自定义按钮样式(cancle/取消)
  • format: (字符串) Date/time 结果时间格式
  • separator: (字符串) 开始时间和结束时间的分割字符
  • locale: (对象) 本地化
  • singleDatePicker: (布尔) 只显示一个时间
  • parentEl: (string) 容器,缺省为body

官方的一个DEMO

DEMO

Tags: daterangepicker, bootstrap

Related Posts:
  • [尚无相关文章]

3 Comments »

  1. jiangl

    请问下如何改写为年月视图,不要日视图。呢?

    1. 官方没有给出这个配置,年月选择没必要用这个,略显复杂

    2. dou

      有,maxview,minview设置,自己看文档

Leave a Comment