学习unigui【42】UnimDatePicker的使用

场景：UnimDatePicker需要：

进入 Picker：默认日期会按控件当前值显示（2026-01-09）
年=2026（当年）时：月槽只剩 1..当月
且月=当月时：日槽只剩 1..当日（如果你要 1..昨天：把 limitToYesterday=true）
选 2025：月槽恢复 1..12，日槽恢复该月正常天数
再选回 2026：再次自动裁剪月/日（动态链式）

实现代码，加入UnimDatePicker.uniEnents的afterCreate

function afterCreate(sender) {
  var field = sender;
  if (field.__smartPickerInstalled) return;
  field.__smartPickerInstalled = true;

  // true=只能选到昨天；false=可选到今天
  var EXCLUDE_TODAY = false;

  function pad2(n){ return (n < 10 ? '0' : '') + n; }
  function todayParts(){
    var n = new Date();
    return { y:n.getFullYear(), m:n.getMonth()+1, d:n.getDate() };
  }
  function daysInMonth(y, m1){ return new Date(y, m1, 0).getDate(); }

  function buildYears(yMin, yMax){
    var a=[];
    for(var y=yMin; y<=yMax; y++) a.push({ text: y + ' 年', value: y });
    return a;
  }
  function buildMonths(maxM){
    var a=[];
    for(var m=1; m<=maxM; m++) a.push({ text: pad2(m) + ' 月', value: m });
    return a;
  }

  function valOf(x){
    if(x === null || x === undefined) return null;
    if(typeof x === 'number') return isFinite(x) ? parseInt(x,10) : null;
    if(typeof x === 'string'){
      var n = parseInt(x, 10);
      return isNaN(n) ? null : n;
    }
    if(typeof x === 'object'){
      if(typeof x.value !== 'undefined') return valOf(x.value);
      if(x.data && typeof x.data.value !== 'undefined') return valOf(x.data.value);
      if(typeof x.get === 'function'){
        var v = x.get('value');
        if(typeof v !== 'undefined') return valOf(v);
      }
    }
    return null;
  }

  function parseFieldDate(){
    var v = field.getValue ? field.getValue() : null;
    if(v instanceof Date) return v;

    if(typeof v === 'string' && v){
      if(window.Ext && Ext.Date && Ext.Date.parse){
        var d = Ext.Date.parse(v, 'Y-m-d');
        if(d) return d;
      }
      var d2 = new Date(v);
      if(!isNaN(+d2)) return d2;
    }
    return new Date();
  }

  // -------- slot helpers (原生 picker) --------
  function getSlotByName(pkr, name){
    try{
      var slots = pkr.getSlots ? pkr.getSlots() : null;
      if(slots){
        var arr = slots.items || slots;
        for(var i=0; i<arr.length; i++){
          var s = arr[i];
          if(!s) continue;
          if(s.getName && s.getName() === name) return s;
          if(s._name === name) return s;
          if(s.config && s.config.name === name) return s;
        }
      }
    }catch(e){}
    var items = (pkr.getItems && pkr.getItems().items) || [];
    for(var j=0; j<items.length; j++){
      var it = items[j];
      if(it && it.isSlot && it.getName && it.getName() === name) return it;
    }
    return null;
  }

  // ✅ 年/月：继续用你现在的“换 store”
  function resetSlotStore(slot, data){
    if(!slot) return;

    try{
      if(slot.setItemTpl) slot.setItemTpl('{text}');
      if(slot.setDisplayField) slot.setDisplayField('text');
      if(slot.setValueField)   slot.setValueField('value');
    }catch(e){}

    try{
      // 优先用 setData（某些版本 setStore 不稳定）
      if(slot.setData){
        slot.setData(data);
        return;
      }
    }catch(e){}

    var stNew = null;
    try{
      stNew = Ext.create('Ext.data.Store', { fields: ['text','value'], data: data });
    }catch(e){
      stNew = null;
    }

    try{
      if(stNew && slot.setStore){
        slot.setStore(stNew);
      } else {
        var st = slot.getStore && slot.getStore();
        if(st){
          if(st.removeAll) st.removeAll(true);
          if(st.loadData) st.loadData(data, false);
        }
      }
    }catch(e){}

    try{ if(slot.refresh) slot.refresh(); }catch(e){}
    try{ if(slot.updateLayout) slot.updateLayout(); }catch(e){}
  }

  function setSlotValue(slot, val){
    if(!slot) return;
    if(slot.setValue) slot.setValue(val);
  }

  function getPickerValueSafe(pkr){
    var ys = getSlotByName(pkr,'year');
    var ms = getSlotByName(pkr,'month');
    var ds = getSlotByName(pkr,'day');

    var y = valOf(ys && ys.getValue ? ys.getValue() : null);
    var m = valOf(ms && ms.getValue ? ms.getValue() : null);
    var d = valOf(ds && ds.getValue ? ds.getValue() : null);

    if(!y || !m || !d){
      var v = (pkr.getValue && pkr.getValue()) || {};
      y = y || valOf(v.year);
      m = m || valOf(v.month);
      d = d || valOf(v.day);
    }
    return { year:y, month:m, day:d };
  }

  // 年范围读取：field + initialConfig + picker.yearFrom/yearTo
  function getYearRange(pkr){
    var yMin = null, yMax = null;

    yMin = valOf(field.minYear) || yMin;
    yMax = valOf(field.maxYear) || yMax;
    yMin = yMin !== null ? yMin : valOf(field.MinYear);
    yMax = yMax !== null ? yMax : valOf(field.MaxYear);

    var ic = field.initialConfig || null;
    if(ic){
      yMin = yMin !== null ? yMin : valOf(ic.minYear);
      yMax = yMax !== null ? yMax : valOf(ic.maxYear);
      yMin = yMin !== null ? yMin : valOf(ic.MinYear);
      yMax = yMax !== null ? yMax : valOf(ic.MaxYear);
    }

    if(pkr){
      yMin = yMin !== null ? yMin : valOf(pkr.yearFrom);
      yMax = yMax !== null ? yMax : valOf(pkr.yearTo);
      yMin = yMin !== null ? yMin : (pkr.getYearFrom ? valOf(pkr.getYearFrom()) : null);
      yMax = yMax !== null ? yMax : (pkr.getYearTo ? valOf(pkr.getYearTo()) : null);
    }

    // 兜底：如果你看到 2024，说明上面没取到 Min/MaxYear，落到这里了
    var yNow = (new Date()).getFullYear();
    if(yMin === null) yMin = yNow - 2;
    if(yMax === null) yMax = yNow;

    if(yMin > yMax){ var t=yMin; yMin=yMax; yMax=t; }
    return { yMin:yMin, yMax:yMax };
  }

  // ====== ✅ 日列专用修复：模板 + 过滤 ======
  function ensureDayTpl(daySlot){
    if(!daySlot || daySlot.__dayTplFixed) return;
    daySlot.__dayTplFixed = true;

    try{
      if(daySlot.setDisplayField) daySlot.setDisplayField('value');
      if(daySlot.setValueField)   daySlot.setValueField('value');

      // 无论 record 有没有 text，都按 value 渲染成 “XX 日”
      if(window.Ext && Ext.XTemplate && daySlot.setItemTpl){
        daySlot.setItemTpl(new Ext.XTemplate(
          '{[Ext.String.leftPad(values.value,2,"0")]} 日'
        ));
      }else if(daySlot.setItemTpl){
        daySlot.setItemTpl('{value} 日');
      }
    }catch(e){}
  }

  function filterDayRange(daySlot, maxDay){
    if(!daySlot) return;
    var st = daySlot.getStore && daySlot.getStore();
    if(!st) return;

    try{
      if(st.clearFilter) st.clearFilter();
      if(st.filterBy){
        st.filterBy(function(rec){
          var v = null;
          try{ v = rec.get ? rec.get('value') : (rec.data ? rec.data.value : null); }catch(e){}
          v = parseInt(v, 10);
          if(isNaN(v)) return false;
          return v >= 1 && v <= maxDay;
        });
      }
    }catch(e){}

    try{ if(daySlot.refresh) daySlot.refresh(); }catch(e){}
    try{ if(daySlot.updateLayout) daySlot.updateLayout(); }catch(e){}
  }

  // 业务逻辑：当年限月，当月限日，排除今天
  function rebuildByValue(pkr, value){
    var yr = getYearRange(pkr);
    var yMin = yr.yMin, yMax = yr.yMax;

    var now = todayParts();
    var yNow = now.y, mNow = now.m, dNow = now.d;
    if(EXCLUDE_TODAY) dNow = Math.max(1, dNow - 1);

    var y = valOf(value.year);
    var m = valOf(value.month);
    var d = valOf(value.day);

    if(!y || !m || !d){
      var d0 = parseFieldDate();
      y = d0.getFullYear(); m = d0.getMonth()+1; d = d0.getDate();
    }

    if(y < yMin) y = yMin;
    if(y > yMax) y = yMax;

    var maxMonth = (y === yNow) ? mNow : 12;
    if(m < 1) m = 1;
    if(m > maxMonth) m = maxMonth;

    var maxDay = daysInMonth(y, m);
    if(y === yNow && m === mNow) maxDay = Math.min(maxDay, dNow);
    if(d < 1) d = 1;
    if(d > maxDay) d = maxDay;

    // 年/月照旧
    resetSlotStore(getSlotByName(pkr,'year'),  buildYears(yMin, yMax));
    resetSlotStore(getSlotByName(pkr,'month'), buildMonths(maxMonth));

    // ✅ 日：不再“换 store”，直接模板+过滤（能真正卡住今天/昨天）
    var daySlot = getSlotByName(pkr,'day');
    ensureDayTpl(daySlot);
    filterDayRange(daySlot, maxDay);

    Ext.defer(function(){
      setSlotValue(getSlotByName(pkr,'year'),  y);
      setSlotValue(getSlotByName(pkr,'month'), m);
      setSlotValue(daySlot, d);
    }, 0);
  }

  function patchNativePicker(){
    var pkr = field.getPicker && field.getPicker();
    if(!pkr) return;
    if(pkr.__smartPatched) return;
    pkr.__smartPatched = true;

    try{
      if(pkr.getDoneButton)   pkr.getDoneButton().setText('确定');
      if(pkr.getCancelButton) pkr.getCancelButton().setText('取消');
    }catch(e){}

    pkr.on('show', function(){
      var d0 = parseFieldDate();
      var v0 = { year:d0.getFullYear(), month:d0.getMonth()+1, day:d0.getDate() };

      try{
        pkr.__updating = true;
        if(pkr.setValue) pkr.setValue(v0);
      } finally {
        pkr.__updating = false;
      }

      try{
        pkr.__updating = true;
        rebuildByValue(pkr, getPickerValueSafe(pkr));
      } finally {
        pkr.__updating = false;
      }
    });

    var onMove = function(){
      if(pkr.__updating) return;
      pkr.__updating = true;
      try{
        rebuildByValue(pkr, getPickerValueSafe(pkr));
      } finally {
        pkr.__updating = false;
      }
    };
    pkr.on('pick', onMove);
    pkr.on('change', onMove);

    pkr.on('done', function(){
      var v = getPickerValueSafe(pkr);
      if(!v.year || !v.month || !v.day) return;

      var dt = new Date(v.year, v.month-1, v.day);

      Ext.defer(function(){
        if(field.setValue) field.setValue(dt);
        if(field.setRawValue && window.Ext && Ext.Date){
          field.setRawValue(Ext.Date.format(dt, 'Y-m-d'));
        }
        if(field.fireEvent){
          field.fireEvent('change', field, dt);
          field.fireEvent('changevalue', field, dt);
        }
      }, 30);
    });
  }

  Ext.defer(patchNativePicker, 0);
  Ext.defer(patchNativePicker, 200);
}

 

 

看效果：

 

实现思路 + 代码讲解（核心抓住 3 点）

思路总览：弃用 UnimDatePicker 内置滚轮，自己接管三列 Picker

你原需求其实是：

• 年：由控件自身 min/max 控制（你已经有）

• 月/日：不是禁用，而是“列表里就不出现非法项”

• 并且是动态链式：选 year → 立刻重算 month/day；选 month → 立刻重算 day

• 还要“打开时就按默认值立刻裁剪”

Ext.field.Date（UnimDatePicker）自带的 Ext.picker.Date 内部会反复重建 slots / store，导致你在它内部改 month/day 数据很容易被覆盖。我们之前反复卡在这里，就是这个原因。

所以最终正确姿势是：
不要改它内部实现，而是：

1. UnimDatePicker1 只当一个“显示输入框”（显示日期字符串）

2. 点击它时，不弹出原生 picker

3. 我们自己创建一个 Ext.picker.Picker（三个 slots：year/month/day）

4. 我们完全控制 month/day 的数据源（store），所以“只能显示合法项”天然成立

5. 在 pick 事件里实时重算并刷新数据源（动态联动）

6. 在 done 事件里把最终 Date 写回到 field（这时才真正提交）

---

代码结构讲解（按模块拆给你）

A. 为什么用 afterCreate

afterCreate 时 field 已经是 Ext 组件实例，能安全挂钩 field.showPicker，还能创建我们的 picker 并缓存到 field 上。

B. 覆盖 showPicker（关键一刀）

 

field.__origShowPicker = field.showPicker; field.showPicker = function(){ // 构造默认值 value // rebuildByValue() 先裁剪列表 // picker.setValue(value) // picker.show() };

这一刀的意义：
用户点日期框时，系统不再弹原生 DatePicker，而是弹我们自建 Picker。

C. 三列 slots（y-m-d）

 

slots: [ { name:'year', data: buildYears(yMin, yMax) }, { name:'month', data: buildMonths(12) }, { name:'day', data: buildDays(31) } ]

slots 的数据就是你看到的“滚轮列表项”。
我们想让某些月份/日期“不出现”，只要把对应 slot 的 store setData 成更短的数组即可。

D. 动态联动：pick 事件里重算范围

 

pick: function(pkr, value){ rebuildByValue(pkr, value, false); }

rebuildByValue() 做的事就三步：

1. 算 “当前应该允许的 monthMax / dayMax”

2. monthSlot.setData(1..monthMax)，daySlot.setData(1..dayMax)

3. 如果当前选中的 month/day 超界，夹回合法值，再 setValue

所以你想要的体验“列表里根本没有非法项”，在这里实现。

E. 写回：done 才 setValue 到 field

 

done: function(pkr, value){ field.setValue(new Date(y, m-1, d)); }

这保证了：
滚轮滚动过程只是“预览/选择”，不会把 field 的值乱改；只有点“确定”才提交。