1.引入腳本

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="assets/dist/css/bootstrap-datetimepicker.css" /> <script src="assets/js/jquery-2.1.0.js"></script> <script src="assets/dist/js/bootstrap-datetimepicker.js"></script> <script src="assets/dist/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

2.html代碼

<div class="controls input-append date form_datetime" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1"><input size="16" type="text" value="" readonly><span class="add-on"><i class="icon-remove"></i></span><span class="add-on"><i class="icon-th"></i></span></div>

3.腳本代碼

$('.form_datetime').datetimepicker({language: 'zh-CN',weekStart: 1,todayBtn: 1,autoclose: 1,todayHighlight: 1,startView: 2,forceParse: 0,showMeridian: 1});

一些參數

<script type="text/javascript">$(document).ready(function (){//時間插件$('#reportrange span').html(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'));$('#reportrange').daterangepicker({// startDate: moment().startOf('day'),//endDate: moment(),//minDate: '01/01/2012', //最小時間maxDate : moment(), //最大時間 dateLimit : {days : 30}, //起止時間的最大間隔showDropdowns : true,showWeekNumbers : false, //是否顯示第幾周timePicker : true, //是否顯示小時和分鐘timePickerIncrement : 60, //時間的增量，單位為分鐘timePicker12Hour : false, //是否使用12小時制來顯示時間 ranges : {//'最近1小時': [moment().subtract('hours',1), moment()],'今日': [moment().startOf('day'), moment()],'昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],'最近7日': [moment().subtract('days', 6), moment()],'最近30日': [moment().subtract('days', 29), moment()]},opens : 'right', //日期選擇框的彈出位置buttonClasses : [ 'btn btn-default' ],applyClass : 'btn-small btn-primary blue',cancelClass : 'btn-small',format : 'YYYY-MM-DD HH:mm:ss', //控件中from和to 顯示的日期格式separator : ' to ',locale : {applyLabel : '確定',cancelLabel : '取消',fromLabel : '起始時間',toLabel : '結束時間',customRangeLabel : '自定義',daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月' ],firstDay : 1}}, function(start, end, label) {//格式化日期顯示框$('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));});//設置日期菜單被選項 --開始--/*var dateOption ;if("${riqi}"=='day') {dateOption = "今日";}else if("${riqi}"=='yday') {dateOption = "昨日";}else if("${riqi}"=='week'){dateOption ="最近7日";}else if("${riqi}"=='month'){dateOption ="最近30日";}else if("${riqi}"=='year'){dateOption ="最近一年";}else{dateOption = "自定義";}$(".daterangepicker").find("li").each(function (){if($(this).hasClass("active")){$(this).removeClass("active");}if(dateOption==$(this).html()){$(this).addClass("active");}});*///設置日期菜單被選項 --結束-- }) </script>

?

轉載于:https://www.cnblogs.com/wush-1215/p/10761062.html

總結

以上是生活随笔為你收集整理的bootstrap_bootstrap中日历范围选择插件daterangepicker的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。