欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

工作日历(daterangepicker)笔记

程序员文章站 2022-05-18 07:55:07
...

HTML

<div id="reportrange" class="pull-right dateRange"
             style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
             <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> 
             <span></span> <b class="caret"></b>
             <input type="text" name="Monthlycycle" id="Monthlycycle" style="display:none">
            </div>

Js初始化部分

//调用
$(function() {
 loading_control.loading_show();
 // 初始化日历插件
 initdaterangepicker();
});

/**
 * 初始化日历插件
 */
var initdaterangepicker = function() {
 var start = moment().startOf('month');
    var end = moment();

 function cb(start, end) {
  $('#reportrange span').html(
    start.format('YYYY-MM-DD') + '  - -  '
      + end.format('YYYY-MM-DD'));
  startTime = start.format('YYYY-MM-DD');
  endTime = end.format('YYYY-MM-DD');
 }

 $('#reportrange').daterangepicker(
   {
    startDate : start,
    endDate : end,
    locale : {
     format : 'YYYY-MM-DD',
     separator : ' - ',
     applyLabel : '确定',
     cancelLabel : '取消',
     weekLabel : 'W',
     customRangeLabel : '选择日期',
     fromLabel : '起始时间',
     toLabel : '结束时间',
     daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
     monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月',
       '八月', '九月', '十月', '十一月', '十二' ]
    },
    opens : 'left', // 日期选择框的弹出位置
    ranges : {
     '今日' : [ moment(), moment() ],
     '昨日' : [ moment().subtract(1, 'days'),
       moment().subtract(1, 'days') ],
     '近七日' : [ moment().subtract(6, 'days'), moment() ],
     '近三十日' : [ moment().subtract(29, 'days'), moment() ],
     '本月' : [ moment().startOf('month'), moment() ],
     '上个月' : [ moment().subtract(1, 'month').startOf('month'),
       moment().subtract(1, 'month').endOf('month') ]
    }
   }, cb);

 cb(start, end);
}