精华内容
下载资源
问答
  • laydate扩展季度选择器

    2020-08-17 10:48:17
    laydate扩展季度选择器laydate扩展季度选择器示例 laydate扩展季度选择器 根据leydate进行扩展,在原先基础上添加了一个季度选择功能,不影响其他地方正常使用,从而满足了填报期年、季度、月的选择 示例 源码下载...

    laydate扩展季度选择器

    laydate扩展季度选择器

    根据leydate进行扩展,在原先基础上添加了一个季度选择功能,不影响其他地方正常使用,从而满足了填报期年、季度、月的选择

    示例

    下载地址: 代码下载.

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 苦恼于element没有季度选择器,网上搜罗后整理实现,以便后期开发使用 同文件夹下新建一个vue界面,命名为Quarter.vue <template> <el-form> <el-form-item> <mark class="_mark" v-...

    苦恼于element没有季度选择器,网上搜罗后整理实现,以便后期开发使用

    同文件夹下新建一个vue界面,命名为Quarter.vue

    <template>
      <el-form>
        <el-form-item>
          <mark
            class="_mark"
            v-show="showSeason"
            @click.stop="showSeason=false"
          ></mark>
          <el-input placeholder="请选择季度" v-model="showValue" style="width:12.7rem;" @focus="showSeason=true">
            <i slot="prefix" class="el-input__icon el-icon-date"></i>
          </el-input>
          <el-card
            class="box-card"
            v-show="showSeason"
          >
            <div slot="header" class="clearfix yearBtn">
              <button
                type="button"
                aria-label="前一年"
                class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
                @click="prev"
              ></button>
              <span role="button" class="el-date-picker__header-label">{{year}}年</span>
              <button
                type="button"
                aria-label="后一年"
                @click="next"
                class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
              ></button>
            </div>
            <div class="text item">
              <el-button
                type="text"
                size="medium"
                class="_left"
                @click="selectSeason(0)"
              >第一季度</el-button>
              <el-button
                type="text"
                size="medium"
                class="_right"
                @click="selectSeason(1)"
              >第二季度</el-button>
            </div>
            <div class="text item">
              <el-button
                type="text"
                size="medium"
                class="_left"
                @click="selectSeason(2)"
              >第三季度</el-button>
              <el-button
                type="text"
                size="medium"
                class="_right"
                @click="selectSeason(3)"
              >第四季度</el-button>
            </div>
          </el-card>
        </el-form-item>
      </el-form>
    </template>
    <script>
    export default {
      props: {
        valueArr: {
          default: () => {
            return ['01-03', '04-06', '07-09', '10-12']
          },
          type: Array
        },
        getValue: {
          default: () => {},
          type: Function
        },
        defaultValue: {
          default: '',
          type: String
        }
      },
      data() {
        return {
          showSeason: false,
          season: '',
          year: new Date().getFullYear(),
          showValue: ''
        }
      },
      created() {
        if (this.defaultValue) {
          let value = this.defaultValue
          let arr = value.split('-')
          this.year = arr[0].slice(0, 4)
          let str = arr[0].slice(4, 6) + '-' + arr[1].slice(4, 6)
          let arrAll = this.valueArr
          this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`
        }
      },
      watch: {
        defaultValue: function(value, oldValue) {
          let arr = value.split('-')
          this.year = arr[0].slice(0, 4)
          let str = arr[0].slice(4, 6) + '-' + arr[1].slice(4, 6)
          let arrAll = this.valueArr
          this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`
        }
      },
      methods: {
        one() {
          this.showSeason = false
        },
        prev() {
          this.year = this.year * 1 - 1
        },
        next() {
          this.year = this.year * 1 + 1
        },
        selectSeason(i) {
          let that = this
          that.season = i + 1
          let arr = that.valueArr[i].split('-')
          that.getValue(that.year + arr[0] + '-' + that.year + arr[1])
          that.showSeason = false
          this.showValue = `${this.year}年${this.season}季度`
          console.log(this.showValue)
        },
        getLastDay(year,month) {         
          var new_year = year //取当前的年份
          var new_month = month++ //取下一个月的第一天,方便计算(最后一天不固定)
          if(month>12) {         
            new_month -= 12//月份减
            new_year++ //年份增
          }         
          var new_date = new Date(new_year,new_month,1) //取当年当月中的第一天          
          return (new Date(new_date.getTime()-1000*60*60*24)).getDate() //获取当月最后一天日期          
        }
      }
    }
    </script>
    <style scoped>
    ._mark {
      position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;
    }
    .yearBtn {
      text-align:center;padding:0
    }
    .box-card {
      width:322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999
    }
    .text.item {
      text-align: center;
    }
    .text.item >>> .el-button{
      width:40%;color: #606266;
    }
    .text.item ._left {
      float: left;
    }
    .text.item ._right {
      float: right;
    }
    </style>
     

    在需要使用的vue界面导入

    <script>
    //自定义季度选择器
    import Quarter from "./Quarter";
    
    export default {
      data() {
        return {
          value: "",
          value1: "",
          options: [
            { label: "季度统计", value: "first" },
            { label: "月度统计", value: "second" },
            { label: "周度统计", value: "third" }
          ]
        };
      },
      components: {
        Quarter
      }
    };
    </script>

    使用:

    <Quarter></Quarter>

     

     

    展开全文
  • city-picker.js更改后的代码 // jshint ignore: start ...var quarters = ["第一季度", "第二季度", "第三季度", "第四季度"]; var months = ["第一个月", "第二个月", "第三个月"]; for(var i = 2014; i <= new D

    https://github.com/timelessmemory/weui-quarter-picker

    city-picker.js更改后的代码

    // jshint ignore: start
    +function($){
    
    $.rawCitiesData = [];
    var quarters = ["第一季度", "第二季度", "第三季度", "第四季度"];
    var months = ["第一个月", "第二个月", "第三个月"];
    
    for(var i = 2014; i <= new Date().getFullYear(); i++) {
      var tmpYear = {
        "name" : i + "年",
        "code" : i + "00",
        "sub" : []
      }
    
      for (var j = 0; j < quarters.length; j++) {
        var tmpQuarter = {
          "name" : quarters[j],
          "code" : i + "00" + j,
          "sub" : []
        }
    
        for (var k = 0; k < months.length; k++) {
          var tmpMonth = {
            "name" : months[k],
            "code" : i + "00" + j + k
          }
          tmpQuarter.sub.push(tmpMonth)
        }
        tmpYear.sub.push(tmpQuarter)
      }
      $.rawCitiesData.push(tmpYear);
    }
    
    }($);
    // jshint ignore: end
    
    /* global $:true */
    /* jshint unused:false*/
    
    + function($) {
      "use strict";
    
      var defaults;
      var raw = $.rawCitiesData;
    
      var format = function(data) {
        var result = [];
        for(var i=0;i<data.length;i++) {
          var d = data[i];
          if(/^请选择/.test(d.name)) continue;
          result.push(d);
        }
        if(result.length) return result;
        return [];
      };
    
      var sub = function(data) {
        if(!data.sub) return [{ name: '', code: data.code }];
        return format(data.sub);
      };
    
      var getCities = function(d) {
        for(var i=0;i< raw.length;i++) {
          if(raw[i].code === d || raw[i].name === d) return sub(raw[i]);
        }
        return [];
      };
    
      var getDistricts = function(p, c) {
        for(var i=0;i< raw.length;i++) {
          if(raw[i].code === p || raw[i].name === p) {
            for(var j=0;j< raw[i].sub.length;j++) {
              if(raw[i].sub[j].code === c || raw[i].sub[j].name === c) {
                return sub(raw[i].sub[j]);
              }
            }
          }
        }
      };
    
      var parseInitValue = function (val) {
        var p = raw[0], c, d;
        var tokens = val.split(' ');
        raw.map(function (t) {
          if (t.name === tokens[0]) p = t;
        });
    
        p.sub.map(function (t) {
          if (t.name === tokens[1]) c = t;
        })
    
        if (tokens[2]) {
          c.sub.map(function (t) {
            if (t.name === tokens[2]) d = t;
          })
        }
    
        if (d) return [p.code, c.code, d.code];
        return [p.code, c.code];
      }
    
      var toCode = function(raw, val) {
        var p, c, d;
        var tokens = val.split(' ');
        raw.map(function (t) {
          if (t.name === tokens[0]) p = t;
        });
    
        p.sub.map(function (t) {
          if (t.name === tokens[1]) c = t;
        })
    
        if (tokens[2]) {
          c.sub.map(function (t) {
            if (t.name === tokens[2]) d = t;
          })
        }
    
        if (d) return [p.code, c.code, d.code];
        return [p.code, c.code];
      }
    
      $.fn.cityPicker = function(params) {
        params = $.extend({}, defaults, params);
    
        return this.each(function() {
          var self = this;
    
          var provincesName = raw.map(function(d) {
            return d.name;
          });
          var provincesCode = raw.map(function(d) {
            return d.code;
          });
          var initCities = sub(raw[0]);
          var initCitiesName = initCities.map(function (c) {
            return c.name;
          });
          var initCitiesCode = initCities.map(function (c) {
            return c.code;
          });
          var initDistricts = sub(raw[0].sub[0]);
    
          var initDistrictsName = initDistricts.map(function (c) {
            return c.name;
          });
          var initDistrictsCode = initDistricts.map(function (c) {
            return c.code;
          });
    
          var currentProvince = provincesName[0];
          var currentCity = initCitiesName[0];
          var currentDistrict = initDistrictsName[0];
    
          var cols = [
              {
                displayValues: provincesName,
                values: provincesCode,
                cssClass: "col-province"
              },
              {
                displayValues: initCitiesName,
                values: initCitiesCode,
                cssClass: "col-city"
              }
            ];
    
            if(params.showDistrict) cols.push({
              values: initDistrictsCode,
              displayValues: initDistrictsName,
              cssClass: "col-district"
            });
    
          var config = {
    
            cssClass: "city-picker",
            rotateEffect: false,  //为了性能
            formatValue: function (p, values, displayValues) {
              return displayValues.join(' ');
            },
            onChange: function (picker, values, displayValues) {
              var newProvince = picker.cols[0].displayValue;
              var newCity;
              if(newProvince !== currentProvince) {
                var newCities = getCities(newProvince);
                newCity = newCities[0].name;
                var newDistricts = getDistricts(newProvince, newCity);
                picker.cols[1].replaceValues(newCities.map(function (c) {
                  return c.code;
                }), newCities.map(function (c) {
                  return c.name;
                }));
                if(params.showDistrict) picker.cols[2].replaceValues(newDistricts.map(function (d) {
                  return d.code;
                }), newDistricts.map(function (d) {
                  return d.name;
                }));
                currentProvince = newProvince;
                currentCity = newCity;
                picker.updateValue();
                return false; // 因为数据未更新完,所以这里不进行后序的值的处理
              } else {
                if(params.showDistrict) {
                  newCity = picker.cols[1].displayValue;
                  if(newCity !== currentCity) {
                    var districts = getDistricts(newProvince, newCity);
                    picker.cols[2].replaceValues(districts.map(function (d) {
                      return d.code;
                    }), districts.map(function (d) {
                      return d.name;
                    }));
                    currentCity = newCity;
                    picker.updateValue();
                    return false; // 因为数据未更新完,所以这里不进行后序的值的处理
                  }
                }
              }
              //如果最后一列是空的,那么取倒数第二列
              var len = (values[values.length-1] ? values.length - 1 : values.length - 2)
              $(self).attr('data-code', values[len]);
              $(self).attr('data-codes', values.join(','));
              if (params.onChange) {
                params.onChange.call(self, picker, values, displayValues);
              }
            },
            cols: cols,
            rawCitiesData : $.rawCitiesData,
            toCode : toCode
          };
    
          if(!this) return;
          var p = $.extend({}, params, config);
          var val = $(this).val();
          if (!val) val = '2017年 第一季度 第一个月';
          currentProvince = val.split(" ")[0];
          currentCity = val.split(" ")[1];
          currentDistrict= val.split(" ")[2];
    
          if(val) {
            p.value = parseInitValue(val);
            if(p.value[0]) {
              var cities = getCities(p.value[0]);
              p.cols[1].values = cities.map(function (c) {
                return c.code;
              });
              p.cols[1].displayValues = cities.map(function (c) {
                return c.name;
              });
            }
    
            if(p.value[1]) {
              if (params.showDistrict) {
                var dis = getDistricts(p.value[0], p.value[1]);
                p.cols[2].values = dis.map(function (d) {
                  return d.code;
                });
                p.cols[2].displayValues = dis.map(function (d) {
                  return d.name;
                });
              }
            } else {
              if (params.showDistrict) {
                var dis = getDistricts(p.value[0], p.cols[1].values[0]);
                p.cols[2].values = dis.map(function (d) {
                  return d.code;
                });
                p.cols[2].displayValues = dis.map(function (d) {
                  return d.name;
                });
              }
            }
          }
          $(this).picker(p);
        });
      };
    
      defaults = $.fn.cityPicker.prototype.defaults = {
        showDistrict: true
      };
    
    }($);
    


    涉及到的样式修改代码jquery-weui.css中添加

    .toolbar .cancel-picker {
      position: absolute;
      box-sizing: border-box;
      height: 2.2rem;
      line-height: 2.2rem;
      color: #04BE02;
      z-index: 1;
      padding: 0 .5rem;
    }


    涉及到jquery-weui.js源码中的修改

    toolbarTemplate: '<div class="toolbar">\
              <div class="toolbar-inner">\
              <a href="javascript:;" class="cancel-picker">取消</a>\
              <a href="javascript:;" class="picker-button close-picker">{{closeText}}</a>\
              <h1 class="title">{{title}}</h1>\
              </div>\
              </div>',
    添加了<a href="javascript:;" class="cancel-picker">取消</a>\

    地区选择器默认只要改变就实时的显示到文本输入框中,我的需求是点击确定才改变值,点击取消不改变。查看源码发现

    p.updateValue = function () {
              var newValue = [];
              var newDisplayValue = [];
              for (var i = 0; i < p.cols.length; i++) {
                  if (!p.cols[i].divider) {
                      newValue.push(p.cols[i].value);
                      newDisplayValue.push(p.cols[i].displayValue);
                  }
              }
              if (newValue.indexOf(undefined) >= 0) {
                  return;
              }
              p.value = newValue;
              p.displayValue = newDisplayValue;
              if (p.params.onChange) {
                  p.params.onChange(p, p.value, p.displayValue);
              }
              if (p.input && p.input.length > 0) {
                  // $(p.input).val(p.params.formatValue ? p.params.formatValue(p, p.value, p.displayValue) : p.value.join(' '));
                  $(p.input).trigger('change');
              }
          };

    注释掉的就是导致实时改变input框的代码,将其移至确定按钮点击时间代码中

    $(document).on("click", ".close-picker", function() {
            var pickerToClose = $('.weui-picker-modal.weui-picker-modal-visible');
            if (pickerToClose.length > 0) {
              $(p.input).val(p.params.formatValue ? p.params.formatValue(p, p.value, p.displayValue) : p.value.join(' '));
              $.closePicker(pickerToClose);
            }
          });
    由于取消按钮是后来添加的,所以也给其注册点击事件

      $(document).on("click", ".cancel-picker", function() {
        var pickerToClose = $('.weui-picker-modal.weui-picker-modal-visible');
        if (pickerToClose.length > 0) {
          $.closePicker(pickerToClose);
        }
      });


    发现一个bug,每次选择完取消再点击显示的是新选择的值而不是原来input正确的值,估计还是因为默认是实时显示引起的。查看源码

    // Set value
                  if (!p.initialized) {
                      if (p.params.value) {
                          p.setValue(p.params.value, 0);
                      }
                  }
                  else {
                      var tmpCode = p.params.toCode(p.params.rawCitiesData, p.input.val());
                      p.setValue(tmpCode, 0);
                      // if (p.value) p.setValue(p.value, 0);
                  }

    注释部分就是把change引起的新值显示到控件上,所以只需要改为显示input中的值。

    p.params.toCode和p.params.rawCitiesData在config中配置,具体见city-picker.js


    最后展示一下季度选择器




    展开全文
  • 最近项目中需要用到季度选择器控件,无奈element-ui框架没有,想着自己实现一个出来,参考的日期选择器实现的 实现后效果图: 使用说明 1、复制组件文件 ElQuarterPicker.vue 到项目(依赖element-ui),...

    最近项目中需要用到季度选择器控件,无奈element-ui框架没有,想着自己实现一个出来,参考的日期选择器实现的 

    实现后效果图:

     

    使用说明

    1、复制组件文件 ElQuarterPicker.vue 到项目(依赖element-ui),组件源码在后面

    2、引用并调用组件

    <template>
      <div class="app-container">
        <el-quarter-picker v-model="value" placeholder="选择季度" />
      </div>
    </template>
    
    <script>
    import ElQuarterPicker from './ElQuarterPicker'
    
    export default {
      components: { ElQuarterPicker },
      data() {
        return {
          value: ''
        }
      }
    }
    </script>


    日期格式

    使用format指定输入框的格式;使用value-format指定绑定值的格式。

    格式 含义 备注 举例
    yyyy 2021
    Q 季度 中文季度,取值(一二三四)
    qq 季度 季度值,补0 03
    q 季度 季度值,不补0 3

    Attributes

     

    参数 说明 类型 可选值 默认值
    value / v-model 绑定值 string
    readonly 完全只读 boolean false
    disabled 禁用 boolean false
    editable 文本框可输入 boolean true
    clearable 是否显示清除按钮 boolean true
    size 输入框尺寸 string large, small, mini
    placeholder 占位内容 string
    format 显示在输入框中的格式 string 见日期格式 yyyy年第Q季度
    value-format 绑定值的格式 string 见日期格式 yyyy-qq

     


    ElQuarterPicker.vue

    <template>
      <div class="el-quarter-picker">
        <el-popover
          v-model="visible"
          :disabled="!canPopover"
          :tabindex="null"
          placement="bottom-start"
          transition="el-zoom-in-top"
          trigger="click">
    
          <div class="el-date-picker">
            <div class="el-picker-panel__body">
              <div class="el-date-picker__header el-date-picker__header--bordered" style="margin:0px; line-height:30px">
                <button
                  type="button"
                  @click="clickLast"
                  aria-label="前一年"
                  class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"></button>
                <span role="button" class="el-date-picker__header-label" @click="clickYear">{{ title }}</span>
                <button
                  type="button"
                  @click="clickNext"
                  aria-label="后一年"
                  class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
              </div>
              <div class="el-picker-panel__content" style="margin:0px; width:100%">
                <table class="el-month-table" style="">
                  <tbody>
                  <tr v-for="line in lineCount" :key="line">
                    <td v-for="index in (line * 4 <= viewList.length ? 4 : viewList.length - (line - 1) * 4)" :key="index" :class="{ today: viewList[(line - 1) * 4 + index - 1].current, current: viewList[(line - 1) * 4 + index - 1].active }">
                      <div><a class="cell" @click="clickItem(viewList[(line - 1) * 4 + index - 1])">{{ viewList[(line - 1) * 4 + index - 1].label }}</a></div>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
    
          <el-input
            slot="reference"
            @change="changeText"
            @mouseenter.native="mouseEnter"
            @mouseleave.native="mouseLeave"
            :placeholder="placeholder"
            v-model="text"
            :size="size"
            :readonly="!canEdit"
            :disabled="disabled">
            <i slot="prefix" class="el-input__icon el-icon-date"></i>
            <i slot="suffix" class="el-input__icon el-icon-circle-close" v-show="showClear" style="cursor:pointer" @click.stop="clear"></i>
          </el-input>
        </el-popover>
      </div>
    </template>
    
    <script>
    export default {
      name: 'ElQuarterPicker',
      props: {
        placeholder: {
          type: String,
          default: ''
        },
        size: {
          type: String,
          default: ''
        },
        readonly: {
          type: Boolean,
          default: false
        },
        clearable: {
          type: Boolean,
          default: true
        },
        editable: {
          type: Boolean,
          default: true
        },
        disabled: {
          type: Boolean,
          default: false
        },
        format: {
          type: String,
          default: 'yyyy年第Q季度'
        },
        valueFormat: {
          type: String,
          default: 'yyyy-qq'
        },
        value: {
          type: String,
          default: ''
        }
      },
      model: {
        prop: 'value',
        event: 'change'
      },
      watch: {
        value(val) {
          // console.log('change-------', val)
          this.changeValue(val)
        },
        readonly(val) {
          this.canEdit = !val && this.editable
          this.canPopover = !this.disabled && !val
        },
        editable(val) {
          this.canEdit = !this.readonly && val
        },
        disabled(val) {
          this.canPopover = !val && !this.readonly
        }
      },
      data() {
        return {
          visible: false,
          showClear: false, // 控制清空按钮展示
          canEdit: true, // 是否可编辑
          canPopover: true, // 选择器弹出是否可用
          text: '', // 文本框值
          viewType: 1, // 视图类型,1季度,2年度
          viewYear: 0, // 当前年份
          viewList: [], // 数据列表
          lineCount: 0, // 数据行数
          title: '', // 选择器标题
          data: [0, 0] // 当前选择年度-季度
        }
      },
      mounted() {
        // console.log('mounted--------', this.value)
        this.changeValue(this.value)
    
        // 设置文本框是否可编辑
        this.canEdit = !this.readonly && this.editable
        this.canPopover = !this.disabled && !this.readonly
    
        // 监听按键(上下左右键可以切换季度)
        document.onkeydown = (event) => {
          if (this.visible) {
            const data = [this.data[0], this.data[1]]
            if (data[0] < 1 || data[1] < 1) {
              // 以当前季度为标准
              const curDate = new Date()
              data[0] = curDate.getFullYear()
              data[1] = parseInt(curDate.getMonth() / 3) + 1
            }
            if (event.code === 'ArrowLeft') {
              // 上一个季度
              if (data[1] === 1) {
                data[0] = data[0] - 1
                data[1] = 4
              } else {
                data[1] = data[1] - 1
              }
            } else if (event.code === 'ArrowRight') {
              // 下一个季度
              if (data[1] === 4) {
                data[0] = data[0] + 1
                data[1] = 1
              } else {
                data[1] = data[1] + 1
              }
            } else if (event.code === 'ArrowUp') {
              // 上一年季度
              data[0] = data[0] - 1
            } else if (event.code === 'ArrowDown') {
              // 下一年季度
              data[0] = data[0] + 1
            } else {
              return
            }
    
            // 超过年限的不处理
            if (data[0] < 1000 || data[0] > 9999) {
              return
            }
            this.data = data
            this.viewType = 1
            this.viewYear = data[0]
            this.$emit('change', this.formatTo(data, this.valueFormat))
          }
        }
      },
      destroyed() {
        document.onkeydown = null
      },
      methods: {
        // 季度文本变更
        changeText() {
          if (this.checkFormat(this.format, this.text)) {
            // 设置值
            this.formatFrom(this.text, this.format)
            this.$emit('change', this.formatTo(this.data, this.valueFormat))
          } else {
            // 输入了无效的格式,还原回原来的值
            if (this.data[0] < 1 || this.data[1] < 1) {
              this.text = ''
            } else {
              this.text = this.formatTo(this.data, this.format)
            }
          }
          this.visible = false
        },
        // 鼠标进入
        mouseEnter() {
          if (!this.disabled && !this.readonly && this.clearable && this.text !== '') {
            this.showClear = true
          }
        },
        // 鼠标离开
        mouseLeave() {
          if (!this.disabled && this.clearable) {
            this.showClear = false
          }
        },
        // 清除季度
        clear() {
          this.showClear = false
          this.visible = false
          this.$emit('change', '')
        },
        // 季度值变更
        changeValue(val) {
          this.viewType = 1
          if (val) {
            // 反向格式化
            this.formatFrom(val, this.valueFormat)
            this.text = this.formatTo(this.data, this.format)
            this.viewYear = this.data[0]
          } else {
            this.text = ''
            this.data = [0, 0]
            this.viewYear = new Date().getFullYear()
          }
          this.initView()
        },
        // 初始化视图数据
        initView() {
          const list = []
          const curDate = new Date()
          const curYear = curDate.getFullYear()
          const curQuarter = parseInt(curDate.getMonth() / 3) + 1
          if (this.viewType === 1) {
            let index = 0
            for (const i of '一二三四') {
              index++
              const item = { label: '第' + i + '季度', year: this.viewYear, quarter: index, current: false, active: false }
              if (this.viewYear === curYear && index === curQuarter) {
                item.current = true
              } else if (this.viewYear === this.data[0] && index === this.data[1]) {
                item.active = true
              }
              list.push(item)
            }
            this.title = this.viewYear + ' 年'
          } else {
            const start = parseInt(this.viewYear / 10) * 10
            this.viewYear = start
            for (let i = 0; i < 10; i++) {
              const year = start + i
              const item = { label: year + '', year: year, current: false, active: false }
              if (year === curYear) {
                item.current = true
              } else if (year === this.data[0]) {
                item.active = true
              }
              list.push(item)
            }
            this.title = start + ' 年 - ' + (start + 9) + ' 年'
          }
          this.viewList = list
          this.lineCount = parseInt(list.length / 4)
          if (list.length % 4 > 0) {
            this.lineCount++
          }
        },
        // 校验季度格式是否正确
        checkFormat(pattern, val) {
          // 格式转成正则表达式
          let text = ''
          for (const char of pattern) {
            const dict = '\\^$.+?*[]{}!'
            if (dict.indexOf(char) === -1) {
              text += char
            } else {
              text += '\\' + char
            }
          }
          text = text.replace('yyyy', '[1-9]\\d{3}')
          text = text.replace('qq', '0[1-4]')
          text = text.replace('q', '[1-4]')
          text = text.replace('Q', '[一二三四]')
          text = '^' + text + '$'
          const patt = new RegExp(text)
          return patt.test(val)
        },
        // 格式化季度到指定格式
        formatTo(data, pattern) {
          let text = pattern.replace('yyyy', '' + data[0])
          text = text.replace('qq', '0' + data[1])
          text = text.replace('q', '' + data[1])
          text = text.replace('Q', '一二三四'.substr(data[1] - 1, 1))
          return text
        },
        // 以指定格式解析季度
        formatFrom(str, pattern) {
          const year = this.findText(str, pattern, 'yyyy')
          const quarter = this.findText(str, pattern, ['qq', 'q', 'Q'])
          this.data = [year, quarter]
        },
        // 查找文本数值
        findText(str, pattern, find) {
          if (find instanceof Array) {
            for (const f of find) {
              const val = this.findText(str, pattern, f)
              if (val !== -1) {
                return val
              }
            }
            return -1
          }
          const index = pattern.indexOf(find)
          if (index === -1) {
            return index
          }
          const val = str.substr(index, find.length)
          if (find === 'Q') {
            return '一二三四'.indexOf(val) + 1
          } else {
            return parseInt(val)
          }
        },
        // 年份点击
        clickYear() {
          if (this.viewType !== 1) {
            return
          }
          // 切换年度选择器
          this.viewType = 2
          this.initView()
        },
        // 季度选择
        clickItem(item) {
          // console.log('select--------', item)
          if (this.viewType === 1) {
            // 选择季度
            this.$emit('change', this.formatTo([item.year, item.quarter], this.valueFormat))
            this.visible = false
          } else {
            // 选择年度
            this.viewType = 1
            this.viewYear = item.year
            this.initView()
          }
        },
        // 上一年
        clickLast() {
          if (this.viewYear > 1000) {
            if (this.viewType === 1) {
              this.viewYear--
              this.initView()
            } else {
              this.viewYear = this.viewYear - 10
              this.initView()
            }
          }
        },
        // 下一年
        clickNext() {
          if (this.viewYear < 9999) {
            if (this.viewType === 1) {
              this.viewYear++
              this.initView()
            } else {
              this.viewYear = this.viewYear + 10
              this.initView()
            }
          }
        }
      }
    }
    </script>
    
    <style>
      .el-quarter-picker {
        width: 220px;
        display: inline-block;
      }
    </style>

    展开全文
  • 本篇主要内容:ElementUi 只提供了时间、日历等选择器,没有提供季度选择器,但在开发中报表的时候用到了季度选择器。需要换切换多种类型(年报、月报、季报), 于是封装一个季度公共组件,大家可按需修改引用: ...
  • 先看看效果: 样式和当前iview的DatePicker类似。这里用到了iview的Input和一个自定义的下拉面板。...选择对应季度后组成将要在Input框上显示的内容。 Input框内添加删除按钮,当存在数据时并且鼠标在范围内则显示,点
  • 此文件为laydate的年、季度、月的选择器,此为网络下载,经测可用,感谢原作者!上传留用,欢迎分享!
  • layui时间选择器选择周和季度

    千次阅读 2020-08-12 17:41:31
    layui时间选择器选择周和季度 最近一个后台管理页面数据查询时间间隔要有:日,周,月,季度,年;UI组件我们用的layui,官方dome只有日月年(直接去ctrl+c ctrl+v就好了,在这就不多说了);So我们要自定义周和...
  • laydate实现季度选择

    2018-12-18 10:26:52
    实现季度选择,时间段选择, 亲测有效,还算好用。适用于大多数前端框架
  • 然后每种方式的日期的选择方式各种各样,这里根据我们的需求写了一种针对这些的选择器; 编写日,周,月,季度,自定义tab组件 编写tab组件,组件名tab-cycle tab-cycle.js关键代码,提供tab_datas和cur_tab_id两...
  • 季度区间选择器body{padding:20px;}.demo-input{padding-left:10px;height:38px;min-width:262px;line-height:38px;border:1px solid #e6e6e6;background-color:#fff;border-radius:2px;}//季度计算varseasonFn= ...
  • element季度选择控件

    2021-03-22 09:52:21
    季度选择控件,element官网没有提供。 实现效果: 默认是当前月份的季度 实现原理: 在页面上放一个input,然后点击出现card卡片,卡片里面放季度的内容 封装组件源码:源码api见最下面 <template> &...
  • 季度选择控件element-ui+vue组件

    万次阅读 多人点赞 2019-06-04 10:39:36
    季度选择器其实是很经常用到的控件,elementui里面居然没有,情急之下利用elementui里面的其他组件做了个类似的组件,需要自取~ <template> <el-form-item label="日期"> <mark style=...
  • 季度选择控件

    千次阅读 2019-07-22 14:39:00
    https://blog.csdn.net/cmy0816/article/details/90764581 转载于:https://www.cnblogs.com/yishenweilv/p/11225733.html
  • 时间选择器使用

    2019-08-24 10:24:45
    这里的时间选择器是较复杂的时间选择器,融合了日,周,月,季度,年以及自定义的,具体的展示如下图 时间选择器处理 由于我们需要选择自己想要选择的时间,并将其获取到,然后做一些处理,所以我们需要监听时间的...
  • // 下个星期日 // 获取季度(1 到 4)。 moment('2013-01-01T00:00:00.000').quarter() // 1 moment('2013-04-01T00:00:00.000').subtract(1, 'ms').quarter() // 1 moment('2013-04-01T00:00:00.000').quarter() /...
  • 基于bootstrap按年季度年月年月日的日历插件基于bootstrap按年、季度、年月、年月日的日历插件基于bootstrap按年、季度、年月、年月日的日历插件,作为bootstrap-datetimepicker日历插件的扩展可按年可以根据前面按...
  • 带有例子,日期按季度显示。为了赚点分所以给了资源分,请多谅解。谢谢
  • 项目需要通过My97DatePicker插件选择季度功能,在网上找了下基本都是一个人弄过但是分享的也不是很全面实现不了想要的功能,只好自己通过笨方法弄了个方便的版本。但是胜在能够实现。
  • My97DatePicker 选择季度功能完整可用版本,直接打开文件即可使用 My97DatePicker 选择季度功能完整可用版本,直接打开文件即可使用 My97DatePicker 选择季度功能完整可用版本,直接打开文件即可使用 My97DatePicker...
  • elementUI写季度选择组件

    千次阅读 2020-03-18 14:55:43
    {{year}}年 第一季度 第二季度 第三季度 第四季度
  • uni-app季度选择控件

    2020-08-28 14:06:54
    代码中涉及到图片需要自己加哦,效果如图: <template> <view class="content"> <view class="input_year">...button @click=...季度</button> <span @click="showDoubleMonth">
  • element-ui季度选择组件实现代码 1公共组件部分: class="_mark" v-show="showSeason" @click.stop="showSeason=false" > 请选择季度" size="mini" class="filter-item
  • Ngx日期时间范围选择器,具有每日,每周,每月,每季度和每年的级别 这个插件使用bootstrap,moment.js和font-awesome。 演示: : 安装 从npm安装插件: npm install ngx-datetime-range-picker --save 在模块...
  • bootstrap 日期范围选择器 日期选择器

    千次阅读 2018-05-10 14:58:34
    1日期选择器&lt;!DOCTYPE html&gt; &lt;html dir="ltr" lang="en-US"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;A...
  • 微信小程序----当前时间的时段选择器插件(今天、本周、本月、本季度、本年、自定义时段) DEMO效果图 插件思路 准备工作 获取当前时间,同时获取当前的年、...
  • Layui实现日期选择器限定当月,以及季度日期选择
  • 创建获取季度开始的月份函数。 获取时段 创建获取当天的时段函数; 创建获取本周的时段函数; 创建获取本月的时段函数; 创建获取本季度的时段函数; 创建获取本年的时段函数; 创建自定义...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,080
精华内容 5,632
关键字:

季度选择器