Datetimerange的使用详解

一、Datetimeranger

Datetimerange是一种时间区间选择器，可以方便地选择起始时间和结束时间。Datetimeranger可以显示为一个时间输入框加上一个选择按钮，点击选择按钮可以弹出时间选择器。Datetimeranger的使用非常简单，只需要引入相应的js和css文件，并且对相应的html元素进行初始化即可。

<link rel="stylesheet" type="text/css" href="datetimepicker.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="datetimepicker.js"></script>
<input class="date-picker" type="text"/>

$('.date-picker').datetimepicker({
    timepicker:false,
    format:'Y-m-d'
});

上面的代码中，我们先引入了相应的js和css文件，然后初始化一个input元素，并且指定了其class为date-picker。在代码的最下面，我们使用jQuery选择器选中了所有class为date-picker的input元素，并且调用datetimepicker函数对其进行初始化。在初始化函数中，我们将timepicker设置为false，表示不需要选择时间，只需要选择日期。同时，我们设置日期的格式为Y-m-d，其中Y表示年份，m表示月份，d表示天数。

二、Datetimerange直接区间

当我们需要选择两个不同的时间区间时，我们可以使用Datetimerange直接区间。Datetimerange直接区间可以通过两个时间选择器组成，一个选择起始时间，另一个选择结束时间。与Datetimeranger相似，Datetimerange直接区间也可以简单地进行初始化。

<link rel="stylesheet" type="text/css" href="datetimepicker.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="datetimepicker.js"></script>
<input class="datetime-from" type="text"/>
<input class="datetime-to" type="text"/>

$('.datetime-from, .datetime-to').datetimepicker({
    formatDate:'Y/m/d H:i',
    formatTime:'H:i',
    dayOfWeekStart : 1,
    allowBlank:true,
    lang:'en'
});

上述代码中，我们首先引入了相应的js和css文件，并且初始化了两个input元素，并且指定其class分别为datetime-from和datetime-to。在初始化函数中，我们可以设置formatDate表示日期的格式为Y/m/d H:i，同时我们设置formatTime表示时间的格式为H:i，dayOfWeekStart表示一周从星期一开始计算，allowBlank表示允许为空，lang表示语言为英文。

三、Datetimerangepicker选取

Datetimerangepicker选取是一种更加高级的时间区间选择方式，它可以展示一个可拖拽的时间区间选择界面，可以方便地选取一个时间区间。Datetimerangepicker选取界面可以在初始化时设置相应的属性，如下所示。

<link rel="stylesheet" type="text/css" href="daterangepicker.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.min.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>

$('input[name="daterange"]').daterangepicker({
    locale: {
      format: 'YYYY-MM-DD'
    },
    startDate: '2021-01-01',
    endDate: '2022-01-01'
}, function(start, end, label) {
  alert("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});

在上述代码中，我们首先引入了相应的js和css文件，然后初始化了一个input元素，其name属性为daterange。在初始化函数中，我们设置了日期格式为YYYY-MM-DD，开始日期为2021-01-01，结束日期为2022-01-01。同时，我们还可以设置回调函数，在选取新的日期区间后可以进行一些操作，如上面的代码中用一个弹窗显示新的日期区间。

四、Datetimerange简单实例

下面是一个包含Datetimeranger和Datetimerange直接区间的简单实例。

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="datetimepicker.css">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="datetimepicker.js"></script>
    <script type="text/javascript" src="moment.min.js"></script>
    <link rel="stylesheet" type="text/css" href="daterangepicker.css" />
    <script type="text/javascript" src="daterangepicker.js"></script>
  </head>
  <body>
    <input class="date-picker" type="text"/>
    <input class="datetime-from" type="text"/>
    <input class="datetime-to" type="text"/>
    <input type="text" name="daterange" value="2021-01-01 - 2022-01-01" />
    <script>
      $('.date-picker').datetimepicker({
          timepicker:false,
          format:'Y-m-d'
      });
    
      $('.datetime-from, .datetime-to').datetimepicker({
          formatDate:'Y/m/d H:i',
          formatTime:'H:i',
          dayOfWeekStart : 1,
          allowBlank:true,
          lang:'en'
      });
    
      $('input[name="daterange"]').daterangepicker({
          locale: {
            format: 'YYYY-MM-DD'
          },
          startDate: '2021-01-01',
          endDate: '2022-01-01'
      }, function(start, end, label) {
        alert("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
      });
    </script>
  </body>
</html>

五、结语

本文详细地介绍了Datetimerange的使用方法，包括Datetimeranger、Datetimerange直接区间和Datetimerangepicker选取三种方式，还给出了一个简单的实例方便读者理解和使用。使用Datetimerange可以方便地进行日期和时间的选择，是现代web应用中常用的功能之一。

原创文章，作者：AYNO，如若转载，请注明出处：https://www.506064.com/n/143255.html