wx-mini-weview/components/calendar-picker/calendar-picker.js

weixin UI

Component({
  options: {
    styleIsolation: 'apply-shared'
  },
  properties: {
    // 基础属性
    value: {
      type: null, // 允许任意类型
      value: null,
      observer(newVal) {
        if (this.data._skipValueObserver) return;
        
        if (newVal) {
          this.handleValueChange(newVal);
        }
      }
    },
    placeholder: {
      type: String,
      value: '请选择日期'
    },
    disabled: {
      type: Boolean,
      value: false
    },
    
    // 日历组件相关属性
    theme: { 
      type: String, 
      value: 'wv-theme-primary wv-content-light' 
    },
    formatDatetime: {
      type: String, 
      value: 'YYYY-MM-DD' 
    },
    minDate: { 
      type: String, 
      value: '' 
    },
    maxDate: { 
      type: String, 
      value: '' 
    },
    selectMode: { 
      type: String, 
      value: 'single' 
    },
    disabledDaysOfWeek: { 
      type: Array, 
      value: [] 
    },
    disabledDates: { 
      type: Array, 
      value: [] 
    },
    
    // 面板相关属性
    title: {
      type: String,
      value: '选择日期'
    },
    
    // 确认按钮相关
    showHeader: {
      type: Boolean,
      value: false
    }, 
    showFooter: {
      type: Boolean,
      value: true
    },
    confirmText: {
      type: String,
      value: '确定'
    },
    confirmBtnTheme: {
      type: String,
      value: ''
    },
    
    // 自动确认
    autoConfirm: {
      type: Boolean,
      value: false
    },
    
    // 尺寸属性
    size: {
      type: String,
      value: 'default'
    },
    
    // 范围模式最大展示项数
    rangeListMax: {
      type: Number,
      value: 5
    }
  },

  data: {
    calendarData: null,  // Store calendar event data (renamed from eventData)

    _skipValueObserver: false
  },

  lifetimes: {
    ready() {
      const calendar = this.selectComponent('#calendar');
      if (calendar) {
        calendar.setData({ value: this.data.value });
      }
    }
  },

  methods: {    
    handleInputFocus() {
      if (this.properties.disabled) return;
      
      const calendarPanel = this.selectComponent('#calendar-panel');
      if (calendarPanel) {
        calendarPanel.show(() => {
          setTimeout(() => {
            this.scrollToSelectedDate();
          }, 300);
        });
      }
    },
    
    scrollToSelectedDate() {
      const calendar = this.selectComponent('#calendar');
      if (calendar) {
        calendar.scrollToSelectedDate();
      }
    },
    
    closePanel() {
      const calendarPanel = this.selectComponent('#calendar-panel');
      if (calendarPanel) {
        calendarPanel.hide();
      }
    },

    handleValueChange(value) {
      const calendar = this.selectComponent('#calendar');
      if (calendar) {
        calendar.setData({ value });
      }
    },
    
    handleDateSelect(e) {
      const that = this
      that.setData({
        calendarData: e.detail
      });

      if (e.detail.selectFinished) {
        that.setData({
          _skipValueObserver: true
        }, () => {
          that.setData({
            value: e.detail.value
          }, () => {
            that.setData({
              _skipValueObserver: false
            })
          })
        });
        that.triggerEvent('change', e.detail);
      }

      if (that.properties.autoConfirm && e.detail.selectFinished && (
          (that.properties.selectMode === 'single') || 
          (that.properties.selectMode === 'range')
      )){
        that.closePanel();
      }
    }
  }
});