日時範囲選択プラグインについて：daterangepickerの使い方まとめ-jsチュートリアル-php.cn

日時範囲選択プラグインについて：daterangepickerの使い方まとめ

小云云

リリース： 2017-12-29 09:24:41

オリジナル

4249 人が閲覧しました

プロジェクトでは、日付と時刻の範囲選択を使用してデータをフィルタリングする必要があります。これは、年、月、日、時、分、秒まで正確です。最初は、layui の時刻と日付の選択プラグインを使用しました。しかし、IIE8 を初めてクリックしたときに、設定形式のエラーが報告されました。長い間解決していませんでしたが、私が書いたデモは問題なく実行できると確信しています。 IE8; 私のプロジェクト環境では一部のコードが競合していたため、ブートストラッププラグインの daterangepicker に切り替えました。ドキュメントと公式 Web サイトを組み合わせました。; 基本的には完了です。 daterangepicker プラグインを使用する初心者の参考になれば幸いです。

概要は 4 つの部分に分かれています: 日付範囲選択の実装、日付時刻選択、2 つの単一カレンダーを使用して範囲選択を実装、input の代わりに p を使用して日付時刻選択を実装します。コードは次のとおりです

CSS コード

<style type="text/css">
 body,
 ul,
 p,
 h3,
 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;
 }
 .pDateSelect{
  width: 185px;
  height: 50px;
  line-height: 50px;
  margin:10px auto;
  border:2px solid #ddd;
  border-radius: 5px;
 }
 </style>

ログイン後にコピー

html コード:

<!-- 日期时间范围选择代码 -->
 <p class="box">
  <label for="datePicker">双日历</label>
  <input type="text" name="datePicker" class="datePicker" id="datePicker">
 </p>
 <!-- 日期时间选择代码 -->
 <p class="box">
  <label for="singledatePicker">单日历</label>
  <input type="text" name="singledatePicker" class="singledatePicker" id="singledatePicker">
 </p>
 <!-- 两个单日历实现日期时间范围选择代码 -->
 <p 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">
 </p>
 <!-- 不使用input,用p实现代码 -->
 <p class="pDateSelect" id="pDateSelect">
   <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
  <span></span> <b class="caret"></b>
 </p>

ログイン後にコピー

js コード。HTML の 4 つの部分に上から下に対応します

$('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'));
 });

ログイン後にコピー

rree

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();

ログイン後にコピー

レンダリング:

最初の部分:

2 番目の部分:

3 番目の部分は、最初の部分を実装するための 2 つの第 2 部分のグループ。その結果、開始日が決定された後、終了日の最大選択日が設定されます。 ;

パート 4:

key オプション意味はコード内でコメントされています。インポートされたファイル css には、bootstrap の css ファイルが含まれます。

備考:

1 moment.js 配列のindexOf()メソッドが使用されていますが、IE8はそれをサポートしていません;コードアドレスはhttps://developer.mozilla.org/zhです。 -CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf ポリフィル内

2 IE8 では、デュアルカレンダーの範囲選択で 2 つのカレンダーが垂直に配置される問題があります。 2 つのカレンダーを格納するボックスの幅を固定し、2 つのカレンダーを配置するだけです。カレンダーの p を float:left;

3 公式 Web サイトのオプション設定: http:/ /www.daterangepicker.com/#options

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