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/zh-hk/n/143255.html