• 效果 Gif 图

    calendarRange 日历范围选择插件.gif

    • 源码 ``` // layout.less /375px布局/ /配合 js 计算的 rem 使用具体换算设计稿的 20px = 20 / @layremvalue/ @layremvalue: 100rem;
    • { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: calc(100vw / 7.5); } body { font-size: 0.28rem; font-family: ‘Helvetica Neue’, Helvetica, Arial, ‘PingFang SC’, ‘Hiragino Sans GB’, ‘Heiti SC’, ‘Microsoft YaHei’, ‘WenQuanYi Micro Hei’, sans-serif; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; padding: 0; margin: 0 auto; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); / 取消链接高亮 / background-color: #f1f5fb; } h1, h2, h3, h4, h5 { font-weight: normal; } a { text-decoration: none; color: inherit; } // 公用容器 .mainbox { padding-bottom: 98 / @layremvalue; overflow-y: auto; } /文本单行溢出隐藏/ .txtoneline { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /文本多行溢出隐藏 -webkit-line-clamp: 2; 溢出行数/ .txtmorline { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /表单元素统一初始化样式/ input, select, button { -webkit-appearance: none; /去除阴影/ border: 0; outline: 0; background-color: transparent; } .checkbox { -webkit-appearance: checkbox; } input[type=’checkbox’] { -webkit-appearance: checkbox; }

    /input palceholder 样式自定义/ / 使用webkit内核的浏览器 / input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999; } / Firefox版本4-18 / input::-moz-placeholder, textarea::-webkit-input-placeholder { color: #999; } / Firefox版本19+ / input:-ms-input-placeholder, textarea::-webkit-input-placeholder { color: #999; } /清除浮动/ .clearfix:after { content: ‘ ‘; display: block; height: 0; clear: both; } .clearfix { zoom: 1; } /IE6/7/ / 弹窗专用 禁止滚轮 滚动*/ .scrollnone { width: 100%; height: 100%; overflow: hidden; position: fixed; max-width: 640px; min-width: 320px; left: 0; right: 0; margin: auto; } // link 右箭头 .link-arrow-right { position: relative; &::before { content: ‘’; display: block; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; background: url(../img/sales/icon-rightarrow.png) center center no-repeat; width: 18 / @layremvalue; height: 30 /@layremvalue; background-size: 18 / @layremvalue 30 /@layremvalue; } }

    // calendarRange.less @import ‘/css/layout.css’; /配合 js 计算的 rem 使用具体换算设计稿的 20px = 20 / @layremvalue/ @layremvalue: 100rem; // 日历范围插件样式表 @activeColor: #4289fe; @middleColor: #ecf3fe;

    [id*=’id’], [id^=’id’] { height: (48 + 725 + 88) / @layremvalue; } .calendar-range { text-align: center; color: #2e4052; font-size: 32 / @layremvalue; position: relative; background-color: #fff; max-height: (48 + 725 + 88) / @layremvalue; .color-blue { color: @activeColor; } .calendar-week { display: flex; height: 48 / @layremvalue; .week-text { font-size: 24 / @layremvalue; flex: 100 / 7; line-height: 48 / @layremvalue; background-color: #fafafa; } } .calendar-scroll { overflow-y: auto; max-height: 725/@layremvalue; .scroll-content { padding: 15 / @layremvalue 0 0; div { float: left; } .content-title { width: 100%; line-height: 50 / @layremvalue; height: 50 / @layremvalue; color: #000000; font-size: 32 / @layremvalue; } .content-item { width: 100 / 7%; height: 112 / @layremvalue; line-height: 50 / @layremvalue; padding: 6 / @layremvalue 0; transition: all .2s; &-start, &-end { background-color: @activeColor; color: #fff; border-radius: 8 / @layremvalue; position: relative; &::before { content: ‘’; display: block; position: absolute; left: 0; right: 0; bottom: 6 / @layremvalue; font-size: 24 / @layremvalue; } } &-start { &::before { content: ‘开始’; } } &-end { &::before { content: ‘结束’; } } &-middle { background-color: @middleColor; } } } } .calendar-btn { height: 88 / @layremvalue; line-height: 88 / @layremvalue; display: flex; justify-content: center; box-shadow: 0 1px 0 0 #ddd inset; div { flex: 50%; } .reset-btn { color: #2e4052; } .confirm-btn { color: #fff; background-color: @activeColor; } } }

    1. ```
    2. // 自定义日历范围选择组件（倒数的时间段） sunxc 2018.12.15
    3. ;(function($) {
    4.   var calendarRange = (function() {
    5.     /**
    6.      * 插件函数
    7.      * @param {dom} element 插件追加dom容器对象
    8.      * @param {object} options 插件配置对象
    9.      *
    10.      */
    11.     function calendarRange(element, options) {
    12.       // calendar容器dom
    13.       this.element = element
    14.       // 合并插件配置 defaults + options
    15.       this.options = $.extend(true, $.fn.calendarRange.defaults, options || {})
    16.       // 插件初始化
    17.       this.init()
    18.     }
    19.     calendarRange.prototype = {
    20.       init: function() {
    21.         // 初始化插件 dom + 事件
    22.         var me = this
    23.         // 展示月的个数 强制转换为 12 避免出现 bug
    24.         me.manyMonths = me.options.manyMonths > 12 ? 12 : me.options.manyMonths
    25.         // 确定按钮
    26.         me.calendarConfirmBtn = me.options.calendarConfirmBtn
    27.         // 重置按钮
    28.         me.calendarResetBtn = me.options.calendarResetBtn
    30.         // dom
    31.         // 开始
    32.         var html = `<div class="calendar-range" id="calendarDom">
    33.             <input id="calendarStartDate" type="hidden" value=""/>
    34.             <input id="calendarEndDate" type="hidden" value=""/>
    35.             <div class="calendar-week">
    36.                 <div class="week-text color-blue">日</div>
    37.                 <div class="week-text">一</div>
    38.                 <div class="week-text">二</div>
    39.                 <div class="week-text">三</div>
    40.                 <div class="week-text">四</div>
    41.                 <div class="week-text">五</div>
    42.                 <div class="week-text color-blue">六</div>
    43.             </div>
    44.             <div class="calendar-scroll">
    45.                 <div class="scroll-content clearfix">`
    46.         // 日期拼接
    47.         /**
    48.          * 生成日期 html
    49.          * @param {number || string} manyMonths 月份的个数
    50.          */
    51.         function creationDateList(manyMonths) {
    52.           let htmlStr = ''
    53.           var now = me.options.calendarStartDate
    54.             ? new Date(me.options.calendarStartDate)
    55.             : new Date()
    56.           // 当前的年 月
    57.           var year = now.getFullYear()
    58.           var month = now.getMonth() + 1
    59.           // 根据月的数量循环生成 html
    60.           for (let i = 0; i < me.manyMonths; i++) {
    61.             // 如果是只要一个月的数据便不做过多的加减判断
    62.             if (me.manyMonths != 1) {
    63.               // 非首次循环自加1，否则得出需要展示的最小的月份，正排
    64.               if (i != 0) {
    65.                 month++
    66.                 // 判断月份转换年和月
    67.                 if (month < 1) {
    68.                   month = month - i + 12 + 1
    69.                   month = month > 12 ? 12 : month
    70.                   year -= 1
    71.                 } else if (month > 12) {
    72.                   month -= 12
    73.                   month = month === 0 ? 1 : month
    74.                   year++
    75.                 }
    76.               } else {
    77.                 month -= me.manyMonths - 1
    78.                 // 判断月份转换年和月
    79.                 if (month < 1) {
    80.                   month += 12
    81.                   month = month > 12 ? 12 : month
    82.                   year--
    83.                 } else if (month > 12) {
    84.                   month -= 12
    85.                   month = month === 0 ? 1 : month
    86.                   year++
    87.                 }
    88.               }
    89.             }
    90.             // 月份数组
    91.             let monthsArray = null
    92.             if (me._isLeapYear(year)) {
    93.               monthsArray = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
    94.             } else {
    95.               monthsArray = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
    96.             }
    97.             htmlStr += `<div class="content-title">${year}年${month}月</div>`
    98.             for (let x = 0; x < monthsArray[month - 1]; x++) {
    99.               let week = new Date(`${year}/${month}/${x + 1}`).getDay()
    100.               // 月份首日判断：是周几就 margin-left 几个 content-item 的距离
    101.               if (x === 0) {
    102.                 htmlStr += `<div class="content-item ${
    103.                   week === 0 || week === 6 ? 'color-blue' : ''
    104.                 }" data-date="${year}/${month}/${x +
    105.                   1}" style="margin-left:${(100 / 7) * week}%;">${x + 1}</div>`
    106.               } else {
    107.                 htmlStr += `<div class="content-item ${
    108.                   week === 0 || week === 6 ? 'color-blue' : ''
    109.                 }" data-date="${year}/${month}/${x + 1}">${x + 1}</div>`
    110.               }
    111.             }
    112.           }
    113.           return htmlStr
    114.         }
    115.         html += creationDateList(me.manyMonths)
    116.         // 结束
    117.         html += `</div>
    118.                 </div>
    119.                 <div class="calendar-btn">
    120.                     <div class="reset-btn" id="calendarResetBtn">重置</div>
    121.                     <div class="confirm-btn" id="calendarConfirmBtn">确定</div>
    122.                 </div>
    123.             </div>`
    125.         me.element.append(html)
    126.         // 日期点击事件
    127.         $('body').on('click', '#calendarDom .content-item', function(e) {
    128.           me._clickHandle(e)
    129.         })
    130.         // 重置 按钮点击事件
    131.         $('body').on('click', '#calendarResetBtn', function() {
    132.           me._resetTimeData()
    133.         })
    134.         // 确定 按钮点击事件
    135.         // $start, $end
    136.         $('body').on('click', '#calendarConfirmBtn', function() {
    137.           const $start = $('#calendarStartDate').val()
    138.           const $end = $('#calendarEndDate').val()
    139.           if ($start && $end) {
    140.             // 提交数据事件
    141.             me.options.callback($start, $end)
    142.           }
    143.         })
    144.       },
    145.       /**
    146.        *
    147.        * @param {number} year 是否是闰年
    148.        */
    149.       _isLeapYear: function(year) {
    150.         return year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)
    151.       },
    152.       /**
    153.        * 每个小日期的点击事件
    154.        * @param {object} e 点击的 dom 元素
    155.        */
    156.       _clickHandle: function(e) {
    157.         const me = this
    158.         const $this = $(e.target)
    159.         const index = $this.index()
    160.         const $calendarStartDate = $('#calendarStartDate')
    161.         const $calendarEndDate = $('#calendarEndDate')
    162.         // 已经点击了两次
    163.         if ($calendarStartDate.val() && $calendarEndDate.val()) {
    164.           // 清空数据重新执行
    165.           me._resetTimeData()
    166.           me._clickHandle(e)
    167.         } else if ($calendarStartDate.val()) {
    168.           // 之前已经点击了一次开始
    169.           const startIndex = $('#calendarDom')
    170.             .find('.content-item-start')
    171.             .index()
    172.           // 判断当前的索引值如果小于之前点击的索引值，将当前点击的重置为开始点击的
    173.           if (index < startIndex) {
    174.             $this
    175.               .addClass('content-item-start')
    176.               .siblings()
    177.               .removeClass('content-item-start')
    178.             $calendarStartDate.val($this.attr('data-date'))
    179.           } else {
    180.             $this.addClass('content-item-end')
    181.             $calendarEndDate.val($this.attr('data-date'))
    182.           }
    183.         } else {
    184.           //从未点击过
    185.           $this.addClass('content-item-start')
    186.           $calendarStartDate.val($this.attr('data-date'))
    187.         }
    188.       },
    189.       /**
    190.        * 重置数据事件
    191.        * @param {object} $this 点击的 dom 元素
    192.        */
    193.       _resetTimeData: function($this) {
    194.         $this = $this || $('#calendarDom .content-item')
    195.         const $calendarStartDate = $('#calendarStartDate')
    196.         const $calendarEndDate = $('#calendarEndDate')
    197.         $calendarStartDate.val('')
    198.         $calendarEndDate.val('')
    199.         $this
    200.           .siblings()
    201.           .removeClass('content-item-start')
    202.           .removeClass('content-item-end')
    203.       }
    204.     }
    206.     return calendarRange
    207.   })()
    209.   $.fn.calendarRange = function(options) {
    210.     return this.each(function() {
    211.       var me = $(this)
    212.       // 获取实例
    213.       var instance = me.data('calendarRange')
    214.       // 判断：实例如果未创建，创建实例
    215.       if (!instance) {
    216.         me.data('calendarRange', (instance = new calendarRange(me, options)))
    217.       }
    219.       if ($.type(options) === 'string') return instance[options]()
    220.     })
    221.   }
    222.   $.fn.calendarRange.defaults = {
    223.     // 指定开始的日期 yyyy/mm/dd
    224.     calendarStartDate: '',
    225.     //展示的之前月份个数 默认为 3，最大为 12，大于 12 会强制转换为 12 避免出现 bug
    226.     manyMonths: 3,
    227.     /**
    228.      * 回调函数 主要是为了提交数据用的
    229.      * @param {date} $start 开始时间
    230.      * @param {date} $end 结束时间
    231.      */
    232.     callback: function($start, $end) {
    233.       console.log($start, $end)
    234.     }
    235.   }
    236. })($)
    237. // // 测试语法
    238. // $('#id1').calendarRange({
    239. //   calendarStartDate: '2008/2/2',
    240. //   manyMonths: 12,
    241. //   callback: function($start,$end) {
    242. //     console.log(`start：${$start}\nend：${$end}`)
    243. //   }
    244. // })
    • 使用方法 `` // 示例代码 // 测试语法 可配置的 options 参数，不写便是默认的 $('#id1').calendarRange({ calendarStartDate: '2008/2/2', manyMonths: 20, callback: function($start,$end) { console.log(start：${$start}\nend：${$end}`) } })

    ```