Bootstrap time plug-in daterangepicker analysis-JS Tutorial-php.cn

Bootstrap time plug-in daterangepicker analysis

小云云

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

Original

1778 people have browsed it

This article mainly introduces the use of bootstrap time plug-in daterangepicker in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Plug-in download address: https://github.com/dangrossman/bootstrap-daterangepicker

Header introduction file:

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

Copy after login

Related configuration:

$(&#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" //日历表"取消"按钮类名
  });

Copy after login

Related recommendations:

js time plug-in_html/css_WEB-ITnose

How to use the combination of JS replacement and time plug-in_javascript skills

Input box selection time plug-in usage example implemented by jQuery_jquery

The above is the detailed content of Bootstrap time plug-in daterangepicker analysis. For more information, please follow other related articles on the PHP Chinese website!