Exemples détaillés d'utilisation du plug-in jQuery dateRangePicker

Cet article présente principalement en détail l'utilisation du plug-in jQuery dateRangePicker. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Résumé de l'utilisation du plug-in jQuery dateRangePicker.

Description de la version :

Version actuelle : 2.1.25

Note spéciale : Différentes versions, certaines API peuvent changer, ce qui nécessite une attention particulière

Rendu

Extraits de code clé

$("#dateTimeRange span").html(moment().subtract(1, 'hours').format('YYYY-MM-DD HH:mm') + '~' + moment().format('YYYY-MM-DD HH:mm')); 
  $("#dateTimeRange").daterangepicker({ 
    maxDate : moment(), //最大时间 
    dateLimit : { 
      days : 30 
    }, //起止时间的最大间隔 
    showDropdowns : true, 
    showWeekNumbers : false, //是否显示第几周 
    timePicker : true, //是否显示小时和分钟 
    timePickerIncrement : 60, //时间的增量，单位为分钟 
    timePicker12Hour : false, //是否使用12小时制来显示时间 
    ranges : { 
      '最近1小时': [moment().subtract(1, 'hours'), moment()], 
      '今日': [moment().startOf('day'), moment()], 
      '昨日': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')], 
      '最近7日': [moment().subtract(6, 'days'), moment()], 
      '最近30日': [moment().subtract(29, 'days'), moment()] 
    }, 
    opens : 'right', //日期选择框的弹出位置 
    buttonClasses : ['btn btn-default'], 
    applyClass : 'btn-small btn-primary blue', 
    cancelClass : 'btn-small', 
    locale : { 
      applyLabel : '确定', 
      cancelLabel : '取消', 
      fromLabel : '起始时间', 
      toLabel : '结束时间', 
      customRangeLabel : '自定义', 
      daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ], 
      monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月', 
        '七月', '八月', '九月', '十月', '十一月', '十二月' ], 
      firstDay : 1 
    } 
  }, function(start, end, label) { 
    // 格式化日期显示框 
    $("#dateTimeRange span").html(start.subtract(1, 'hours').format('YYYY-MM-DD HH:mm') + '~' + end.format('YYYY-MM-DD HH:mm')); 
  });

html :

<p class="inline"> 
      <label>时间段:</label> 
      <p class="date-picker form-inline-control" id="dateTimeRange"> 
        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> 
        <span id="searchDateRange"></span> 
        <b class="caret"></b> 
      </p> 
    </p>

Recommandations associées :

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

Sélecteur de date de l'interface utilisateur JQuery Explication détaillée de Datepicker

Exemple de partage de jQuery pour implémenter une fonction de formatage de date simple

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!