直接上代码

<!--年范围-->
<div class="c-datepicker-date-editor c-datepicker-single-editor year_start mt10">
    <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
    <input type="text" autocomplete="off" name="" placeholder="选择年份" class=" c-datepicker-data-input" value="">
</div>
<div class="c-datepicker-date-editor c-datepicker-single-editor year_end mt10">
    <span class="c-datepicker-range-separator">-</span>
    <input type="text" autocomplete="off" name="" placeholder="选择年份" class=" c-datepicker-data-input" value="">
</div>
<!--年月范围-->
<div class="mt40">
     <div class="c-datepicker-date-editor c-datepicker-single-editor month_start mt10">
            <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
            <input type="text" autocomplete="off" name="" placeholder="选择月份" class=" c-datepicker-data-input" value="">
     </div>
      <div class="c-datepicker-date-editor c-datepicker-single-editor month_end mt10">
             <span class="c-datepicker-range-separator">-</span>
             <input type="text" autocomplete="off" name="" placeholder="选择月份" class=" c-datepicker-data-input" value="">
      </div>
</div>
<!--年月日范围-->
<div class="mt40">
      <div class="c-datepicker-date-editor yearMonthDay mt10">
             <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
              <input placeholder="开始日期" name="" class="c-datepicker-data-input only-date" value="">
               <span class="c-datepicker-range-separator">-</span>
                 <input placeholder="结束日期" name="" class="c-datepicker-data-input only-date" value="">
        </div>
 </div>
<script>
// 选择起止年
$('.year_start').datePicker({
    format: 'YYYY',
    // 此处可配置开始年份
    min: '2002',
    hide:function () {
           $('.year_end input').val('');
            var yearStart = this.$input.eq(0).val();
            var yearEnd = String(Number(yearStart)+2);
            $('.year_end').datePicker({
              format: 'YYYY',
              min: yearStart,
              max: yearEnd
            });
        }
    });
// 起止年月范围
$('.month_start').datePicker({
            format: 'YYYY-MM',
            min: '2002-01',
            // max: '2019-04',
            hide: function (type) {
                $('.month_end input').val('');
                var monthStart = this.$input.eq(0).val();
                var monthEnd = yearMonthFormat(monthStart,12);
                $('.month_end').datePicker({
                    format: 'YYYY-MM',
                    min: monthStart,
                    max: monthEnd
                });
            }
        });
//年月日范围
        $('.yearMonthDay').datePicker({
            hasShortcut: true,
            format: 'YYYY-MM-DD',
            isRange: true,
            shortcutOptions: [{
                name: '最近一周',
                day: '-7,0'
            }, {
                name: '最近一个月',
                day: '-30,0'
            }, {
                name: '最近三个月',
                day: '-90, 0'
            }]
        });
</script>