Heim > Web-Frontend > js-Tutorial > Bootstrap-Zeit-Plug-in-Daterangepicker-Analyse

Bootstrap-Zeit-Plug-in-Daterangepicker-Analyse

小云云
Freigeben: 2018-05-15 16:24:14
Original
1811 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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage