@tuya-miniapp/smart-ui 0.0.1-beta-1

package/lib/custom-keyboard/index.js

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+(0, component_1.VantComponent)({
+    props: {
+        /**
+         * @description.zh 当前值
+         * @description.en The current value
+         */
+        value: {
+            type: String,
+            value: '',
+            observer: function () {
+                this.setData({ currValue: this.data.value });
+            },
+        },
+        /**
+         * @description.zh 占位符文案
+         * @description.en The placeholder text
+         */
+        placeholder: {
+            type: String,
+            value: 'please input',
+        },
+        /**
+         * @description.zh 用于适配进制功能（取值范围1-10）
+         * @description.en Used to adapt the hexadecimal function (value range 1-9)
+         */
+        digitalBase: {
+            type: Number,
+            value: 10,
+            observer: 'init',
+        },
+        /**
+         * @description.zh 是否隐藏零
+         * @description.en Whether to hide zero
+         */
+        isHideZero: {
+            type: Boolean,
+            value: false,
+        },
+        /**
+         * @description.zh 数字键盘的确认按钮背景色
+         * @description.en The background color of the confirmation button of the numeric keypad
+         */
+        confirmColor: String,
+        /**
+         * @description.zh 确认按钮文案
+         * @description.en The text of the confirm button
+         */
+        confirmText: {
+            type: String,
+            value: 'Confirm',
+        },
+        /**
+         * @description.zh 输入框容器样式
+         * @description.en The style of confirm button
+         */
+        inputContainerStyle: String,
+        /**
+         * @description.zh 当前值的样式（适用于placeholder样式）
+         * @description.en The style of input box container
+         */
+        valueTextStyle: String,
+        /**
+         * @description.zh 确认按钮的样式
+         * @description.en The style of confirm button
+         */
+        confirmTextStyle: String,
+    },
+    data: {
+        currValue: '',
+        visible: false,
+        maxNum: 0,
+        numberArray: [1],
+        prefix: 'keyboard',
+        row: 1,
+        img_hidden_light: '',
+        img_delete_light: '',
+    },
+    created: function () {
+        this.init();
+        this.setData({
+            img_hidden_light: this.toSvgCssBackground(this.getHiddenLightSvgNode('#333')),
+            img_delete_light: this.toSvgCssBackground(this.getDeleteLightSvgNode('#333')),
+        });
+    },
+    methods: {
+        init: function () {
+            var _a = this.data, isHideZero = _a.isHideZero, digitalBase = _a.digitalBase;
+            var maxNum = isHideZero ? +digitalBase : +digitalBase - 1; // 支持的最大数字
+            var numberArray = Array.from(Array(maxNum), function (_, index) { return index + 1; });
+            !isHideZero && numberArray.push(0);
+            numberArray.push(-2);
+            this.setData({
+                maxNum: maxNum,
+                numberArray: numberArray,
+                row: Math.ceil(numberArray.length / 3),
+            });
+        },
+        confirm: function () {
+            this.setData({
+                visible: false,
+            });
+            this.$emit('confirm', this.data.currValue);
+        },
+        changeValue: function (item) {
+            var i = Number(item.currentTarget.dataset.item);
+            if (i === -2) {
+                this.setData({
+                    visible: false,
+                });
+                return;
+            }
+            var currValue = this.data.currValue;
+            var newValue = i === -1
+                ? currValue.length
+                    ? currValue.slice(0, currValue.length - 1)
+                    : ''
+                : "".concat(currValue).concat(i);
+            this.setData({
+                currValue: newValue,
+            });
+            this.$emit('change', newValue);
+        },
+        handlePassword: function () {
+            this.setData({ visible: true });
+        },
+        onMaskPress: function () {
+            this.setData({ visible: false });
+        },
+        getHiddenLightSvgNode: function (color) {
+            return "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"none\" version=\"1.1\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"><g><g><path d=\"M17.701,29.701C18.2554,30.2554,18.84116,30.84116,19.28266,31.28266C19.673189999999998,31.673189999999998,20.326810000000002,31.673189999999998,20.71734,31.28266C21.158839999999998,30.84116,21.7446,30.2554,22.299,29.701C22.92896,29.07103,22.44369,28,21.55278,28C20.56722,28,19.43278,28,18.44722,28C17.55631,28,17.07103,29.07103,17.701,29.701\" fill=\"#333333\" fill-opacity=\"1\"/></g><g><rect x=\"15\" y=\"20\" width=\"10\" height=\"2\" rx=\"1\" fill=\"#333333\" fill-opacity=\"1\"/></g><g><path d=\"M7,10L7,24Q7,24.0983,7.00963055,24.196Q7.0192611,24.2938,7.0384294,24.3902Q7.0575978,24.4865,7.0861193,24.5806Q7.114641,24.6746,7.152241,24.7654Q7.189841,24.8561,7.236157,24.9428Q7.282474,25.0294,7.337061,25.1111Q7.391648,25.1928,7.453979,25.2688Q7.516311,25.3447,7.585786,25.4142Q7.6552620000000005,25.4837,7.731213,25.546Q7.807164,25.6084,7.888859,25.6629Q7.970554,25.7175,8.05721,25.7638Q8.14386,25.8102,8.23463,25.8478Q8.32541,25.8854,8.41943,25.9139Q8.51345,25.9424,8.60982,25.9616Q8.70619,25.9807,8.80397,25.9904Q8.90175,26,9,26L31,26Q31.0983,26,31.196,25.9904Q31.2938,25.9807,31.3902,25.9616Q31.4865,25.9424,31.5806,25.9139Q31.6746,25.8854,31.7654,25.8478Q31.8561,25.8102,31.9428,25.7638Q32.029399999999995,25.7175,32.1111,25.6629Q32.1928,25.6084,32.2688,25.546Q32.3447,25.4837,32.4142,25.4142Q32.4837,25.3447,32.546,25.2688Q32.6083,25.1928,32.6629,25.1111Q32.7175,25.0294,32.7638,24.9428Q32.810199999999995,24.8561,32.8478,24.7654Q32.885400000000004,24.6746,32.9139,24.5806Q32.9424,24.4865,32.961600000000004,24.3902Q32.9807,24.2938,32.9904,24.196Q33,24.0983,33,24L33,10Q33,9.90175,32.9904,9.80397Q32.9807,9.70619,32.961600000000004,9.60982Q32.9424,9.51345,32.9139,9.41943Q32.885400000000004,9.32541,32.8478,9.23463Q32.810199999999995,9.14386,32.7638,9.05721Q32.7175,8.970554,32.6629,8.888859Q32.6083,8.807164,32.546,8.731213Q32.4837,8.655262,32.4142,8.585786Q32.3447,8.516311,32.2688,8.453979Q32.1928,8.391648,32.1111,8.337061Q32.029399999999995,8.282474,31.9428,8.236157Q31.8561,8.189841,31.7654,8.152241Q31.6746,8.114641,31.5806,8.0861193Q31.4865,8.0575978,31.3902,8.0384294Q31.2938,8.0192611,31.196,8.00963055Q31.0983,8,31,8L9,8Q8.90175,8,8.80397,8.00963055Q8.70619,8.0192611,8.60982,8.0384294Q8.51345,8.0575978,8.41943,8.0861193Q8.32541,8.114641,8.23463,8.152241Q8.14386,8.189841,8.05721,8.236157Q7.970554,8.282474,7.888859,8.337061Q7.807164,8.391648,7.731213,8.453979Q7.6552620000000005,8.516311,7.585786,8.585786Q7.516311,8.655262,7.453979,8.731213Q7.391648,8.807164,7.337061,8.888859Q7.282474,8.970554,7.236157,9.05721Q7.189841,9.14386,7.152241,9.23463Q7.114641,9.32541,7.0861193,9.41943Q7.0575978,9.51345,7.0384294,9.60982Q7.0192611,9.70619,7.00963055,9.80397Q7,9.90175,7,10ZM31,24L9,24L9,10L31,10L31,24Z\" fill-rule=\"evenodd\" fill=\"#333333\" fill-opacity=\"1\"/></g><g><rect x=\"12\" y=\"16\" width=\"4\" height=\"2\" rx=\"1\" fill=\"#333333\" fill-opacity=\"1\"/></g><g><rect x=\"12\" y=\"12\" width=\"4\" height=\"2\" rx=\"1\" fill=\"#333333\" fill-opacity=\"1\"/></g><g><rect x=\"18\" y=\"16\" width=\"4\" height=\"2\" rx=\"1\" fill=\"#333333\" fill-opacity=\"1\"/></g><g><rect x=\"18\" y=\"12\" width=\"4\" height=\"2\" rx=\"1\" fill=\"#333333\" fill-opacity=\"1\"/></g><g><rect x=\"24\" y=\"16\" width=\"4\" height=\"2\" rx=\"1\" fill=\"#333333\" fill-opacity=\"1\"/></g><g><rect x=\"24\" y=\"12\" width=\"4\" height=\"2\" rx=\"1\" fill=\"".concat(color, "\" fill-opacity=\"1\"/></g></g></svg>");
+        },
+        getDeleteLightSvgNode: function (color) {
+            return "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"none\" version=\"1.1\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"><g><g><g><path d=\"M31.139,10.88219Q32,11.753546,32,12.99L32,27.009999999999998Q32,28.2465,31.139,29.1178Q30.2674,30,29.0185,30L14.57953,30Q12.75566,30,11.53603,28.4241L11.45074,28.3139L7.55054,21.49416Q7.15474,20.80208,7.15474,20Q7.15474,19.19792,7.55054,18.50585L9.322711,15.4071L11.40802,11.760825L11.43692,11.716023Q12.54363,10,14.57953,10L29.0185,10Q30.1823,10,31.0185,10.76608Q31.0797,10.82209,31.139,10.88219ZM14.57953,12C13.97759,12,13.461649999999999,12.266667,13.11769,12.8L9.28667,19.498739999999998C9.110759,19.80633,9.110759,20.193669999999997,9.28667,20.501260000000002L13.11769,27.2C13.461649999999999,27.644399999999997,13.97759,28,14.57953,28L29.0185,28C29.5708,28,30,27.5623,30,27.009999999999998L30,12.99C30,12.437715,29.5708,12,29.0185,12L14.57953,12Z\" fill-rule=\"evenodd\" fill=\"#333333\" fill-opacity=\"1\"/></g><g><path d=\"M19.5859164704895,20.21865544288635L17.0745744704895,17.70731544288635L17.074336470489502,17.707085442886353Q16.933684470489503,17.566425442886352,16.857563770489502,17.382655442886353Q16.7814433668895,17.198885442886354,16.781443595889503,16.999975442886353Q16.7814433668895,16.801063442886353,16.8575636704895,16.617292442886352Q16.933683470489502,16.433521442886352,17.074336470489502,16.292868442886352Q17.2149884704895,16.152216442886353,17.3987594704895,16.07609594288635Q17.582530470489502,15.999975442886353,17.781443470489503,15.999975442886353Q17.980356470489504,15.999975442886353,18.164126470489503,16.076095842886353Q18.347896470489502,16.152216442886353,18.488546470489503,16.292868442886352L18.4887864704895,16.293105442886354L21.0001264704895,18.80444544288635L23.5116764704895,16.292891442886354Q23.652326470489502,16.15223944288635,23.8360964704895,16.076118842886352Q24.0198764704895,15.999998331086353,24.2187864704895,15.999998331086353Q24.417696470489503,15.999998331086353,24.601466470489502,16.07611874288635Q24.7852364704895,16.15223944288635,24.925886470489502,16.292891442886354Q25.066546470489502,16.433543442886354,25.1426664704895,16.617314442886354Q25.2187864704895,16.801085442886354,25.2187864704895,16.999995442886352Q25.2187864704895,17.198915442886353,25.1426664704895,17.382685442886352Q25.066546470489502,17.56645544288635,24.9258964704895,17.707105442886352L22.414336470489502,20.21865544288635L24.707186470489503,22.511505442886353Q24.8478464704895,22.652155442886354,24.923966470489503,22.835935442886353Q25.0000864704895,23.01970544288635,25.0000864704895,23.218615442886353Q25.0000864704895,23.41752544288635,24.923966470489503,23.601295442886354Q24.8478464704895,23.785065442886353,24.707186470489503,23.925725442886353Q24.566536470489503,24.066375442886354,24.3827664704895,24.14249544288635Q24.1989964704895,24.218615442886353,24.000086470489503,24.218615442886353Q23.801166470489502,24.218615442886353,23.617396470489503,24.14249544288635Q23.4336264704895,24.066375442886354,23.292976470489503,23.925725442886353L21.0001264704895,21.632875442886352L18.707486470489503,23.925505442886355L18.7072564704895,23.925745442886353Q18.5665964704895,24.066395442886353,18.3828264704895,24.142515442886353Q18.199056470489502,24.218635442886352,18.0001464704895,24.218635442886352Q17.801236470489503,24.218635442886352,17.617461470489502,24.142515442886353Q17.433690470489502,24.066395442886353,17.293038470489503,23.925745442886353Q17.152386470489503,23.78509544288635,17.0762664704895,23.601325442886353Q17.000145470489503,23.417555442886353,17.000145470489503,23.218635442886352Q17.000145470489503,23.019725442886354,17.076265470489503,22.835955442886352Q17.152386470489503,22.652185442886353,17.293038470489503,22.511535442886352L17.2932754704895,22.511295442886354L19.5859164704895,20.21865544288635Z\" fill-rule=\"evenodd\" fill=\"".concat(color, "\" fill-opacity=\"1\"/></g></g></g></svg>");
+        },
+        toSvgCssBackground: function (svgString) {
+            var res = svgString;
+            res = svgString
+                .replace('<svg', ~svgString.indexOf('xmlns')
+                ? '<svg'
+                : '<svg xmlns="http://www.w3.org/2000/svg"')
+                .replace(/"/g, "'")
+                .replace(/%/g, '%25')
+                .replace(/#/g, '%23')
+                .replace(/{/g, '%7B')
+                .replace(/}/g, '%7D')
+                .replace(/</g, '%3C')
+                .replace(/>/g, '%3E')
+                .replace(/\s+/g, ' ');
+            var imageBase64Src = "url(\"data:image/svg+xml,".concat(res, "\")");
+            var ret = "\n          -webkit-mask-image: ".concat(imageBase64Src, ";\n          -webkit-mask-size: contain;\n          mask-image: ").concat(imageBase64Src, ";\n          mask-size: contain;\n          width: 40px;\n          height: 40px;\n          background-repeat: no-repeat\n      ");
+            return ret;
+            // return `background-image: url("data:image/svg+xml,${res}"); width: 40px; height: 40px; background-repeat: no-repeat;`;
+        },
+    },
+});

package/lib/custom-keyboard/index.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-popup": "../popup/index",
+    "van-image": "../image/index",
+    "van-button": "../button/index",
+    "van-icon": "../icon/index"
+  }
+}

package/lib/custom-keyboard/index.wxml

@@ -0,0 +1,48 @@
+<view class="{{prefix}} {{prefix}}-container" style="{{inputContainerStyle}}">
+  <view class="{{prefix}}-textView" bind:tap="handlePassword">
+    <text class="{{prefix}}-pwdText {{currValue !== '' ? prefix + '-password' : null}}" style="{{valueTextStyle}}">
+      {{currValue || placeholder}}
+    </text>
+  </view>
+  <slot name="custom-button" />
+</view>
+<van-popup
+  show="{{visible}}"
+  bind:close="onMaskPress"
+  position="bottom"
+  overlay="{{true}}"
+>
+  <view class="{{prefix}}-popup-container">
+    <view class="{{prefix}}-number-wrap" style="height: {{row * 56}}px">
+      <view wx:for="{{numberArray}}" wx:key="index" bind:tap="changeValue" hover-class="{{prefix}}-hover-class" data-item="{{ item }}" class="{{prefix}}-number-item" style="{{(item === 0 || item === 10) && numberArray.length === 11 ? 'width: 175px' : ''}}">
+        <view
+          wx:if="{{item === -2}}"
+          class="{{prefix}}-hidden-image"
+          style="{{img_hidden_light}}"
+        />
+        <text wx:else class="{{prefix}}-number-text">{{ item <= -1 || item > maxNum ? '' : item }}</text>
+      </view>
+    </view>
+    <view class="{{prefix}}-operate-wrap">
+      <button 
+        bind:tap="changeValue" 
+        data-item="-1"
+        style="margin-bottom: 6px"
+        class="{{prefix}}-confirm-btn"
+        hover-class="{{prefix}}-hover-class"
+        >
+        <view style="{{img_delete_light}}" class="{{prefix}}-hidden-image" />
+      </button>
+      <button 
+        class="{{prefix}}-confirm-btn {{prefix}}-confirm-color"
+        style="background-color: {{confirmColor}}"
+        bind:tap="confirm"
+        hover-class="{{prefix}}-hover-class"
+      >
+        <text class="{{prefix}}-confirm-text" style="{{confirmTextStyle}}">
+          {{confirmText}}
+        </text>
+      </button >
+    </view>
+  </view>
+</van-popup>

package/lib/custom-keyboard/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root .keyboard{--keyboard-bg-color:var(--app-B6,#fff);--keyboard-text-color:var(--app-B6-N2,rgba(0,0,0,.7));--keyboard-border-color:var(--app-B6-N7,rgba(0,0,0,.1));--keyboard-placeholder-text-color:var(--app-B6-N6,rgba(0,0,0,.2))}:root text{white-space:normal}.keyboard-container{align-items:center;background-color:var(--keyboard-bg-color);border:1rpx solid var(--keyboard-border-color);border-radius:16rpx;box-sizing:border-box;display:flex;flex-direction:row;height:80rpx;justify-content:space-between;overflow:hidden;padding:24rpx 0rpx 24rpx 24rpx;width:500rpx}.keyboard-button{align-items:center;background-color:initial;justify-content:center}.keyboard-textView{display:flex;flex:1}.keyboard-pwdText{color:var(--keyboard-placeholder-text-color);font-size:40rpx}.keyboard-password{color:var(--keyboard-text-color);letter-spacing:16rpx}.keyboard-randomText{font-size:24rpx;font-weight:500}.keyboard-popup-container{background-color:var(--app-B6-N6,rgba(0,0,0,.2));display:flex;flex-direction:row;height:464rpx;padding:8rpx;width:100%}.keyboard-number-wrap{background-color:initial;display:flex;flex:1;flex-direction:row;flex-wrap:wrap;width:570rpx}.keyboard-operate-wrap{background-color:initial;padding-right:4rpx;padding-top:8rpx;width:180rpx}.keyboard-number-item{align-items:center;background-color:var(--app-B6,#fff);border-radius:8rpx;display:flex;height:96rpx;justify-content:center;margin:8rpx;width:166rpx}.keyboard-number-text{color:var(--app-B6-N2,rgba(0,0,0,.7));font-size:48rpx;font-weight:700}.keyboard-hidden-image{background:var(--app-B6-N2,rgba(0,0,0,.7));height:80rpx;width:80rpx}.keyboard-confirm-btn{align-items:center;background-color:var(--app-B6,#fff);border-radius:8rpx;display:flex;height:210rpx;justify-content:center;padding:0;width:168rpx}.keyboard-confirm-color{background-color:var(--app-M3,#2dda86)}.keyboard-confirm-text{color:#fff;font-size:40rpx;font-weight:700}.keyboard-hover-class{background-color:var(--app-B6-N7,rgba(0,0,0,.1))}

package/lib/datetime-picker/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';

package/lib/datetime-picker/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/datetime-picker/index.js

@@ -0,0 +1,332 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var validator_1 = require("../common/validator");
+var shared_1 = require("../picker/shared");
+var currentYear = new Date().getFullYear();
+function isValidDate(date) {
+    return (0, validator_1.isDef)(date) && !isNaN(new Date(date).getTime());
+}
+function range(num, min, max) {
+    return Math.min(Math.max(num, min), max);
+}
+function padZero(val) {
+    return "00".concat(val).slice(-2);
+}
+function times(n, iteratee) {
+    var index = -1;
+    var result = Array(n < 0 ? 0 : n);
+    while (++index < n) {
+        result[index] = iteratee(index);
+    }
+    return result;
+}
+function getTrueValue(formattedValue) {
+    if (formattedValue === undefined) {
+        formattedValue = '1';
+    }
+    while (isNaN(parseInt(formattedValue, 10))) {
+        formattedValue = formattedValue.slice(1);
+    }
+    return parseInt(formattedValue, 10);
+}
+function getMonthEndDay(year, month) {
+    return 32 - new Date(year, month - 1, 32).getDate();
+}
+var defaultFormatter = function (type, value) { return value; };
+(0, component_1.VantComponent)({
+    classes: ['active-class', 'toolbar-class', 'column-class'],
+    props: __assign(__assign({}, shared_1.pickerProps), { value: {
+            type: null,
+            observer: 'updateValue',
+        }, filter: null, type: {
+            type: String,
+            value: 'datetime',
+            observer: 'updateValue',
+        }, showToolbar: {
+            type: Boolean,
+            value: true,
+        }, locale: {
+            type: Object,
+        }, formatter: {
+            type: null,
+            value: defaultFormatter,
+        }, minDate: {
+            type: Number,
+            value: new Date(currentYear - 10, 0, 1).getTime(),
+            observer: 'updateValue',
+        }, maxDate: {
+            type: Number,
+            value: new Date(currentYear + 10, 11, 31).getTime(),
+            observer: 'updateValue',
+        }, minHour: {
+            type: Number,
+            value: 0,
+            observer: 'updateValue',
+        }, maxHour: {
+            type: Number,
+            value: 23,
+            observer: 'updateValue',
+        }, minMinute: {
+            type: Number,
+            value: 0,
+            observer: 'updateValue',
+        }, maxMinute: {
+            type: Number,
+            value: 59,
+            observer: 'updateValue',
+        } }),
+    data: {
+        innerValue: Date.now(),
+        columns: [],
+    },
+    methods: {
+        updateValue: function () {
+            var _this = this;
+            var data = this.data;
+            var val = this.correctValue(data.value);
+            var isEqual = val === data.innerValue;
+            this.updateColumnValue(val).then(function () {
+                if (!isEqual) {
+                    _this.$emit('input', val);
+                }
+            });
+        },
+        getPicker: function () {
+            if (this.picker == null) {
+                this.picker = this.selectComponent('.van-datetime-picker');
+                var picker_1 = this.picker;
+                var setColumnValues_1 = picker_1.setColumnValues;
+                picker_1.setColumnValues = function () {
+                    var args = [];
+                    for (var _i = 0; _i < arguments.length; _i++) {
+                        args[_i] = arguments[_i];
+                    }
+                    return setColumnValues_1.apply(picker_1, __spreadArray(__spreadArray([], args, true), [false], false));
+                };
+            }
+            return this.picker;
+        },
+        updateColumns: function () {
+            var _a = this.data, _b = _a.formatter, formatter = _b === void 0 ? defaultFormatter : _b, locale = _a.locale;
+            var results = this.getOriginColumns().map(function (column) { return ({
+                values: column.values.map(function (value) { return formatter(column.type, value); }),
+                unit: locale === null || locale === void 0 ? void 0 : locale[column.type],
+            }); });
+            return this.set({ columns: results });
+        },
+        getOriginColumns: function () {
+            var filter = this.data.filter;
+            var results = this.getRanges().map(function (_a) {
+                var type = _a.type, range = _a.range;
+                var values = times(range[1] - range[0] + 1, function (index) {
+                    var value = range[0] + index;
+                    return type === 'year' ? "".concat(value) : padZero(value);
+                });
+                if (filter) {
+                    values = filter(type, values);
+                }
+                return { type: type, values: values };
+            });
+            return results;
+        },
+        getRanges: function () {
+            var data = this.data;
+            if (data.type === 'time') {
+                return [
+                    {
+                        type: 'hour',
+                        range: [data.minHour, data.maxHour],
+                    },
+                    {
+                        type: 'minute',
+                        range: [data.minMinute, data.maxMinute],
+                    },
+                ];
+            }
+            var _a = this.getBoundary('max', data.innerValue), maxYear = _a.maxYear, maxDate = _a.maxDate, maxMonth = _a.maxMonth, maxHour = _a.maxHour, maxMinute = _a.maxMinute;
+            var _b = this.getBoundary('min', data.innerValue), minYear = _b.minYear, minDate = _b.minDate, minMonth = _b.minMonth, minHour = _b.minHour, minMinute = _b.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],
+                },
+            ];
+            if (data.type === 'date')
+                result.splice(3, 2);
+            if (data.type === 'year-month')
+                result.splice(2, 3);
+            return result;
+        },
+        correctValue: function (value) {
+            var data = this.data;
+            // validate value
+            var isDateType = data.type !== 'time';
+            if (isDateType && !isValidDate(value)) {
+                value = data.minDate;
+            }
+            else if (!isDateType && !value) {
+                var minHour = data.minHour;
+                value = "".concat(padZero(minHour), ":00");
+            }
+            // time type
+            if (!isDateType) {
+                var _a = value.split(':'), hour = _a[0], minute = _a[1];
+                hour = padZero(range(hour, data.minHour, data.maxHour));
+                minute = padZero(range(minute, data.minMinute, data.maxMinute));
+                return "".concat(hour, ":").concat(minute);
+            }
+            // date type
+            value = Math.max(value, data.minDate);
+            value = Math.min(value, data.maxDate);
+            return value;
+        },
+        getBoundary: function (type, innerValue) {
+            var _a;
+            var value = new Date(innerValue);
+            var boundary = new Date(this.data["".concat(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 _a = {},
+                _a["".concat(type, "Year")] = year,
+                _a["".concat(type, "Month")] = month,
+                _a["".concat(type, "Date")] = date,
+                _a["".concat(type, "Hour")] = hour,
+                _a["".concat(type, "Minute")] = minute,
+                _a;
+        },
+        onCancel: function () {
+            this.$emit('cancel');
+        },
+        onConfirm: function () {
+            this.$emit('confirm', this.data.innerValue);
+        },
+        onChange: function () {
+            var _this = this;
+            var data = this.data;
+            var value;
+            var picker = this.getPicker();
+            var originColumns = this.getOriginColumns();
+            if (data.type === 'time') {
+                var indexes = picker.getIndexes();
+                value = "".concat(+originColumns[0].values[indexes[0]], ":").concat(+originColumns[1]
+                    .values[indexes[1]]);
+            }
+            else {
+                var indexes = picker.getIndexes();
+                var values = indexes.map(function (value, index) { return originColumns[index].values[value]; });
+                var year = getTrueValue(values[0]);
+                var month = getTrueValue(values[1]);
+                var maxDate = getMonthEndDay(year, month);
+                var date = getTrueValue(values[2]);
+                if (data.type === 'year-month') {
+                    date = 1;
+                }
+                date = date > maxDate ? maxDate : date;
+                var hour = 0;
+                var minute = 0;
+                if (data.type === 'datetime') {
+                    hour = getTrueValue(values[3]);
+                    minute = getTrueValue(values[4]);
+                }
+                value = new Date(year, month - 1, date, hour, minute);
+            }
+            value = this.correctValue(value);
+            this.updateColumnValue(value).then(function () {
+                _this.$emit('input', value);
+                _this.$emit('change', picker);
+            });
+        },
+        updateColumnValue: function (value) {
+            var _this = this;
+            var values = [];
+            var type = this.data.type;
+            var formatter = this.data.formatter || defaultFormatter;
+            var picker = this.getPicker();
+            if (type === 'time') {
+                var pair = value.split(':');
+                values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
+            }
+            else {
+                var date = new Date(value);
+                values = [
+                    formatter('year', "".concat(date.getFullYear())),
+                    formatter('month', padZero(date.getMonth() + 1)),
+                ];
+                if (type === 'date') {
+                    values.push(formatter('day', padZero(date.getDate())));
+                }
+                if (type === 'datetime') {
+                    values.push(formatter('day', padZero(date.getDate())), formatter('hour', padZero(date.getHours())), formatter('minute', padZero(date.getMinutes())));
+                }
+            }
+            return this.set({ innerValue: value })
+                .then(function () { return _this.updateColumns(); })
+                .then(function () { return picker.setValues(values); });
+        },
+    },
+    created: function () {
+        var _this = this;
+        var innerValue = this.correctValue(this.data.value);
+        this.updateColumnValue(innerValue).then(function () {
+            _this.$emit('input', innerValue);
+        });
+    },
+});

package/lib/datetime-picker/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-picker": "../picker/index"
+  }
+}

package/lib/datetime-picker/index.wxml

@@ -0,0 +1,16 @@
+<van-picker
+  class="van-datetime-picker"
+  active-class="active-class"
+  toolbar-class="toolbar-class"
+  column-class="column-class"
+  title="{{ title }}"
+  columns="{{ columns }}"
+  item-height="{{ itemHeight }}"
+  show-toolbar="{{ showToolbar }}"
+  visible-item-count="{{ visibleItemCount }}"
+  confirm-button-text="{{ confirmButtonText }}"
+  cancel-button-text="{{ cancelButtonText }}"
+  bind:change="onChange"
+  bind:confirm="onConfirm"
+  bind:cancel="onCancel"
+/>

package/lib/datetime-picker/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';

package/lib/definitions/index.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="miniprogram-api-typings" />
+interface VantComponentInstance {
+    parent: WechatMiniprogram.Component.TrivialInstance;
+    children: WechatMiniprogram.Component.TrivialInstance[];
+    index: number;
+    $emit: (name: string, detail?: unknown, options?: WechatMiniprogram.Component.TriggerEventOption) => void;
+}
+export type VantComponentOptions<Data extends WechatMiniprogram.Component.DataOption, Props extends WechatMiniprogram.Component.PropertyOption, Methods extends WechatMiniprogram.Component.MethodOption> = {
+    data?: Data;
+    field?: boolean;
+    classes?: string[];
+    mixins?: string[];
+    props?: Props;
+    relation?: {
+        relations: Record<string, WechatMiniprogram.Component.RelationOption>;
+        mixin: string;
+    };
+    watch?: Record<string, (...args: any[]) => any>;
+    methods?: Methods;
+    beforeCreate?: () => void;
+    created?: () => void;
+    mounted?: () => void;
+    destroyed?: () => void;
+} & ThisType<VantComponentInstance & WechatMiniprogram.Component.Instance<Data & {
+    name: string;
+    value: any;
+} & Record<string, any>, Props, Methods> & Record<string, any>>;
+export {};

package/lib/definitions/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });