Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析

Bootstrap时间选择器（datetimepicker）和日期范围选择器（daterangepicker）是基于Bootstrap框架的时间和日期选择器插件，能够让用户轻松快速地选择时间和日期。在本文中，我们将详细讲解如何使用datetimepicker和daterangepicker插件，并提供两个使用实例。

datetimepicker

datetimepicker插件是一个基于Bootstrap框架的时间选择器插件，支持选择小时、分钟、秒和日期（年、月、日）。下面是datetimepicker的使用方式。

引入依赖文件

```html

```

创建时间选择器容器

```html

选择时间

```

初始化datetimepicker插件

javascript $(function () { $('#datetimepicker1').datetimepicker(); });

下面是一个完整的datetimepicker实例，可以在时间选择器中选择日期和时间，并且可以通过设置选项来限制可选日期和时间。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>datetimepicker实例</title>
  <!-- jQuery依赖文件 -->
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <!-- Bootstrap JS依赖文件 -->
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- datetimepicker JS依赖文件 -->
  <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
  <!-- datetimepicker CSS依赖文件 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
</head>
<body>
  <div class="container" style="padding: 50px;">
    <h3>datetimepicker实例</h3>
    <div class="form-group">
      <label>选择时间</label>
      <div class='input-group date' id='datetimepicker1'>
        <input type='text' class="form-control" value="" />
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
      </div>
    </div>
    <div class="form-group">
      <label>限制可选时间</label>
      <div class='input-group date' id='datetimepicker2'>
        <input type='text' class="form-control" value="" />
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
      </div>
    </div>
    <div class="form-group">
      <label>仅选择日期</label>
      <div class='input-group date' id='datetimepicker3'>
        <input type='text' class="form-control" value="" />
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
      </div>
    </div>
  </div>
  <script type="text/javascript">
  $(function () {
    $('#datetimepicker1').datetimepicker();
    $('#datetimepicker2').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss',
        minDate: '2019-01-01',
        maxDate: '2021-12-31',
    });
    $('#datetimepicker3').datetimepicker({
      format: 'YYYY-MM-DD',
      pickTime: false,
    });
  });
  </script>
</body>
</html>

daterangepicker

daterangepicker插件是一个基于Bootstrap框架的日期范围选择器插件，支持选择起始日期和结束日期。下面是daterangepicker的使用方式。

引入依赖文件

```html

```

创建日期范围选择器容器

```html

选择日期范围

```

初始化daterangepicker插件

javascript $(function () { $('input[name="daterange"]').daterangepicker(); });

下面是一个完整的daterangepicker实例，可以在日期范围选择器中选择起始日期和结束日期，并且可以通过设置选项来限制可选日期和时间。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>daterangepicker实例</title>
  <!-- jQuery依赖文件 -->
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <!-- moment.js依赖文件 -->
  <script src="https://cdn.bootcss.com/moment.js/2.22.2/moment.min.js"></script>
  <!-- Bootstrap JS依赖文件 -->
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- daterangepicker JS依赖文件 -->
  <script src="https://cdn.bootcss.com/bootstrap-daterangepicker/3.0.3/daterangepicker.min.js"></script>
  <!-- daterangepicker CSS依赖文件 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-daterangepicker/3.0.3/daterangepicker.min.css">
</head>
<body>
  <div class="container" style="padding: 50px;">
    <h3>daterangepicker实例</h3>
    <form>
      <div class="form-group">
        <label>选择日期范围</label>
        <div class="input-group">
          <input type="text" class="form-control" name="daterange" value=""/>
          <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
      </div>
      <div class="form-group">
        <label>限制可选日期范围</label>
        <div class="input-group">
          <input type="text" class="form-control" name="daterange2" value=""/>
          <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
      </div>
    </form>
  </div>
  <script type="text/javascript">
  $(function () {
    $('input[name="daterange"]').daterangepicker();
    $('input[name="daterange2"]').daterangepicker({
      minDate: '2019-01-01',
      maxDate: '2021-12-31',
      locale: {
        format: 'YYYY-MM-DD',
        separator: ' ~ ',
        applyLabel: '确认',
        cancelLabel: '取消',
        fromLabel: '开始日期',
        toLabel: '结束日期',
        customRangeLabel: '自定义',
        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        firstDay: 1,
      },
    });
  });
  </script>
</body>
</html>

以上是datetimepicker和daterangepicker的使用实例，希望对读者有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析 - Python技术站