vant 时间选择控件修订为只显示年份

Posted 2022-12-04 黑胡子大叔的小屋

路径：node_modules\\vant\\es\\datetime-picker\\DatePicker.js
两处修订，源码中标记
实现效果如下：

import _extends from "@babel/runtime/helpers/esm/extends";
import  createNamespace  from '../utils';
import  isDate  from '../utils/validate/date';
import  padZero  from '../utils/format/string';
import  getTrueValue, getMonthEndDay  from './utils';
import  sharedProps, TimePickerMixin  from './shared';
var currentYear = new Date().getFullYear();

var _createNamespace = createNamespace('date-picker'),
    createComponent = _createNamespace[0];

export default createComponent(
  mixins: [TimePickerMixin],
  props: _extends(, sharedProps, 
    type: 
      type: String,
      default: 'datetime'
    ,
    minDate: 
      type: Date,
      default: function _default() 
        return new Date(currentYear - 10, 0, 1);
      ,
      validator: isDate
    ,
    maxDate: 
      type: Date,
      default: function _default() 
        return new Date(currentYear + 10, 11, 31);
      ,
      validator: isDate
    
  ),
  watch: 
    filter: 'updateInnerValue',
    minDate: 'updateInnerValue',
    maxDate: 'updateInnerValue',
    value: function value(val) 
      val = this.formatValue(val);

      if (val.valueOf() !== this.innerValue.valueOf()) 
        this.innerValue = val;
      
    
  ,
  computed: 
    ranges: function ranges() 
      var _this$getBoundary = this.getBoundary('max', this.innerValue),
          maxYear = _this$getBoundary.maxYear,
          maxDate = _this$getBoundary.maxDate,
          maxMonth = _this$getBoundary.maxMonth,
          maxHour = _this$getBoundary.maxHour,
          maxMinute = _this$getBoundary.maxMinute;

      var _this$getBoundary2 = this.getBoundary('min', this.innerValue),
          minYear = _this$getBoundary2.minYear,
          minDate = _this$getBoundary2.minDate,
          minMonth = _this$getBoundary2.minMonth,
          minHour = _this$getBoundary2.minHour,
          minMinute = _this$getBoundary2.minMinute;

      var result = [
        type: 'year',
        range: [minYear, maxYear]
      , 
        type: 'month',
        range: [minMonth, maxMonth]
      , 
        type: 'day',
        range: [minDate, maxDate]
      , 
        type: 'hour',
        range: [minHour, maxHour]
      , 
        type: 'minute',
        range: [minMinute, maxMinute]
      ];

      switch (this.type) 
        case 'date':
          result = result.slice(0, 3);
          break;

        case 'year-month':
          result = result.slice(0, 2);
          break;

        case 'month-day':
          result = result.slice(1, 3);
          break;

        case 'datehour':
          result = result.slice(0, 4);
          break;
		//修订这里
        case 'year':
          result = result.slice(0,1);
          break;
      

      if (this.columnsOrder) 
        var columnsOrder = this.columnsOrder.concat(result.map(function (column) 
          return column.type;
        ));
        result.sort(function (a, b) 
          return columnsOrder.indexOf(a.type) - columnsOrder.indexOf(b.type);
        );
      

      return result;
    
  ,
  methods: 
    formatValue: function formatValue(value) 
      if (!isDate(value)) 
        value = this.minDate;
      

      value = Math.max(value, this.minDate.getTime());
      value = Math.min(value, this.maxDate.getTime());
      return new Date(value);
    ,
    getBoundary: function getBoundary(type, value) 
      var _ref;

      var boundary = this[type + "Date"];
      var year = boundary.getFullYear();
      var month = 1;
      var date = 1;
      var hour = 0;
      var minute = 0;

      if (type === 'max') 
        month = 12;
        date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
        hour = 23;
        minute = 59;
      

      if (value.getFullYear() === year) 
        month = boundary.getMonth() + 1;

        if (value.getMonth() + 1 === month) 
          date = boundary.getDate();

          if (value.getDate() === date) 
            hour = boundary.getHours();

            if (value.getHours() === hour) 
              minute = boundary.getMinutes();
            
          
        
      

      return _ref = , _ref[type + "Year"] = year, _ref[type + "Month"] = month, _ref[type + "Date"] = date, _ref[type + "Hour"] = hour, _ref[type + "Minute"] = minute, _ref;
    ,
    updateInnerValue: function updateInnerValue() 
      var _this = this;

      var type = this.type;
      var indexes = this.getPicker().getIndexes();

      var getValue = function getValue(type) 
        var index = 0;

        _this.originColumns.forEach(function (column, columnIndex) 
          if (type === column.type) 
            index = columnIndex;
          
        );

        var values = _this.originColumns[index].values;
        return getTrueValue(values[indexes[index]]);
      ;

      var year;
      var month;
      var day;

      if (type === 'month-day') 
        year = this.innerValue.getFullYear();
        month = getValue('month');
        day = getValue('day');
       else 
      	//修订这里
        year = getValue('year');
        // month = getValue('month');
        month = type === 'year' ? 1 : getValue('month');
        day = type === 'year' ? 1 : getValue('day');
      

      var maxDay = getMonthEndDay(year, month);
      day = day > maxDay ? maxDay : day;
      var hour = 0;
      var minute = 0;

      if (type === 'datehour') 
        hour = getValue('hour');
      

      if (type === 'datetime') 
        hour = getValue('hour');
        minute = getValue('minute');
      

      var value = new Date(year, month - 1, day, hour, minute);
      this.innerValue = this.formatValue(value);
    ,
    onChange: function onChange(picker) 
      var _this2 = this;

      this.updateInnerValue();
      this.$nextTick(function () 
        _this2.$nextTick(function () 
          _this2.$emit('change', picker);
        );
      );
    ,
    updateColumnValue: function updateColumnValue() 
      var _this3 = this;

      var value = this.innerValue;
      var formatter = this.formatter;
      var values = this.originColumns.map(function (column) 
        switch (column.type) 
          case 'year':
            return formatter('year', "" + value.getFullYear());

          case 'month':
            return formatter('month', padZero(value.getMonth() + 1));

          case 'day':
            return formatter('day', padZero(value.getDate()));

          case 'hour':
            return formatter('hour', padZero(value.getHours()));

          case 'minute':
            return formatter('minute', padZero(value.getMinutes()));

          default:
            // no default
            return null;
        
      );
      this.$nextTick(function () 
        _this3.getPicker().setValues(values);
      );
    
  
);