Bootstrap-Zeit-Plug-in-Daterangepicker-Analyse-js-Tutorial-php.cn

Bootstrap-Zeit-Plug-in-Daterangepicker-Analyse

小云云

Freigeben： 2018-05-15 16:24:14

Original

1737 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Verwendung des Bootstrap-Time-Plug-Ins Daterangepicker vor. Ich hoffe, dass er jedem helfen kann.

Plug-in-Download-Adresse: https://github.com/dangrossman/bootstrap-daterangepicker

Header-Importdatei:

<link href=”http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css” rel=”stylesheet”>
<link rel=”stylesheet” type=”text/css” media=”all” href=”daterangepicker.css” />
<script type=”text/javascript” src=”http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js“></script>
<script type=”text/javascript” src=”http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js“></script>
<script type=”text/javascript” src=”moment.js“></script>
<script type=”text/javascript” src=”daterangepicker.js“></script>

Nach dem Login kopieren

Zugehörige Konfiguration:

$(&#39;#startDate&#39;).daterangepicker({  //绑定input元素 id="startDate"
     "startDate": "08/07/2015 - 08/17/2015", //默认选择开始时间
     "endDate": "08/17/2015", //默认选择结束时间
     //singleDatePicker: true, //显示单个日历表
     //"timePicker": true, //开启时、分
     //"showWeekNumbers": true, //显示第几周
     //"timePicker24Hour": true, //开启24小时制
     startDate: moment().subtract(10, &#39;days&#39;), //两个时间相隔时间
     "showDropdowns": true, //开启年月的选择
     ranges : { //快捷选择时间
      &#39;最近1小时&#39;: [moment().subtract(&#39;hours&#39;,1), moment()], 
      &#39;今日&#39;: [moment(), moment()], 
      &#39;昨日&#39;: [moment().subtract(&#39;days&#39;, 1).startOf(&#39;day&#39;), moment().subtract(&#39;days&#39;, 1).endOf(&#39;day&#39;)], 
      &#39;最近7日&#39;: [moment().subtract(&#39;days&#39;, 6), moment()], 
      &#39;最近30日&#39;: [moment().subtract(&#39;days&#39;, 29), moment()] 
     },
     locale : { //中文汉化
      applyLabel : &#39;确定&#39;, 
      cancelLabel : &#39;取消&#39;, 
      fromLabel : &#39;起始时间&#39;, 
      toLabel : &#39;结束时间&#39;, 
      customRangeLabel : &#39;自定义&#39;, 
      daysOfWeek : [&#39;日&#39;,&#39;一&#39;,&#39;二&#39;,&#39;三&#39;,&#39;四&#39;,&#39;五&#39;,&#39;六&#39;], 
      monthNames : [ &#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;, &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;,&#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;, &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39; ], 
      firstDay : 1 
     },
     // "opens": "left", //日历表的位置
     // "drops": "up", //日历表的位置
     // "buttonClasses": "button", //日历表"确定"按钮类名
     // "applyClass": "hover", //日历表"确定"按钮类名
     // "cancelClass": "cancel" //日历表"取消"按钮类名
  });

Nach dem Login kopieren

Verwandte Empfehlungen:

js time plug-in_html/css_WEB-ITnose

So verwenden Sie die Kombination aus JS-Ersatz und Time Plug -in_javascript-Kenntnisse

Beispiel für die Verwendung des Eingabefeld-Auswahlzeit-Plug-ins, implementiert durch jQuery_jquery

Das obige ist der detaillierte Inhalt vonBootstrap-Zeit-Plug-in-Daterangepicker-Analyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!