feat: 完成日期时间选择器组件的开发

.editorconfig

+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

+{
+  "extends": ["taro/react"],
+  "rules": {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
+  }
+}

.gitignore

+dist/
+deploy_versions/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store

.npmrc

+strict-peer-dependencies=false
+
+registry = "https://registry.npmjs.org/"
+@linkseeks:registry="http://npm.shushangyun.com"
+@ssy:registry="http://npm.shushangyun.com"
+@nicole:registry="http://npm.shushangyun.com"
\ No newline at end of file

README.md

+### DateTimePicker
+
+#### 组件目录
+
+src --> components --> DateTimePicker
+
+#### 兼容性
+
+兼容h5和小程序，不兼容rn
+
+#### 运行
+
+```powershell
+pnpm i
+pnpm dev:h5
+pnpm dev:weapp
+```

babel.config.js

+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    ['taro', {
+      framework: 'react',
+      ts: true
+    }]
+  ]
+}

config/dev.js

+module.exports = {
+  env: {
+    NODE_ENV: '"development"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {}
+}

config/index.js

+const config = {
+  projectName: 'taro_demo',
+  date: '2022-9-18',
+  designWidth: 750,
+  deviceRatio: {
+    640: 2.34 / 2,
+    750: 1,
+    828: 1.81 / 2
+  },
+  sourceRoot: 'src',
+  outputRoot: 'dist',
+  plugins: [],
+  defineConstants: {
+  },
+  copy: {
+    patterns: [
+    ],
+    options: {
+    }
+  },
+  framework: 'react',
+  compiler: 'webpack5',
+  cache: {
+    enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
+  },
+  mini: {
+    postcss: {
+      pxtransform: {
+        enable: true,
+        config: {
+
+        }
+      },
+      url: {
+        enable: true,
+        config: {
+          limit: 1024 // 设定转换尺寸上限
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  },
+  h5: {
+    publicPath: '/',
+    staticDirectory: 'static',
+    postcss: {
+      autoprefixer: {
+        enable: true,
+        config: {
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  },
+  rn: {
+    appName: 'taroDemo',
+    postcss: {
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+      }
+    }
+  }
+}
+
+module.exports = function (merge) {
+  if (process.env.NODE_ENV === 'development') {
+    return merge({}, config, require('./dev'))
+  }
+  return merge({}, config, require('./prod'))
+}

config/prod.js

+module.exports = {
+  env: {
+    NODE_ENV: '"production"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {
+    /**
+     * WebpackChain 插件配置
+     * @docs https://github.com/neutrinojs/webpack-chain
+     */
+    // webpackChain (chain) {
+    //   /**
+    //    * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
+    //    * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
+    //    */
+    //   chain.plugin('analyzer')
+    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+
+    //   /**
+    //    * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
+    //    * @docs https://github.com/chrisvfritz/prerender-spa-plugin
+    //    */
+    //   const path = require('path')
+    //   const Prerender = require('prerender-spa-plugin')
+    //   const staticDir = path.join(__dirname, '..', 'dist')
+    //   chain
+    //     .plugin('prerender')
+    //     .use(new Prerender({
+    //       staticDir,
+    //       routes: [ '/pages/index/index' ],
+    //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
+    //     }))
+    // }
+  }
+}

package.json

+{
+  "name": "taro_demo",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "templateInfo": {
+    "name": "default",
+    "typescript": true,
+    "css": "less"
+  },
+  "scripts": {
+    "build:weapp": "taro build --type weapp",
+    "build:swan": "taro build --type swan",
+    "build:alipay": "taro build --type alipay",
+    "build:tt": "taro build --type tt",
+    "build:h5": "taro build --type h5",
+    "build:rn": "taro build --type rn",
+    "build:qq": "taro build --type qq",
+    "build:jd": "taro build --type jd",
+    "build:quickapp": "taro build --type quickapp",
+    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:swan": "npm run build:swan -- --watch",
+    "dev:alipay": "npm run build:alipay -- --watch",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:rn": "npm run build:rn -- --watch",
+    "dev:qq": "npm run build:qq -- --watch",
+    "dev:jd": "npm run build:jd -- --watch",
+    "dev:quickapp": "npm run build:quickapp -- --watch"
+  },
+  "browserslist": [
+    "last 3 versions",
+    "Android >= 4.1",
+    "ios >= 8"
+  ],
+  "author": "",
+  "dependencies": {
+    "@babel/runtime": "^7.7.7",
+    "@linkseeks/standard": "^1.2.0",
+    "@tarojs/components": "3.5.2",
+    "@tarojs/helper": "3.5.2",
+    "@tarojs/plugin-framework-react": "3.5.2",
+    "@tarojs/plugin-platform-alipay": "3.5.2",
+    "@tarojs/plugin-platform-jd": "3.5.2",
+    "@tarojs/plugin-platform-qq": "3.5.2",
+    "@tarojs/plugin-platform-swan": "3.5.2",
+    "@tarojs/plugin-platform-tt": "3.5.2",
+    "@tarojs/plugin-platform-weapp": "3.5.2",
+    "@tarojs/react": "3.5.2",
+    "@tarojs/router": "3.5.2",
+    "@tarojs/runtime": "3.5.2",
+    "@tarojs/shared": "3.5.2",
+    "@tarojs/taro": "3.5.2",
+    "@tarojs/taro-h5": "3.5.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
+    "@tarojs/cli": "3.5.2",
+    "@tarojs/webpack5-runner": "3.5.2",
+    "@types/react": "^18.0.0",
+    "@types/webpack-env": "^1.13.6",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "babel-preset-taro": "3.5.2",
+    "eslint": "^8.12.0",
+    "eslint-config-taro": "3.5.2",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "react-refresh": "^0.11.0",
+    "stylelint": "^14.4.0",
+    "typescript": "^4.1.0",
+    "webpack": "5.69.0"
+  }
+}

project.config.json

+{
+  "miniprogramRoot": "./dist",
+  "projectname": "taro_demo",
+  "description": "",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "enhance": false,
+    "compileHotReLoad": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}

project.tt.json

+{
+  "miniprogramRoot": "./",
+  "projectname": "taro_demo",
+  "appid": "testAppId",
+  "setting": {
+    "es6": false,
+    "minified": false
+  }
+}

src/app.config.ts

+export default defineAppConfig({
+  pages: [
+    'pages/index/index'
+  ],
+  window: {
+    backgroundTextStyle: 'light',
+    navigationBarBackgroundColor: '#fff',
+    navigationBarTitleText: 'WeChat',
+    navigationBarTextStyle: 'black'
+  }
+})

src/app.ts

+import { Component } from 'react'
+import './app.less'
+
+class App extends Component {
+
+  componentDidMount () {}
+
+  componentDidShow () {}
+
+  componentDidHide () {}
+
+  // this.props.children 是将要会渲染的页面
+  render () {
+    return this.props.children
+  }
+}
+
+export default App

src/components/DateTimePicker/index.less

+@name: date-time-picker;
+
+.@{name}-mask {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  pointer-events: none;
+  opacity: 0;
+  background-color: rgba(0, 0, 0, .4);
+
+  &.ac {
+    z-index: 1000;
+    pointer-events: all;
+    opacity: 1;
+  }
+}
+
+.@{name}-container {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 55vh;
+  border-radius: 16rpx 16rpx 0 0;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background-color: #fff;
+  z-index: 1001;
+  transition: transform .2s;
+  transform: translateY(55vh);
+
+  &.ac {
+    transform: translateY(0);
+  }
+
+  .@{name}-top {
+    --h: 96rpx;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: var(--h);
+    padding: 0 24rpx;
+
+    .@{name}-btn {
+      width: 25%;
+      height: 100%;
+      line-height: var(--h);
+      color: #1aad19;
+      text-align: center;
+    }
+
+    .@{name}-switch {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      width: 280rpx;
+      height: 64rpx;
+      border-radius: 999px;
+      border: 2rpx solid #ccc;
+      box-shadow: inset 0 2rpx 6rpx rgb(0 0 0 / 25%);
+      background-color: #888;
+      position: relative;
+      font-size: 32rpx;
+      text-align: center;
+
+      .@{name}-switch-box {
+        box-sizing: border-box;
+        width: 50%;
+        height: 100%;
+        border-radius: 999px;
+        border: 2rpx solid #ccc;
+        background-color: #fff;
+        box-shadow: 0 2rpx 6rpx rgb(0 0 0 / 25%);
+        position: absolute;
+        top: 0;
+        left: 0;
+        transition: all .2s ease-out;
+        pointer-events: none;
+      }
+
+      .@{name}-switch-text {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 50%;
+        height: 100%;
+        position: relative;
+        transition: all .2s ease-out;
+
+        &.ac {
+          color: #fff;
+        }
+      }
+
+      &.checked {
+        .@{name}-switch-box {
+          transform: translateX(100%);
+        }
+      }
+    }
+  }
+
+  .@{name}-main {
+    flex-grow: 1;
+
+    .@{name}-arti {
+      --title-h: 56rpx;
+      text-align: center;
+    }
+
+    .@{name}-title {
+      height: var(--title-h);
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-around;
+
+      .@{name}-text {
+        width: 33.3333333%;
+      }
+    }
+
+    .@{name}-sect {
+      display: flex;
+      flex-direction: row;
+      align-items: stretch;
+      position: relative;
+      height: calc(100% - var(--title-h));
+
+      .@{name}-scroller {
+        box-sizing: border-box;
+        width: 33.3333333%;
+        height: auto;
+        margin: 16rpx 0;
+
+        .@{name}-item {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+
+      .@{name}-filter {
+        box-sizing: border-box;
+        width: 100%;
+        height: calc(100% - 32rpx);
+        margin: 16rpx 0;
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: flex;
+        flex-direction: column;
+        pointer-events: none;
+        z-index: 1002;
+
+        .@{name}-filter-blur {
+          flex-grow: 1;
+          background-image: linear-gradient(180deg, #fffe, #fffa);
+
+          &.last {
+            background-image: linear-gradient(0deg, #fffe, #fffa);
+          }
+        }
+
+        .@{name}-filter-mark {
+          flex-shrink: 0;
+          box-sizing: border-box;
+          margin: 0 32rpx;
+          border: 2rpx solid #aaa;
+          border-radius: 6rpx;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/components/DateTimePicker/index.tsx

+import { Button, View, Text, Swiper, SwiperItem, BaseEventOrig } from '@tarojs/components'
+import { FC, CSSProperties, useState, useMemo, useEffect } from 'react'
+import { createDCP } from '../DynamicComponent'
+import './index.less'
+
+/**
+ * 获取当月日数
+ * @param year 年
+ * @param month 月
+ * @returns 当月日数
+ */
+const calcDaysCount = (year: number, month: number): number => {
+  switch (month) {
+    case 4:
+    case 6:
+    case 9:
+    case 11:
+      return 30
+    case 2:
+      return year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0) ? 28 : 29
+    default:
+      return 31
+  }
+}
+
+/**
+ * 日期格式化显示的方法
+ * @param format 格式化字符串
+ * @param val 日期列表
+ * @param options 预设置文本
+ * @returns 格式化后的字符串
+ */
+const formater = (format: string, val: number[], options: DateTimePickerOption): DateTimePickerEventOrig => {
+  const arr = [/Y{2,4}/, /M{1,2}/, /D{1,2}/, /h{1,2}/, /m{1,2}/, /s{1,2}/].map(regExp => format.match(regExp))
+
+  arr.forEach((matchList, i) => {
+    if (!matchList) return
+    matchList?.forEach(match => {
+      const len = match.length
+      let temp = val[i].toString()
+      if (len > temp.length) temp = temp.padStart(len, '0')
+      else if (len < temp.length) temp = temp.slice(4 - len)
+      format = format.replace(match, temp)
+    })
+  })
+
+  const cloneVal = val.slice()
+  cloneVal[1]--
+  // @ts-ignore
+  const time = new Date(...cloneVal)
+
+  const dayFormat = format.match(/d{2,4}/)?.[0]
+  if (dayFormat) {
+    format = format.replace(dayFormat, options[dayFormat][time.getDay()])
+  }
+  return { label: format, value: time }
+}
+/** 类名前缀 */
+const prefix = 'date-time-picker'
+
+type Lang = 'zh-CN' | 'en'
+interface DateTimePickerOption {
+  /** 星期几 全称 */
+  dddd: string[]
+  /** 星期几 简写 */
+  ddd: string[]
+  /** 星期几 最简写 */
+  dd: string[]
+  /** 日期 文本 */
+  DATE: string
+  /** 时间 文本 */
+  TIME: string
+  /** 确定 文本 */
+  OK: string
+  /** 取消 文本 */
+  CANCEL: string
+  /** 年月日时分秒 文本列表 */
+  textList: string[]
+  /** 占位文本 */
+  placeholder: string
+}
+/** @description 多语言预设置文本 */
+const optionsGroup: Record<Lang, DateTimePickerOption> = {
+  'zh-CN': {
+    dddd: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+    ddd: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    dd: ['日', '一', '二', '三', '四', '五', '六'],
+    DATE: '年月日',
+    TIME: '时分秒',
+    OK: '确定',
+    CANCEL: '取消',
+    textList: ['年', '月', '日', '时', '分', '秒'],
+    placeholder: '----请选择----'
+  },
+  en: {
+    dddd: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ddd: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
+    dd: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    DATE: 'DATE',
+    TIME: 'TIME',
+    OK: 'OK',
+    CANCEL: 'CANCEL',
+    textList: ['Year', 'Month', 'Day', 'Hour', 'Minute', 'Second'],
+    placeholder: '----SELECT----'
+  }
+}
+
+interface DateTimePickerEventOrig {
+  value: Date
+  label: string
+}
+
+interface DateTimePickerProps {
+  /** 最早年份 */
+  firstYear?: number
+  /** 最晚年份 */
+  lastYear?: number
+  /** 语言 */
+  lang?: Lang
+  /** 格式 */
+  format?: string
+  /** 初始值 */
+  initialValue?: Date
+  /** 一列同时显示的数字个数 */
+  displayMultipleItems?: 3 | 5 | 7 | 9
+  /** 按钮样式 */
+  btnStyle?: string | CSSProperties
+  /** 按钮类名 */
+  btnClass?: string
+  /** 确定选择后触发的回调函数 */
+  onChange: (e: DateTimePickerEventOrig) => void
+}
+
+export const DateTimePicker: FC<DateTimePickerProps> = props => {
+  const { lang, btnStyle, btnClass, onChange, ...pickerProps } = props
+  /** 预设置文本 */
+  const options = useMemo(() => optionsGroup[lang as Lang], [])
+  /** 格式化后的字符串 */
+  const [label, setLabel] = useState<string>(options.placeholder)
+  /** 选择器组件显示隐藏切换计数 */
+  const [toggle, setToggle] = useState<number>(0)
+  /**组件显示 */
+  const [show, setShow] = useState<() => void>(() => {})
+  const onTrans = (fn: () => void) => setShow(() => fn)
+  /**组件隐藏 */
+  const hide = () => {
+    setTimeout(() => {
+      setToggle(toggle + 1)
+    }, 100)
+  }
+
+  useEffect(
+    () =>
+      createDCP(
+        <>
+          <Picker
+            {...pickerProps}
+            toggle={toggle}
+            options={options}
+            hide={hide}
+            onTrans={onTrans}
+            onChange={e => {
+              setLabel(e.label)
+              onChange(e)
+            }}
+          />
+        </>
+      ),
+    [toggle]
+  )
+
+  return (
+    <Button style={btnStyle} className={btnClass} onClick={show}>
+      {label}
+    </Button>
+  )
+}
+DateTimePicker.defaultProps = {
+  firstYear: 1970,
+  lastYear: new Date().getFullYear() + 30,
+  lang: 'zh-CN',
+  format: 'YYYY-MM-DD hh:mm:ss dddd',
+  displayMultipleItems: 7
+}
+
+interface PickerProps extends DateTimePickerProps {
+  toggle: number
+  options: DateTimePickerOption
+  hide: () => void
+  onTrans: (fn: () => void) => void
+}
+const Picker: FC<PickerProps> = props => {
+  const { firstYear, lastYear, toggle, options, format, initialValue, displayMultipleItems, hide, onTrans, onChange } = props
+
+  /** 组件显示隐藏 */
+  const [visible, setVisible] = useState<boolean>(false)
+  /** 日期/时间显示切换 */
+  const [right, setRight] = useState<boolean>(false)
+  /** 初始日期 */
+  const intialDate = useMemo(() => (toggle ? initialValue : intialDate) ?? new Date(), [toggle])
+  /** 组件返回的数据 */
+  const [val, setVal] = useState(() => [
+    intialDate.getFullYear(),
+    intialDate.getMonth() + 1,
+    intialDate.getDate(),
+    intialDate.getHours(),
+    intialDate.getMinutes(),
+    intialDate.getSeconds()
+  ])
+
+  useEffect(() => {
+    console.log(toggle)
+
+    onTrans(() => setVisible(true))
+  }, [])
+
+  const onHide = () => {
+    setVisible(false)
+    hide()
+  }
+
+  const onSubmit = () => {
+    const ans = formater(format as string, val, options)
+    onChange(ans)
+    onHide()
+  }
+
+  /** 备选区的数字个数 */
+  const oneSidedMargin = useMemo<number>(() => (displayMultipleItems as number) >> 1, [displayMultipleItems])
+
+  /** 当月天数 */
+  const daysCount = useMemo(() => {
+    const ans = calcDaysCount(val[0], val[1])
+    if (ans < val[2]) {
+      const temp = val.slice()
+      temp[2] = ans
+      setVal(temp)
+    }
+    return ans
+  }, val.slice(0, 2))
+
+  /** 列数据 */
+  const columns = useMemo<string[][]>(() => {
+    const getCol = (min: number, max: number, pad: number = 2): string[] =>
+      new Array(max - min + 1).fill(0).map((_, i) => (min + i + '').padStart(pad, '0'))
+    return [getCol(firstYear!, lastYear!), getCol(1, 12), getCol(1, daysCount), getCol(0, 23), getCol(0, 59), getCol(0, 59)]
+  }, [daysCount])
+
+  const onScroll = (e: BaseEventOrig) => {
+    const i = e.target.dataset.scroller,
+      temp = e.detail.current,
+      /** circular */
+      /* temp = oneSidedMargin + e.detail.current,
+      len = columns[i].length,
+      current = temp >= len ? temp - len : temp, */
+      newVal = val.slice()
+
+    newVal[i] = +columns[i][temp]
+    setVal(newVal)
+  }
+
+  return (
+    <>
+      <View className={`${prefix}-mask ${visible ? 'ac' : ''}`} onClick={onHide}></View>
+      <View className={`${prefix}-container ${visible ? 'ac' : ''}`}>
+        <View className={`${prefix}-top`}>
+          <Text className={`${prefix}-btn`} onClick={onHide}>
+            {options.CANCEL}
+          </Text>
+          <View
+            className={`${prefix}-switch ${right ? 'checked' : ''}`}
+            onClick={e => setRight(Boolean(+e.target.dataset.checked))}
+          >
+            <View className={`${prefix}-switch-box`} />
+            <Text data-checked="0" className={`${prefix}-switch-text ${right ? 'ac' : ''}`}>
+              {options.DATE}
+            </Text>
+            <Text data-checked="1" className={`${prefix}-switch-text ${right ? '' : 'ac'}`}>
+              {options.TIME}
+            </Text>
+          </View>
+          <Text className={`${prefix}-btn`} onClick={onSubmit}>
+            {options.OK}
+          </Text>
+        </View>
+        <Swiper
+          className={`${prefix}-main`}
+          data-main
+          duration={200}
+          current={+right}
+          onChange={e => {
+            if (!e.target.dataset.main) return
+            setRight(Boolean(e.detail.current))
+          }}
+        >
+          {[0, 1].map(m => (
+            <SwiperItem key={m} className={`${prefix}-arti`}>
+              <View className={`${prefix}-title`}>
+                {[0, 1, 2].map(n => (
+                  <Text key={n} className={`${prefix}-text`}>
+                    {options.textList[n + 3 * m]}
+                  </Text>
+                ))}
+              </View>
+              <View className={`${prefix}-sect`}>
+                {[0, 1, 2].map(n => {
+                  const i = n + 3 * m
+                  return (
+                    <Swiper
+                      key={n}
+                      className={`${prefix}-scroller`}
+                      data-scroller={i}
+                      vertical
+                      duration={200}
+                      displayMultipleItems={displayMultipleItems}
+                      current={columns[i].findIndex(item => +item === val[i])}
+                      onChange={onScroll}
+                    >
+                      {[
+                        ...new Array(oneSidedMargin).fill('empty').map((empty, i) => empty + i),
+                        ...columns[i],
+                        ...new Array(oneSidedMargin).fill('empty').map((empty, i) => empty + i + oneSidedMargin)
+                      ].map(item => (
+                        <SwiperItem className={`${prefix}-item`} key={item}>
+                          {item.startsWith('empty') ? '' : item}
+                        </SwiperItem>
+                      ))}
+                    </Swiper>
+                  )
+                })}
+                <View className={`${prefix}-filter`}>
+                  <View className={`${prefix}-filter-blur`} />
+                  <View
+                    className={`${prefix}-filter-mark`}
+                    style={{ height: ((100 / (displayMultipleItems as number)) | 0) + '%' }}
+                  />
+                  <View className={`${prefix}-filter-blur last`} />
+                </View>
+              </View>
+            </SwiperItem>
+          ))}
+        </Swiper>
+      </View>
+    </>
+  )
+}

src/components/DynamicComponent/index.tsx

+import Taro from '@tarojs/taro'
+import { render, unmountComponentAtNode } from '@tarojs/react'
+import { document } from '@tarojs/runtime'
+import { Suspense } from 'react'
+
+export const createDCP = (Cp: JSX.Element) => {
+  const view = document.createElement('view')
+  const currentPages = Taro.getCurrentPages()
+  const currentPage = currentPages[currentPages.length - 1]
+  const path = currentPage.$taroPath
+  const pageElement = document.getElementById(path)
+  render(<Suspense fallback={null}>{Cp}</Suspense>, view)
+  pageElement?.appendChild(view)
+  return () => destroyDCP(view)
+}
+
+export const destroyDCP = node => {
+  const currentPages = Taro.getCurrentPages()
+  const currentPage = currentPages[currentPages.length - 1]
+  const path = currentPage.$taroPath
+  const pageElement = document.getElementById(path)
+  unmountComponentAtNode(node)
+
+  pageElement?.removeChild(node)
+}

src/index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="format-detection" content="telephone=no,address=no">
+  <meta name="apple-mobile-web-app-status-bar-style" content="white">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
+  <title>taro_demo</title>
+  <script><%= htmlWebpackPlugin.options.script %></script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

src/pages/index/index.config.ts

+export default definePageConfig({
+  navigationBarTitleText: '首页'
+})

src/pages/index/index.less

+.index {
+  box-sizing: border-box;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  padding: 0 64rpx;
+}
\ No newline at end of file

src/pages/index/index.tsx

+import { Component } from 'react'
+import { View } from '@tarojs/components'
+import './index.less'
+import { DateTimePicker } from '../../components/DateTimePicker'
+
+export default class Index extends Component {
+  render() {
+    return (
+      <View className="index">
+        <DateTimePicker onChange={e => console.log(e)} btnStyle={{ width: '100%' }} />
+      </View>
+    )
+  }
+}

tsconfig.json

+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "commonjs",
+    "removeComments": false,
+    "preserveConstEnums": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "outDir": "lib",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strictNullChecks": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "rootDir": ".",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ]
+  },
+  "include": ["./src", "./types"],
+  "compileOnSave": false
+}

types/global.d.ts

+/// <reference types="@tarojs/taro" />
+
+declare module '*.png';
+declare module '*.gif';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.svg';
+declare module '*.css';
+declare module '*.less';
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.styl';
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd'
+  }
+}
+