jQuery dateRangePicker插件使用方法详解

介绍

jQuery dateRangePicker是一个时间范围选择器插件，它提供了很多功能和选项来自定义时间范围选择器，可以用于各种类型的应用程序和网站。

安装

安装jQuery
dateRangePicker插件依赖于jQuery，如果你没有引入jQuery，那么你需要先引入jQuery。可以从官网下载，也可以通过CDN进行引入。

```html

```

安装dateRangePicker插件
可以从官网下载或添加CDN引入，如下所示：

```html

```

基本使用

使用dateRangePicker可以非常方便地建立一个可交互的日期范围选择器。示例：

$('input[name="daterange"]').daterangepicker();

上面的代码将把页面上所有name为”daterange”的input元素都转换成可交互的日期范围选择器。

参数配置

dateRangePicker插件有很多参数可以进行配置，可以按照自己的需求自定义时间范围选择器。下面介绍一些常见的参数配置。

minDate和maxDate

可以通过minDate和maxDate参数来指定选择日期的最小值和最大值。示例：

$('input[name="daterange"]').daterangepicker({
  minDate: '2020-01-01',    // 最小日期
  maxDate: '2021-12-31'     // 最大日期
});

startDate和endDate

可以通过startDate和endDate参数来设置时间范围选择器的初始值。示例：

$('input[name="daterange"]').daterangepicker({
  startDate: '2020-01-01',  // 范围选择器初始日期
  endDate: '2020-12-31'     // 范围选择器初始日期
});

locale

可以通过locale参数来设置时间范围选择器的语言，支持中文等多种语言。示例：

$('input[name="daterange"]').daterangepicker({
  'locale': {
    'format': 'YYYY-MM-DD',  // 日期格式
    'separator': ' - ',      // 分隔符
    'applyLabel': '确定',    // 确定按钮文本
    'cancelLabel': '取消',   // 取消按钮文本
    'fromLabel': '从',       // 开始日期文本
    'toLabel': '到',         // 结束日期文本
    'customRangeLabel': '自定义时间范围',   // 自定义时间范围文本
    'weekLabel': '周',      // 一周文本
    'daysOfWeek': ['日', '一', '二', '三', '四', '五', '六'],  // 日期一周的星期文本
    'monthNames': ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], // 月份文本
    'firstDay': 1           // 第一列为星期文本
  }
});

示例

示例1

在这个示例中，我们展示如何将时间范围选择器绑定到按钮上，并且在选择时间范围后展示一个弹窗显示选择的时间范围。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>日期范围选择器示例</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  </head>
  <body>
    <input type="text" name="daterange" value="2020-01-01 - 2020-12-31" />
    <button id="submit-btn">提交</button>
    <script>
      $(document).ready(function() {
        $('input[name="daterange"]').daterangepicker();
        $("#submit-btn").click(function(){
          var dateRange = $('input[name="daterange"]').val();
          alert('你选择的时间范围是：' + dateRange);
        });
      });
    </script>
  </body>
</html>

示例2

在这个示例中，我们展示如何将时间范围选择器绑定到一个form表单上，并且在提交表单时获取选择的时间范围。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>日期范围选择器示例</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  </head>
  <body>
    <form id="date-form">
      <input type="text" name="daterange" value="2020-01-01 - 2020-12-31" />
      <button type="submit">提交</button>
    </form>
    <script>
      $(document).ready(function() {
        $('input[name="daterange"]').daterangepicker();
        $("#date-form").submit(function(event){
          event.preventDefault();
          var dateRange = $('input[name="daterange"]').val();
          alert('你选择的时间范围是：' + dateRange);
        });
      });
    </script>
  </body>
</html>

在这个示例中，我们通过event.preventDefault()阻止表单的默认提交行为，然后通过alert()展示选择的时间范围。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery dateRangePicker插件使用方法详解 - Python技术站

jQuery dateRangePicker插件使用方法详解

jQuery dateRangePicker插件使用方法详解

介绍

安装

基本使用

参数配置

minDate和maxDate

startDate和endDate

locale

示例

示例1

示例2

相关文章