日期時間范圍選擇插件daterangepicker怎么用-創(chuàng)新互聯(lián)

這篇文章主要介紹了日期時間范圍選擇插件daterangepicker怎么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

我們擁有十余年網頁設計和網站建設經驗，從網站策劃到網站制作，我們的網頁設計師為您提供的解決方案。為企業(yè)提供網站建設、成都做網站、微信開發(fā)、小程序制作、手機網站開發(fā)、H5網站設計、等業(yè)務。無論您有什么樣的網站設計或者設計方案要求，我們都將富于創(chuàng)造性的提供專業(yè)設計服務并滿足您的需求。

分為四個部分：日期范圍選擇實現，日期時間選擇，使用兩個單日歷實現范圍選擇，使用div代替input實現日期時間選擇；下面是代碼

css 代碼

<style type="text/css">
 body,
 ul,
 p,
 h4,
 img,
 input {
  margin: 0;
  padding: 0;
 }

 .box {
  display: block;
  text-align: center;
  margin: 20px auto;
 }

 input {
  width: 400px;
  height: 40px;
 }

 label {
  display: inline-block;
  width: 90px;
  line-height: 40px;
  height: 40px;
  margin: 0;
  font-weight: normal;
  font-family: "宋體";
  background-color: #ddd;
 }
 .divDateSelect{
  width: 185px;
  height: 50px;
  line-height: 50px;
  margin:10px auto;
  border:2px solid #ddd;
  border-radius: 5px;
 }
 </style>

html代碼:

<!-- 日期時間范圍選擇代碼 -->
 <div class="box">
  <label for="datePicker">雙日歷</label>
  <input type="text" name="datePicker" class="datePicker" id="datePicker">
 </div>
 <!-- 日期時間選擇代碼 -->
 <div class="box">
  <label for="singledatePicker">單日歷</label>
  <input type="text" name="singledatePicker" class="singledatePicker" id="singledatePicker">
 </div>
 <!-- 兩個單日歷實現日期時間范圍選擇代碼 -->
 <div class="box">
  <label for="from">從</label>
  <input type="text" name="from" class="from" id="from">
  <label for="to">到</label>
  <input type="text" name="to" class="to" id="to">
 </div>
 <!-- 不使用input,用div實現代碼 -->
 <div class="divDateSelect" id="divDateSelect">
  &nbsp;<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
  <span></span> <b class="caret"></b>
 </div>

js 代碼，按照上下順序對應html四部分

$('input[name="datePicker"]').daterangepicker({
  timePicker: true, //顯示時間
  timePicker24Hour: true, //時間制
  timePickerSeconds: true, //時間顯示到秒
  startDate: moment().hours(0).minutes(0).seconds(0), //設置開始日期
  endDate: moment(new Date()), //設置結束器日期
  maxDate: moment(new Date()), //設置大日期
  "opens": "center",
  ranges: {
   // '今天': [moment(), moment()],
   '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
   '上周': [moment().subtract(6, 'days'), moment()],
   '前30天': [moment().subtract(29, 'days'), moment()],
   '本月': [moment().startOf('month'), moment().endOf('month')],
   '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  },
  showWeekNumbers: true,
  locale: {
   format: "YYYY-MM-DD HH:mm:ss", //設置顯示格式
   applyLabel: '確定', //確定按鈕文本
   cancelLabel: '取消', //取消按鈕文本
   customRangeLabel: '自定義',
   daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
   monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
    '七月', '八月', '九月', '十月', '十一月', '十二月'
   ],
   firstDay: 1
  },
 }, function(start, end, label) {
  timeRangeChange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')];
  console.log(timeRangeChange);
 });
$('input[name="singledatePicker"]').daterangepicker({
  "autoApply": true, //選擇日期后自動提交;只有在不顯示時間的時候起作用timePicker:false
  singleDatePicker: true, //單日歷
  showDropdowns: true, //年月份下拉框
  timePicker: true, //顯示時間
  timePicker24Hour: true, //時間制
  timePickerSeconds: true, //時間顯示到秒
  startDate: moment().hours(0).minutes(0).seconds(0), //設置開始日期
  maxDate: moment(new Date()), //設置大日期
  "opens": "center",
  showWeekNumbers: true,
  locale: {
   format: "YYYY-MM-DD HH:mm:ss", //設置顯示格式
   applyLabel: '確定', //確定按鈕文本
   cancelLabel: '取消', //取消按鈕文本
   daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
   monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
    '七月', '八月', '九月', '十月', '十一月', '十二月'
   ],
   firstDay: 1
  },
 }, function(start) {
  console.log(start.format('YYYY-MM-DD HH:mm:ss'));
 });
var minDate = null;
 var max = null;
 function fromDate(maxDate) {
  if(!maxDate){
   max = moment(new Date())
  }else{
   max = maxDate;
  }
  $('input[name="from"]').daterangepicker({
   "autoApply": true, //選擇日期后自動提交;只有在不顯示時間的時候起作用timePicker:false
   singleDatePicker: true, //單日歷
   showDropdowns: true, //年月份下拉框
   timePicker: true, //顯示時間
   timePicker24Hour: true, //時間制
   timePickerSeconds: true, //時間顯示到秒
   // startDate: moment().hours(0).minutes(0).seconds(0), //設置開始日期
   maxDate: max , //設置大日期
   "opens": "center",
   showWeekNumbers: true,
   locale: {
    format: "YYYY-MM-DD HH:mm:ss", //設置顯示格式
    applyLabel: '確定', //確定按鈕文本
    cancelLabel: '取消', //取消按鈕文本
    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
     '七月', '八月', '九月', '十月', '十一月', '十二月'
    ],
    firstDay: 1
   },
  }, function(s) {
   toDate(s);
  });
 }
 fromDate()
 function toDate(minDate) {
  $('input[name="to"]').daterangepicker({
   "autoApply": true, //選擇日期后自動提交;只有在不顯示時間的時候起作用timePicker:false
   singleDatePicker: true, //單日歷
   showDropdowns: true, //年月份下拉框
   timePicker: true, //顯示時間
   timePicker24Hour: true, //時間制
   timePickerSeconds: true, //時間顯示到秒
   // startDate: moment().hours(0).minutes(0).seconds(0), //設置開始日期
   maxDate: moment(new Date()), //設置大日期
   minDate: minDate,
   "opens": "center",
   showWeekNumbers: true,
   locale: {
    format: "YYYY-MM-DD HH:mm:ss", //設置顯示格式
    applyLabel: '確定', //確定按鈕文本
    cancelLabel: '取消', //取消按鈕文本
    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
     '七月', '八月', '九月', '十月', '十一月', '十二月'
    ],
    firstDay: 1
   },
  }, function(s) {
   fromDate(s)
  });
 }
 toDate();
var start = moment(new Date());
 function cb(start) {
  $('#divDateSelect span').html(start.format('YYYY-MM-DD HH:mm:ss'));
 }
 $('#divDateSelect').daterangepicker({
  "autoApply": true, //選擇日期后自動提交;只有在不顯示時間的時候起作用timePicker:false
  singleDatePicker: true, //單日歷
  showDropdowns: true, //年月份下拉框
  // timePicker: true, //顯示時間
  timePicker24Hour: true, //時間制
  timePickerSeconds: true, //時間顯示到秒
  startDate: moment().hours(0).minutes(0).seconds(0), //設置開始日期
  maxDate: moment(new Date()), //設置大日期
  "opens": "center",
  showWeekNumbers: true,
  locale: {
   format: "YYYY-MM-DD HH:mm:ss", //設置顯示格式
   applyLabel: '確定', //確定按鈕文本
   cancelLabel: '取消', //取消按鈕文本
   daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
   monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
    '七月', '八月', '九月', '十月', '十一月', '十二月'
   ],
   firstDay: 1
  },
 }, cb);
 cb(start);

效果圖:

第一部分:

日期時間范圍選擇插件daterangepicker怎么用

第二部分:

日期時間范圍選擇插件daterangepicker怎么用

第三部分就是兩個第二部分組實現第一部分的效果;原理為在確定好開始日期后;設置選擇結束日期日歷的最小選擇日期;在結束日期選中后;設置開始日期的大選擇日期;

第四部分:

日期時間范圍選擇插件daterangepicker怎么用

關鍵選項的含義已經在代碼中注釋了;引入文件css包括bootstrap的css文件;daterangepicker的css文件;js包括jquery的js;bootstrap的js;daterangepicker的js以及moment.js;

備注：

1 moment.js使用了數組的indexOf()方法;但IE8不支持;需要引入兼容代碼;代碼地址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf　　在polyfill下;

2 在IE8下;雙日歷的范圍選擇出現連個日歷豎直排列問題;解決方法為給存放兩個日歷的盒子設置固定的寬度,足以放下兩個日歷的div;再把兩個日歷的div設置float:left即可;

3 官網地址;選項設置: http://www.daterangepicker.com/#options　　

例子: http://www.daterangepicker.com/#examples

感謝你能夠認真閱讀完這篇文章，希望小編分享的“日期時間范圍選擇插件daterangepicker怎么用”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網站設計公司，關注創(chuàng)新互聯(lián)成都網站設計公司行業(yè)資訊頻道，更多相關知識等著你來學習!

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、網站設計器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享標題：日期時間范圍選擇插件daterangepicker怎么用-創(chuàng)新互聯(lián)
文章URL：http://bm7419.com/article26/gdecg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供微信小程序、云服務器、ChatGPT、做網站、企業(yè)網站制作、商城網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

手機網站建設