À propos du plug-in de sélection de plage de dates et d'heures : résumé de l'utilisation de daterangepicker

Dans le projet, la sélection de la date et de la plage horaire est utilisée pour filtrer les données ; elle est précise à l'année, au mois, au jour, à l'heure, à la minute et à la seconde au début, le plug-in de sélection d'heure et de date de layui a été utilisé ; un premier clic sur IIE8 a signalé une erreur de format de paramètre ; recherché Cela n'a pas été résolu depuis longtemps, mais je suis sûr que ce n'est pas un problème avec layui car la démo que j'ai écrite peut fonctionner dans IE8 ; dans mon environnement de projet ; je suis donc passé au plug-in daterangepicker ; j'ai lu beaucoup d'informations combinées avec le site officiel, j'ai le document, c'est pratiquement terminé ; j'espère que cela sera utile aux débutants utilisant le plug-in daterangepicker.

Le résumé est divisé en quatre parties : mise en œuvre de la sélection de plage de dates, sélection de date et d'heure, utilisation de deux calendriers simples pour implémenter la sélection de plage, utilisation de p au lieu d'entrée pour implémenter la sélection de date et d'heure

Code 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>

code 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>

code js, correspondant aux quatre parties du html dans l'ordre du haut et du bas

$('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) {
  $('#pDateSelect span').html(start.format('YYYY-MM-DD HH:mm:ss'));
 }
 $('#pDateSelect').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);

Rendu :

La première partie :

La deuxième partie :

La troisième partie est Les deux groupes de la deuxième partie obtiennent l'effet de la première partie ; le principe est qu'une fois la date de début déterminée, définissez la date de sélection minimale pour le calendrier de la date de fin ; sélectionné, définissez la date de sélection maximale pour la date de début ;

Partie 4 :

La signification des options clés a été commentée dans le code ; le fichier css importé inclut le fichier css bootstrap ; le fichier css daterangepicker ; js inclut les js de jquery ;les js de bootstrap;les js et moment.js de daterangepicker ;

Remarques :

1 moment.js utilise la méthode indexOf() du tableau ; mais IE8 ne la prend pas en charge ; le code de compatibilité doit être introduit ; /indexOf Sous polyfill;

2 Sous IE8 ; la sélection d'une double plage de calendrier apparaît. Le problème de la disposition verticale de deux calendriers est de définir une largeur fixe pour la boîte stockant les deux calendriers, ce qui est suffisant pour s'adapter. le p des deux calendriers ; puis définissez le p des deux calendriers sur float:left

3 Adresse officielle du site Web ; paramètres d'option : http://www.daterangepicker.com/#options　

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

Recommandations associées :

Explication détaillée du sélecteur de date et d'heure du sélecteur

Implémentation Vue.js de l'expérience de développement de composants de sélection de temps iOS natifs

Sélecteur de temps php-datepicker, requête de paramètres SQL

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!