@tuya-miniapp/smart-ui 2.2.1-beta-2 → 2.2.1-beta-3

package/dist/calendar/calendar.wxml

@@ -4,7 +4,7 @@
   <header
     title="{{ title }}"
     showTitle="{{ showTitle }}"
-    subtitle="{{ type === 'year' ? '' : type === 'month' ? computed.formatYearTitle(currentDate, visibleIndex, locale.yearFormatter) : computed.formatMonthTitle(months[visibleIndex], subFormatter) }}"
+    subtitle="{{ type === 'year' ? '' : type === 'month' ? computed.formatYearTitle(originCurrentDateMonthly, visibleIndex, locale.yearFormatter) : computed.formatMonthTitle(months[visibleIndex], subFormatter) }}"
     subFormatter="{{locale.subFormatter || 'YYYY-MM'}}"
     showSubtitle="{{ showSubtitle }}"
     firstDayOfWeek="{{ firstDayOfWeek }}"
@@ -59,6 +59,8 @@
       date="{{currentDate}}"
       color="{{color}}"
       readonly="{{readonly}}"
+      visibleIndex="{{visibleIndex}}"
+      bind:changemonthtitle="onChangeMonthTitleDate"
     />
   </block>
 

package/dist/calendar/index.js

@@ -17,6 +17,11 @@ SmartComponent({
                     this.initRect();
                     this.scrollIntoView();
                 }
+                else {
+                    this.setData({
+                        visibleIndex: 0,
+                    });
+                }
             },
         },
         locale: {
@@ -142,6 +147,7 @@ SmartComponent({
     data: {
         subtitle: '',
         currentDate: null,
+        originCurrentDateMonthly: null,
         scrollIntoView: '',
         visibleIndex: 0,
         months: [],
@@ -174,12 +180,8 @@ SmartComponent({
                 return;
             }
             if (this.data.type === 'month') {
-                const nextDate = new Date(this.data.currentDate);
-                nextDate.setFullYear(nextDate.getFullYear() - 1);
-                this.select(nextDate, true);
                 this.setData({
                     visibleIndex,
-                    currentDate: nextDate,
                 });
                 return;
             }
@@ -198,12 +200,8 @@ SmartComponent({
                 return;
             }
             if (this.data.type === 'month') {
-                const nextDate = new Date(this.data.currentDate);
-                nextDate.setFullYear(nextDate.getFullYear() + 1);
-                this.select(nextDate, true);
                 this.setData({
                     visibleIndex,
-                    currentDate: nextDate,
                 });
                 return;
             }
@@ -214,7 +212,8 @@ SmartComponent({
             }
         },
         reset() {
-            this.setData({ currentDate: this.getInitialDate(this.data.defaultDate) });
+            const currentDate = this.getInitialDate(this.data.defaultDate);
+            this.setData({ currentDate, visibleIndex: 0 });
             this.scrollIntoView();
         },
         initData() {
@@ -227,6 +226,8 @@ SmartComponent({
             const isMonth = this.data.type === 'month';
             const data = {
                 currentDate,
+                // 初始化时记录一份，用于month列表展示头部
+                originCurrentDateMonthly: currentDate,
                 months,
                 visibleIndex: visibleIndex,
             };
@@ -368,6 +369,16 @@ SmartComponent({
             }
             const date = event.detail;
             this.select(date, true);
+            this.setData({
+                visibleIndex: 0,
+            });
+        },
+        onChangeMonthTitleDate(event) {
+            if (this.data.originCurrentDateMonthly !== event.detail) {
+                this.setData({
+                    originCurrentDateMonthly: event.detail,
+                });
+            }
         },
         unselect(dateArray) {
             const date = dateArray[0];

package/dist/calendar/index.wxs

@@ -50,7 +50,7 @@ function formatYearTitle(date, offset, formatter = 'YYYY') {
   return formatter.replace('YYYY', year + '');
 }
 
-module.exports = {
+module.exports = {  
   getMonths: getMonths,
   getVisible: getVisible,
   getButtonDisabled: getButtonDisabled,

package/dist/calendar-month-list/index.js

@@ -11,11 +11,6 @@ SmartComponent({
     props: {
         date: {
             type: null,
-            observer(newVal, oldVal) {
-                if (newVal !== oldVal) {
-                    this.getMonthList();
-                }
-            },
         },
         color: {
             type: String,
@@ -37,6 +32,15 @@ SmartComponent({
             type: null,
             value: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
         },
+        visibleIndex: {
+            type: Number,
+            value: 0,
+            observer(newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    this.getMonthList(newVal);
+                }
+            },
+        },
     },
     /**
      * 组件的初始数据
@@ -46,19 +50,20 @@ SmartComponent({
         currentMonth: null,
     },
     created() {
-        this.getMonthList();
+        this.getMonthList(0);
     },
     /**
      * 组件的方法列表
      */
     methods: {
-        getMonthList() {
+        getMonthList(visibleIndex) {
             const { minDate, maxDate, monthsFormatter = [] } = this.data;
-            const curDate = new Date(this.data.date);
+            const currentDate = new Date(this.data.date);
+            const curDate = new Date(currentDate.getFullYear() + visibleIndex, currentDate.getMonth(), currentDate.getDay());
             const cur = curDate.getFullYear();
             const curMonthDate = new Date(curDate.getFullYear(), curDate.getMonth(), 1);
-            const start = new Date(cur, 0, 1).getTime();
-            const end = new Date(cur, 11, 31).getTime();
+            const start = new Date(cur, 0, 1, 0, 0, 0).getTime();
+            const end = new Date(cur, 11, 31, 23, 59, 59).getTime();
             const minDateTime = new Date(minDate).getTime();
             const maxDateTime = new Date(maxDate).getTime();
             const months = getMonths(start, end);
@@ -80,6 +85,7 @@ SmartComponent({
                 months: monthlist,
                 currentMonth: curMonthDate.getTime(),
             });
+            this.$emit('changemonthtitle', curDate.getTime());
         },
         onClick(event) {
             if (this.data.readonly)

package/dist/calendar-month-list/index.wxml

@@ -4,7 +4,7 @@
       <view wx:if="{{item.type === 'disabled'}}" class="item item_disabled" data-index="{{index}}">
         {{item.text}}
       </view>
-      <view wx:elif="{{currentMonth === item.value}}" class="item item_active" data-index="{{index}}" bindtap="onClick" style="background: {{ color }};">
+      <view wx:elif="{{date === item.value}}" class="item item_active" data-index="{{index}}" bindtap="onClick" style="background: {{ color }};">
         {{item.text}}
       </view>
       <view wx:else class="item" data-index="{{index}}" bindtap="onClick">

package/dist/calendar-year-list/index.js

@@ -76,15 +76,15 @@ SmartComponent({
             const offset = visibleIndex * 12;
             const start = new Date(cur + offset - 5, 0, 1).getTime();
             const end = new Date(cur + offset + 6, 11, 31).getTime();
-            const minStart = new Date(minDate).getTime();
-            const maxStart = new Date(maxDate).getTime();
+            const minStart = new Date(minDate).getFullYear();
+            const maxStart = new Date(maxDate).getFullYear();
             const years = getYears(start, end);
             const yearlist = years.map(date => {
                 const yearVal = new Date(date).getFullYear();
-                const curTime = new Date(date).getTime();
+                const curTime = new Date(date).getFullYear();
                 let isDisabled = false;
                 if (minDate && maxDate) {
-                    isDisabled = curTime <= minStart || curTime >= maxStart;
+                    isDisabled = curTime < minStart || curTime > maxStart;
                 }
                 return {
                     value: date,

package/lib/calendar/calendar.wxml

@@ -4,7 +4,7 @@
   <header
     title="{{ title }}"
     showTitle="{{ showTitle }}"
-    subtitle="{{ type === 'year' ? '' : type === 'month' ? computed.formatYearTitle(currentDate, visibleIndex, locale.yearFormatter) : computed.formatMonthTitle(months[visibleIndex], subFormatter) }}"
+    subtitle="{{ type === 'year' ? '' : type === 'month' ? computed.formatYearTitle(originCurrentDateMonthly, visibleIndex, locale.yearFormatter) : computed.formatMonthTitle(months[visibleIndex], subFormatter) }}"
     subFormatter="{{locale.subFormatter || 'YYYY-MM'}}"
     showSubtitle="{{ showSubtitle }}"
     firstDayOfWeek="{{ firstDayOfWeek }}"
@@ -59,6 +59,8 @@
       date="{{currentDate}}"
       color="{{color}}"
       readonly="{{readonly}}"
+      visibleIndex="{{visibleIndex}}"
+      bind:changemonthtitle="onChangeMonthTitleDate"
     />
   </block>
 

package/lib/calendar/demo/index.js

@@ -4,21 +4,15 @@ var component_1 = require("../../common/component");
 (0, component_1.SmartComponent)({
     data: {
         // day
-        curDayDate: new Date(2024, 0, 15).getTime(),
-        minDayDate: new Date(2024, 0, 4).getTime(),
-        maxDayDate: new Date(2024, 1, 20).getTime(),
+        curDayDate: new Date(2024, 1, 1, 0, 0, 0).getTime(),
+        minDayDate: new Date(2023, 0, 4).getTime(),
+        maxDayDate: new Date(2024, 3, 20).getTime(),
         // weekday
-        curWeekDayDate: [
-            new Date(2024, 0, 15).getTime(),
-            new Date(2024, 0, 21).getTime(),
-        ],
+        curWeekDayDate: [new Date(2024, 0, 15).getTime(), new Date(2024, 0, 21).getTime()],
         minWeekDayDate: new Date(2024, 0, 4).getTime(),
         maxWeekDayDate: new Date(2024, 1, 20).getTime(),
         // range
-        curRangeDayDate: [
-            new Date(2024, 0, 10).getTime(),
-            new Date(2024, 0, 20).getTime(),
-        ],
+        curRangeDayDate: [new Date(2024, 0, 10).getTime(), new Date(2024, 0, 20).getTime()],
         minRangeDayDate: new Date(2024, 0, 4).getTime(),
         maxRangeDayDate: new Date(2024, 1, 20).getTime(),
         // month
@@ -26,8 +20,8 @@ var component_1 = require("../../common/component");
         minMonthDate: new Date(2024, 2, 1).getTime(),
         maxMonthDate: new Date(2025, 9, 31).getTime(),
         // year
-        curYearDate: new Date(2017, 6, 1).getTime(),
-        minYearDate: new Date(2012, 0, 1).getTime(),
+        curYearDate: new Date(2025, 0, 23).getTime(),
+        minYearDate: new Date(2024, 10, 12).getTime(),
         maxYearDate: new Date(2029, 10, 31).getTime(),
         // locale
         confirmText: I18n.t('confirm'),
@@ -59,13 +53,14 @@ var component_1 = require("../../common/component");
                 I18n.t('cal_Sept'),
                 I18n.t('cal_Oct'),
                 I18n.t('cal_Nov'),
-                I18n.t('cal_Dec')
-            ]
+                I18n.t('cal_Dec'),
+            ],
         },
         showDayPicker: false,
         dayClassMap: {
-            '2024-01-17': "calendar-disabled"
-        }
+            '2024-01-17': 'calendar-disabled',
+        },
+        type: 'single',
     },
     methods: {
         setCurDay: function (event) {
@@ -104,5 +99,12 @@ var component_1 = require("../../common/component");
                 showDayPicker: !this.data.showDayPicker,
             });
         },
+        selectDate: function (e) { },
+        changeType: function (e) {
+            var _a, _b;
+            this.setData({
+                type: (_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.type,
+            });
+        },
     },
 });

package/lib/calendar/index.js

@@ -31,6 +31,11 @@ var getTime = function (date) { return (date instanceof Date ? date.getTime() :
                     this.initRect();
                     this.scrollIntoView();
                 }
+                else {
+                    this.setData({
+                        visibleIndex: 0,
+                    });
+                }
             },
         },
         locale: {
@@ -156,6 +161,7 @@ var getTime = function (date) { return (date instanceof Date ? date.getTime() :
     data: {
         subtitle: '',
         currentDate: null,
+        originCurrentDateMonthly: null,
         scrollIntoView: '',
         visibleIndex: 0,
         months: [],
@@ -188,12 +194,8 @@ var getTime = function (date) { return (date instanceof Date ? date.getTime() :
                 return;
             }
             if (this.data.type === 'month') {
-                var nextDate = new Date(this.data.currentDate);
-                nextDate.setFullYear(nextDate.getFullYear() - 1);
-                this.select(nextDate, true);
                 this.setData({
                     visibleIndex: visibleIndex,
-                    currentDate: nextDate,
                 });
                 return;
             }
@@ -212,12 +214,8 @@ var getTime = function (date) { return (date instanceof Date ? date.getTime() :
                 return;
             }
             if (this.data.type === 'month') {
-                var nextDate = new Date(this.data.currentDate);
-                nextDate.setFullYear(nextDate.getFullYear() + 1);
-                this.select(nextDate, true);
                 this.setData({
                     visibleIndex: visibleIndex,
-                    currentDate: nextDate,
                 });
                 return;
             }
@@ -228,7 +226,8 @@ var getTime = function (date) { return (date instanceof Date ? date.getTime() :
             }
         },
         reset: function () {
-            this.setData({ currentDate: this.getInitialDate(this.data.defaultDate) });
+            var currentDate = this.getInitialDate(this.data.defaultDate);
+            this.setData({ currentDate: currentDate, visibleIndex: 0 });
             this.scrollIntoView();
         },
         initData: function () {
@@ -241,6 +240,8 @@ var getTime = function (date) { return (date instanceof Date ? date.getTime() :
             var isMonth = this.data.type === 'month';
             var data = {
                 currentDate: currentDate,
+                // 初始化时记录一份，用于month列表展示头部
+                originCurrentDateMonthly: currentDate,
                 months: months,
                 visibleIndex: visibleIndex,
             };
@@ -386,6 +387,16 @@ var getTime = function (date) { return (date instanceof Date ? date.getTime() :
             }
             var date = event.detail;
             this.select(date, true);
+            this.setData({
+                visibleIndex: 0,
+            });
+        },
+        onChangeMonthTitleDate: function (event) {
+            if (this.data.originCurrentDateMonthly !== event.detail) {
+                this.setData({
+                    originCurrentDateMonthly: event.detail,
+                });
+            }
         },
         unselect: function (dateArray) {
             var date = dateArray[0];

package/lib/calendar/index.wxs

@@ -50,7 +50,7 @@ function formatYearTitle(date, offset, formatter = 'YYYY') {
   return formatter.replace('YYYY', year + '');
 }
 
-module.exports = {
+module.exports = {  
   getMonths: getMonths,
   getVisible: getVisible,
   getButtonDisabled: getButtonDisabled,

package/lib/calendar-month-list/index.js

@@ -13,11 +13,6 @@ var maxMonthDate = new Date(currentYear + 10, 12, 31).getTime();
     props: {
         date: {
             type: null,
-            observer: function (newVal, oldVal) {
-                if (newVal !== oldVal) {
-                    this.getMonthList();
-                }
-            },
         },
         color: {
             type: String,
@@ -39,6 +34,15 @@ var maxMonthDate = new Date(currentYear + 10, 12, 31).getTime();
             type: null,
             value: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
         },
+        visibleIndex: {
+            type: Number,
+            value: 0,
+            observer: function (newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    this.getMonthList(newVal);
+                }
+            },
+        },
     },
     /**
      * 组件的初始数据
@@ -48,19 +52,20 @@ var maxMonthDate = new Date(currentYear + 10, 12, 31).getTime();
         currentMonth: null,
     },
     created: function () {
-        this.getMonthList();
+        this.getMonthList(0);
     },
     /**
      * 组件的方法列表
      */
     methods: {
-        getMonthList: function () {
+        getMonthList: function (visibleIndex) {
             var _a = this.data, minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.monthsFormatter, monthsFormatter = _b === void 0 ? [] : _b;
-            var curDate = new Date(this.data.date);
+            var currentDate = new Date(this.data.date);
+            var curDate = new Date(currentDate.getFullYear() + visibleIndex, currentDate.getMonth(), currentDate.getDay());
             var cur = curDate.getFullYear();
             var curMonthDate = new Date(curDate.getFullYear(), curDate.getMonth(), 1);
-            var start = new Date(cur, 0, 1).getTime();
-            var end = new Date(cur, 11, 31).getTime();
+            var start = new Date(cur, 0, 1, 0, 0, 0).getTime();
+            var end = new Date(cur, 11, 31, 23, 59, 59).getTime();
             var minDateTime = new Date(minDate).getTime();
             var maxDateTime = new Date(maxDate).getTime();
             var months = (0, utils_1.getMonths)(start, end);
@@ -82,6 +87,7 @@ var maxMonthDate = new Date(currentYear + 10, 12, 31).getTime();
                 months: monthlist,
                 currentMonth: curMonthDate.getTime(),
             });
+            this.$emit('changemonthtitle', curDate.getTime());
         },
         onClick: function (event) {
             if (this.data.readonly)

package/lib/calendar-month-list/index.wxml

@@ -4,7 +4,7 @@
       <view wx:if="{{item.type === 'disabled'}}" class="item item_disabled" data-index="{{index}}">
         {{item.text}}
       </view>
-      <view wx:elif="{{currentMonth === item.value}}" class="item item_active" data-index="{{index}}" bindtap="onClick" style="background: {{ color }};">
+      <view wx:elif="{{date === item.value}}" class="item item_active" data-index="{{index}}" bindtap="onClick" style="background: {{ color }};">
         {{item.text}}
       </view>
       <view wx:else class="item" data-index="{{index}}" bindtap="onClick">

package/lib/calendar-year-list/index.js

@@ -78,15 +78,15 @@ var component_1 = require("../common/component");
             var offset = visibleIndex * 12;
             var start = new Date(cur + offset - 5, 0, 1).getTime();
             var end = new Date(cur + offset + 6, 11, 31).getTime();
-            var minStart = new Date(minDate).getTime();
-            var maxStart = new Date(maxDate).getTime();
+            var minStart = new Date(minDate).getFullYear();
+            var maxStart = new Date(maxDate).getFullYear();
             var years = (0, utils_1.getYears)(start, end);
             var yearlist = years.map(function (date) {
                 var yearVal = new Date(date).getFullYear();
-                var curTime = new Date(date).getTime();
+                var curTime = new Date(date).getFullYear();
                 var isDisabled = false;
                 if (minDate && maxDate) {
-                    isDisabled = curTime <= minStart || curTime >= maxStart;
+                    isDisabled = curTime < minStart || curTime > maxStart;
                 }
                 return {
                     value: date,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuya-miniapp/smart-ui",
-  "version": "2.2.1-beta-2",
+  "version": "2.2.1-beta-3",
   "author": "MiniApp Team",
   "license": "MIT",
   "miniprogram": "lib",