feat: 时间选择器本地 支持时区

babel.config.js

@@ -1,5 +1,55 @@
 module.exports = {
   presets: [
-    '@vue/cli-plugin-babel/preset'
+    '@vue/cli-plugin-babel/preset',
-  ]
+    [
+      '@babel/env',
+      {
+        loose: true,
+        modules: false
+      }
+    ],
+    '@babel/typescript'
+  ],
+  plugins: [
+    '@vue/babel-plugin-jsx',
+    '@babel/proposal-class-properties',
+    '@babel/transform-runtime',
+    'lodash'
+  ],
+  overrides: [
+    {
+      test: /\.vue$/,
+      plugins: [
+        '@babel/transform-typescript'
+      ]
+    }
+  ],
+  env: {
+    utils: {
+      ignore: [
+        '**/*.test.ts',
+        '**/*.spec.ts'
+      ],
+      presets: [
+        [
+          '@babel/env',
+          {
+            loose: true,
+            modules: false
+          }
+        ]
+      ],
+      plugins: [
+        [
+          'babel-plugin-module-resolver',
+          {
+            root: ['element-plus'],
+            alias: {
+              '@element-plus': 'element-plus/lib'
+            }
+          }
+        ]
+      ]
+    }
+  }
 }

build/bincomp.js

@@ -0,0 +1,43 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const cp = require('child_process')
+const { getPackagesSync } =  require('@lerna/project')
+const ora = require('ora')
+const chalk = require('chalk')
+
+const spinner = ora(`${chalk.blue('Building...')}`).start()
+const pkgs = getPackagesSync()
+  .map(pkg => pkg.name)
+  .filter(name =>
+    name.includes('@element-plus') &&
+    !name.includes('transition') &&
+    !name.includes('utils'),
+  )
+const STEP = 4
+const START = 0
+const buildChild = (start, end) => {
+  let s = start
+  let e = end
+  const c1 = cp.spawn('node', ['./build/build.component.js', s, e])
+  c1.stdout.on('data', function (data) {
+    spinner.info(`${chalk.blue(data)}`)
+  })
+
+  c1.stderr.on('data', function (data) {
+    spinner.warn(`${chalk.red(data)}`)
+  })
+
+  c1.on('close', function (code) {
+    s += STEP
+    e += STEP
+    if (s > pkgs.length) {
+      spinner.succeed(`${chalk.green('Build done. Exit code ' + code)}`)
+      return
+    }
+    buildChild(s, e)
+  })
+}
+
+/**
+ * @link https://github.com/ezolenko/rollup-plugin-typescript2/issues/177
+ */
+buildChild(START, STEP)

build/build-helper.js

@@ -0,0 +1,64 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const helper = require('components-helper')
+const { name, version } = require('../package.json')
+const icon = require('../website/icon.json')
+const icons = icon.map(item => 'el-icon-' + item).join('/')
+const tagVer = process.env.TAG_VERSION
+const _version = tagVer ? tagVer.startsWith('v') ? tagVer.slice(1) : tagVer : version
+
+helper({
+  name,
+  version: _version,
+  entry: 'website/docs/en-US/!(custom-theme|datetime-picker|i18n|installation|message-box|message|migration-from-2.x|notification|quickstart|transition|typography).md',
+  outDir: 'lib',
+  reComponentName,
+  reDocUrl,
+  reAttribute,
+  props: 'Attributes',
+  propsName: 'Attribute',
+  propsOptions: 'Accepted Values',
+  eventsName: 'Event Name',
+  tableRegExp: '#+\\s+(.*\\s*Attributes|.*\\s*Events|.*\\s*Slots|.*\\s*Directives)\\s*\\n+(\\|?.+\\|.+)\\n\\|?\\s*:?-+:?\\s*\\|.+((\\n\\|?.+\\|.+)+)',
+})
+
+function reComponentName(title) {
+  return 'el-' + title.replace(/\B([A-Z])/g, '-$1').replace(/[ ]+/g, '-').toLowerCase()
+}
+
+function reDocUrl(fileName, header) {
+  const docs = 'https://element-plus.org/#/en-US/component/'
+  const _header = header ? header.replace(/[ ]+/g, '-').toLowerCase() : undefined
+  return docs + fileName + (_header ? '#' + _header : '')
+}
+
+function reAttribute(value, key, item) {
+  const _value = value.match(/^\*\*(.*)\*\*$/)
+  const str = _value ? _value[1]: value
+
+  if (key === 'Accepted Values' && /icon/i.test(item[0])) {
+    return icons
+  } else if (key === 'Name' && /^(-|—)$/.test(str)) {
+    return 'default'
+  } else if (str === '' || /^(-|—)$/.test(str)) {
+    return undefined
+  } else if (key === 'Attribute' && /v-model:(.+)/.test(str)){
+    const _str = str.match(/v-model:(.+)/)
+    return _str ? _str[1] : undefined
+  } else if (key === 'Attribute' && /v-model/.test(str)) {
+    return 'model-value'
+  } else if (key === 'Attribute') {
+    return str.replace(/\B([A-Z])/g, '-$1').toLowerCase()
+  } else if (key === 'Type') {
+    return str
+      .replace(/\s*\/\s*/g, '|')
+      .replace(/\s*,\s*/g, '|')
+      .replace(/\(.*\)/g, '')
+      .toLowerCase()
+  } else if (key === 'Accepted Values') {
+    return /\[.+\]\(.+\)/.test(str) || /^\*$/.test(str)
+      ? undefined
+      : str.replace(/`/g, '')
+  } else {
+    return str
+  }
+}

build/build-locale.js

@@ -0,0 +1,39 @@
+/* eslint-disable */
+const fs = require('fs')
+const save = require('file-save')
+const { resolve, basename } = require('path')
+const localePath = resolve(__dirname, '../packages/locale/lang')
+const fileList = fs.readdirSync(localePath)
+
+const transform = function(filename, name, cb) {
+  require('@babel/core').transformFile(resolve(localePath, filename), {
+    plugins: [
+      '@babel/plugin-transform-modules-umd',
+    ],
+    moduleId: name,
+  }, cb)
+}
+
+fileList
+  .filter(function(file) {
+    return /\.ts$/.test(file)
+  })
+  .forEach(function(file) {
+    const name = basename(file, '.ts')
+
+    transform(file, name, function(err, result) {
+      if (err) {
+        console.error(err)
+      } else {
+        const code = result.code
+        const transformedCode = code
+          .replace('define(\"', 'define(\"element/locale/')
+          .replace(
+            /global\.(\S*) = mod.exports/,
+            'global.ElementPlus.lang = global.ElementPlus.lang || {};\n    global.ElementPlus.lang.$1 = mod.exports.default'
+          )
+
+        save(resolve(__dirname, '../lib/umd/locale', `${name}.js`)).write(transformedCode)
+      }
+    })
+  })

build/build-util.js

@@ -0,0 +1,52 @@
+/* eslint-disable */
+const pkg = require('../package.json')
+const path = require('path')
+const { nodeResolve } = require('@rollup/plugin-node-resolve')
+const rollup = require('rollup')
+const typescript = require('rollup-plugin-typescript2')
+
+const deps = Object.keys(pkg.dependencies)
+
+const root = path.resolve(__dirname, '..');
+const file = process.argv[2];
+const defaultOpts = {
+  input: path.resolve(root, file),
+  plugins: [
+    nodeResolve(),
+    typescript({
+      tsconfigOverride: {
+        compilerOptions: {
+          declaration: false,
+        },
+        'exclude': [
+          'node_modules',
+          '__tests__',
+        ],
+      },
+      abortOnError: false,
+    }),
+  ],
+  external() {
+    return true
+  },
+}
+
+const run = async (name) => {
+  const esm = {
+    format: 'es',
+    file: `es/${name}`,
+  };
+  const cjs = {
+    format: 'cjs',
+    file: `lib/${name}`,
+    exports: 'named',
+  }
+
+  const bundle = await rollup.rollup(defaultOpts);
+  await Promise.all([bundle.write(esm), bundle.write(cjs)]);
+  console.log(name, 'build finished');
+}
+
+let normalizedName = file.slice(11); // remove ./packages
+
+run(`${normalizedName.split('.').shift()}.js`);

build/build.component.js

@@ -0,0 +1,84 @@
+/* eslint-disable */
+const pkg = require('../package.json')
+const path = require('path')
+const { getPackages } =  require('@lerna/project')
+const css = require('rollup-plugin-css-only')
+const { nodeResolve } = require('@rollup/plugin-node-resolve')
+const vue = require('rollup-plugin-vue')
+const rollup = require('rollup')
+const typescript = require('rollup-plugin-typescript2')
+const { noElPrefixFile } = require('./common')
+
+const deps = Object.keys(pkg.dependencies)
+
+const runBuild = async () => {
+  let index = 0
+  const pkgs = await getPackages()
+  const inputs = pkgs
+    .map(pkg => pkg.name)
+    .filter(name =>
+      name.includes('@element-plus') &&
+      !name.includes('utils'),
+    ).slice(process.argv[2], process.argv[3])
+
+  build(inputs[index])
+
+  async function build(name) {
+    if (!name) return
+    const inputOptions = {
+      input: path.resolve(__dirname, `../packages/${name.split('@element-plus/')[1]}/index.ts`),
+      plugins: [
+        nodeResolve(),
+        css(),
+        vue({
+          target: 'browser',
+          css: false,
+        }),
+        typescript({
+          tsconfigOverride: {
+            compilerOptions: {
+              declaration: false,
+            },
+            'exclude': [
+              'node_modules',
+              '__tests__',
+            ],
+          },
+          abortOnError: false,
+        }),
+      ],
+      external(id) {
+        return /^vue/.test(id)
+          || /^@element-plus/.test(id)
+          || deps.some(k => new RegExp('^' + k).test(id))
+      },
+    }
+    const getOutFile = () => {
+      const compName = name.split('@element-plus/')[1]
+      if(noElPrefixFile.test(name)) {
+        return `lib/${compName}/index.js`
+      }
+      return `lib/el-${compName}/index.js`
+    }
+    const outOptions = {
+      format: 'es',
+      file: getOutFile(),
+      paths(id) {
+        if (/^@element-plus/.test(id)) {
+          if (noElPrefixFile.test(id)) return id.replace('@element-plus', '..')
+          return id.replace('@element-plus/', '../el-')
+        }
+      },
+    }
+
+    const bundle = await rollup.rollup(inputOptions)
+    console.log(name, 'done')
+    await bundle.write(outOptions)
+    index++
+    if (index < inputs.length) {
+      await build(inputs[index])
+    }
+  }
+}
+
+runBuild()

build/build.comps.js

@@ -0,0 +1,16 @@
+/* eslint-disable */
+
+// name came from the terminal as `./packages/*` notation, so when resolve the name, we'd like
+// to add a `..` to do so. because the current file is under `build/`, `packages/` is at the
+// same level as `build/`,
+const run = require('./build');
+const compPath = process.argv[2]
+if (!compPath) {
+  console.error('Usage: node build.js [component]')
+  process.exit(1)
+}
+
+const outPutPrefix = ['hooks', 'directives'].some((p) => compPath.includes(p)) ? '' : 'el-';
+const compName = compPath.split('/').pop()
+
+run(`${outPutPrefix}${compName}/index.js`, compPath)

build/build.entry.js

@@ -0,0 +1,5 @@
+/* eslint-disable */
+
+const run = require('./build');
+
+run('index.js', './packages/element-plus', true)

build/build.js

@@ -0,0 +1,81 @@
+/* eslint-disable */
+const pkg = require('../package.json')
+const path = require('path')
+const css = require('rollup-plugin-css-only')
+const { nodeResolve } = require('@rollup/plugin-node-resolve')
+const vue = require('rollup-plugin-vue')
+const rollup = require('rollup')
+const typescript = require('rollup-plugin-typescript2')
+const { noElPrefixFile } = require('./common');
+
+const deps = Object.keys(pkg.dependencies)
+
+const root = path.resolve(__dirname, '..');
+
+const defaultOpts = {
+  plugins: [
+    nodeResolve(),
+    css(),
+    vue({
+      target: 'browser',
+      css: false,
+    }),
+    typescript({
+      tsconfigOverride: {
+        compilerOptions: {
+          declaration: false,
+        },
+        'exclude': [
+          'node_modules',
+          '__tests__',
+        ],
+      },
+      abortOnError: false,
+    }),
+  ],
+  external(id) {
+    return /^vue/.test(id)
+      || /^@element-plus/.test(id)
+      || deps.some(k => new RegExp('^' + k).test(id))
+  },
+}
+
+const isPkg = (id) => {
+  return id.startsWith('@element-plus')
+}
+
+const isExcluded = (id) => {
+  return noElPrefixFile.test(id)
+}
+
+const replacePrefix = (prefix, target) => {
+  return prefix + target.slice(14) // @element-plus/.length = 14
+}
+
+const run = async (name, input, isRoot = false) => {
+  const inputPath = `${path.resolve(root, input)}/index.ts`
+  defaultOpts.input = inputPath
+
+  const getPaths = (id) => {
+    if (isPkg(id)) {
+      if (isExcluded(id)) return replacePrefix(isRoot ? './' : '../', id)
+      return replacePrefix(isRoot ? './el-' : '../el-', id)
+    }
+  }
+  const esm = {
+    format: 'es',
+    file: `es/${name}`,
+    paths: getPaths,
+  };
+  const cjs = {
+    format: 'cjs',
+    file: `lib/${name}`,
+    paths: getPaths,
+    exports: 'named',
+  };
+  const bundle = await rollup.rollup(defaultOpts);
+  await Promise.all([bundle.write(esm), bundle.write(cjs)])
+  console.log(name, 'build finished');
+}
+
+module.exports = run;

build/common.js

@@ -0,0 +1,3 @@
+module.exports = {
+  noElPrefixFile: /(utils|directives|hooks|locale)/,
+}

build/gen-type.js

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs')
+const path = require('path')
+const { noElPrefixFile } = require('./common')
+
+const outsideImport = /import .* from '..\/(.*?)\/src\/.*/
+
+// global.d.ts
+fs.copyFileSync(
+  path.resolve(__dirname, '../typings/vue-shim.d.ts'),
+  path.resolve(__dirname, '../lib/element-plus.d.ts'),
+)
+// index.d.ts
+const newIndexPath = path.resolve(__dirname, '../lib/index.d.ts')
+fs.copyFileSync(path.resolve(__dirname, '../lib/element-plus/index.d.ts'), newIndexPath)
+const index = fs.readFileSync(newIndexPath)
+const newIndex = index.toString().replace(/@element-plus\//g, './el-').replace('el-utils', 'utils').replace('el-locale', 'locale')
+fs.writeFileSync(newIndexPath, newIndex)
+
+// remove ep
+fs.rmdirSync(path.resolve(__dirname, '../lib/element-plus'), { recursive: true })
+
+// remove test-utils
+fs.rmdirSync(path.resolve(__dirname, '../lib/test-utils'), { recursive: true })
+
+// component
+const libDirPath = path.resolve(__dirname, '../lib')
+fs.readdirSync(libDirPath).forEach(comp => {
+  if (!noElPrefixFile.test(comp)) {
+    if (fs.lstatSync(path.resolve(libDirPath, comp)).isDirectory()) {
+      // rename
+      const newCompName = `el-${comp}`
+      fs.renameSync(path.resolve(libDirPath, comp),
+        path.resolve(libDirPath, newCompName))
+      // re-import
+      const imp = fs.readFileSync(path.resolve(__dirname, '../lib', newCompName, 'index.d.ts')).toString()
+      if(outsideImport.test(imp) || imp.includes('@element-plus/')) {
+        const newImp = imp.replace(outsideImport, (i, c) => {
+          return i.replace(`../${c}`, `../el-${c}`)
+        }).replace(/@element-plus\//g, '../el-').replace('el-utils', 'utils').replace('el-locale', 'locale')
+        fs.writeFileSync(path.resolve(__dirname, '../lib', newCompName, 'index.d.ts'), newImp)
+      }
+    }
+  }
+})
+
+// after components dir renamed
+fs.readdirSync(libDirPath).forEach(comp => {
+  // check src/*.d.ts exist
+  const srcPath = path.resolve(libDirPath, comp, './src')
+  if (fs.existsSync(srcPath)) {
+    if (fs.lstatSync(srcPath).isDirectory()) {
+      fs.readdir(srcPath, 'utf-8', (err, data) => {
+        if (err) return
+        // replace all @element-plus in src/*.d.ts
+        data.forEach(f => {
+          if (!fs.lstatSync(path.resolve(srcPath, f)).isDirectory()) {
+            const imp = fs.readFileSync(path.resolve(srcPath, f)).toString()
+            if (imp.includes('@element-plus/')) {
+              const newImp = imp.replace(/@element-plus\//g, '../../el-').replace('el-utils', 'utils').replace('el-locale', 'locale')
+              fs.writeFileSync(path.resolve(srcPath, f), newImp)
+            }
+          }
+        })
+      })
+    }
+  }
+})

build/gen-version.js

@@ -0,0 +1,14 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs')
+const path = require('path')
+const tagVer = process.env.TAG_VERSION
+if (tagVer) {
+  version = tagVer.startsWith('v') ? tagVer.slice(1) : tagVer
+} else {
+  version = require('../package.json').version
+}
+fs.writeFileSync(
+  path.resolve(__dirname, '../packages/element-plus/version.ts'),
+  `export const version = '${version}'
+`,
+)

build/getCpus.js

@@ -0,0 +1,4 @@
+/* eslint-disable */
+const os = require('os')
+
+console.log(os.cpus().length)

build/getPkgs.js

@@ -0,0 +1,4 @@
+/* eslint-disable */
+const { getPackagesSync } = require('@lerna/project');
+
+module.exports = getPackagesSync();

build/rollup.config.bundle.js

@@ -0,0 +1,47 @@
+// import vue from 'rollup-plugin-vue'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import path from 'path'
+// import commonjs from '@rollup/plugin-commonjs'
+import { terser } from 'rollup-plugin-terser'
+import typescript from 'rollup-plugin-typescript2'
+import pkg from '../package.json'
+const deps = Object.keys(pkg.dependencies)
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const vue = require('rollup-plugin-vue')
+
+export default [
+  {
+    input: path.resolve(__dirname, '../packages/element-plus/index.ts'),
+    output: {
+      format: 'es',
+      file: 'lib/index.esm.js',
+    },
+    plugins: [
+      terser(),
+      nodeResolve(),
+      // commonjs(),
+      vue({
+        target: 'browser',
+        css: false,
+        exposeFilename: false,
+      }),
+      typescript({
+        tsconfigOverride: {
+          'include': [
+            'packages/**/*',
+            'typings/vue-shim.d.ts',
+          ],
+          'exclude': [
+            'node_modules',
+            'packages/**/__tests__/*',
+          ],
+        },
+        abortOnError: false,
+      }),
+    ],
+    external(id) {
+      return /^vue/.test(id)
+        || deps.some(k => new RegExp('^' + k).test(id))
+    },
+  },
+]

build/rollup.config.js

@@ -0,0 +1,62 @@
+import vue from 'rollup-plugin-vue'
+import css from 'rollup-plugin-css-only'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import esbuild from 'rollup-plugin-esbuild'
+import path from 'path'
+import { getPackagesSync } from '@lerna/project'
+import pkg from '../package.json'
+
+const noElPrefixFile = /(utils|directives|hooks|locale)/
+const getOutFile = (name, dir='lib') => {
+  const compName = name.split('@element-plus/')[1]
+  if(noElPrefixFile.test(name)) {
+    return `${dir}/${compName}/index.js`
+  }
+  return `${dir}/el-${compName}/index.js`
+}
+
+const deps = Object.keys(pkg.dependencies)
+const inputs = getPackagesSync()
+  .map(pkg => pkg.name)
+  .filter(name =>
+    name.includes('@element-plus') &&
+    !name.includes('utils'),
+  )
+
+export default inputs.map(name => ({
+  input: path.resolve(__dirname, `../packages/${name.split('@element-plus/')[1]}/index.ts`),
+  output: [{
+    format: 'es',
+    file: getOutFile(name, 'es'),
+    paths(id) {
+      if (/^@element-plus/.test(id)) {
+        if (noElPrefixFile.test(id)) return id.replace('@element-plus', '..')
+        return id.replace('@element-plus/', '../el-')
+      }
+    },
+  },{
+    format: 'cjs',
+    file: getOutFile(name, 'lib'),
+    exports: 'named',
+    paths(id) {
+      if (/^@element-plus/.test(id)) {
+        if (noElPrefixFile.test(id)) return id.replace('@element-plus', '..')
+        return id.replace('@element-plus/', '../el-')
+      }
+    },
+  }],
+  plugins: [
+    css(),
+    vue({
+      target: 'browser',
+      css: false,
+    }),
+    nodeResolve(),
+    esbuild(),
+  ],
+  external(id) {
+    return /^vue/.test(id)
+      || /^@element-plus/.test(id)
+      || deps.some(k => new RegExp('^' + k).test(id))
+  },
+}))

build/webpack.config.js

@@ -0,0 +1,69 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path')
+const webpack = require('webpack')
+const { VueLoaderPlugin } = require('vue-loader')
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+
+const libMode = process.env.LIBMODE
+const isFullMode = libMode === 'full'
+let externals = [
+  {
+    vue: {
+      root: 'Vue',
+      commonjs: 'vue',
+      commonjs2: 'vue',
+    },
+  },
+]
+const plugins = [
+  new VueLoaderPlugin(),
+  // new BundleAnalyzerPlugin(),
+]
+
+const entry = path.resolve(__dirname, '../packages/element-plus/index.ts')
+
+if (!isFullMode) {
+  externals.push({
+    '@popperjs/core': '@popperjs/core',
+    'async-validator': 'async-validator',
+    'mitt': 'mitt',
+    'normalize-wheel': 'normalize-wheel',
+    'resize-observer-polyfill': 'resize-observer-polyfill',
+  },
+  /^dayjs.*/,
+  /^lodash.*/)
+}
+
+const config = {
+  mode: 'production',
+  entry,
+  output: {
+    path: path.resolve(__dirname, '../lib'),
+    publicPath: '/',
+    filename: isFullMode ? 'index.full.js' : 'index.js',
+    libraryTarget: 'umd',
+    library: 'ElementPlus',
+    umdNamedDefine: true,
+    globalObject: 'typeof self !== \'undefined\' ? self : this',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: 'vue-loader',
+      },
+      {
+        test: /\.(ts|js)x?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.json'],
+  },
+  externals,
+  plugins,
+}
+
+module.exports = config

package.json

@@ -9,11 +9,11 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "babel-plugin-lodash": "^3.3.4",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.5",
     "echarts": "^5.1.1",
     "element-plus": "^1.0.2-beta.44",
-    "element-ui": "^2.15.2",
     "lib-flexible": "^0.3.2",
     "lodash": "^4.17.21",
     "moment-timezone": "^0.5.33",
@@ -28,6 +28,23 @@
     "vuex": "^4.0.1"
   },
   "devDependencies": {
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.11.4",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-typescript": "^7.10.4",
+    "@commitlint/cli": "^9.1.2",
+    "@commitlint/config-conventional": "^9.1.2",
+    "@rollup/plugin-commonjs": "^15.1.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-typescript": "^6.0.0",
+    "@types/jest": "^26.0.10",
+    "@types/lodash": "^4.14.161",
+    "@typescript-eslint/eslint-plugin": "^3.10.1",
+    "@typescript-eslint/parser": "^3.10.1",
+    "@vue/babel-plugin-jsx": "^1.0.0",
+    "@vue/component-compiler-utils": "^3.2.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",

src/.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  semi: false,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 80,
+  tabWidth: 2,
+  endOfLine: 'auto',
+}

src/commitlint.config.js

@@ -0,0 +1,48 @@
+// eslint-disable-next-line
+const importFrom = require('import-from')
+
+function getPackages (context) {
+  return Promise.resolve()
+    .then(() => {
+      const ctx = context || {}
+      const cwd = ctx.cwd || process.cwd()
+      const Project = importFrom(cwd, '@lerna/project')
+      const project = new Project(cwd)
+      return project.getPackages()
+    })
+    .then(packages => {
+      return packages.map(pkg => pkg.name).map(name => (name.charAt(0) === '@' ? name.split('/')[1] : name))
+    })
+}
+
+const scopes = [
+  'project',
+  'core',
+  'style',
+  'docs',
+  'ci',
+  'dev',
+  'build',
+  'deploy',
+  'other',
+]
+
+module.exports = {
+  rules: {
+    'scope-enum': ctx => getPackages(ctx).then(packages => [2, 'always', [...packages, ...scopes]]),
+    'body-leading-blank': [1, 'always'],
+    'footer-leading-blank': [1, 'always'],
+    'header-max-length': [2, 'always', 72],
+    'scope-case': [2, 'always', 'lower-case'],
+    'subject-case': [1, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case']],
+    'subject-empty': [2, 'never'],
+    'subject-full-stop': [2, 'never', '.'],
+    'type-case': [2, 'always', 'lower-case'],
+    'type-empty': [2, 'never'],
+    'type-enum': [
+      2,
+      'always',
+      ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test', 'improvement'],
+    ],
+  },
+}

src/components/common/MyDatePicker/index.d.ts

@@ -0,0 +1,4 @@
+import DatePicker from './src/date-picker';
+import type { SFCWithInstall } from 'element-plus/lib/utils/types';
+declare const _DatePicker: SFCWithInstall<typeof DatePicker>;
+export default _DatePicker;

src/components/common/MyDatePicker/src/date-picker-com/basic-date-table.vue.d.ts

@@ -0,0 +1,61 @@
+import { PropType } from 'vue';
+import dayjs from 'dayjs';
+declare const _default: import("vue").DefineComponent<{
+    date: {
+        type: PropType<dayjs.Dayjs>;
+    };
+    minDate: {
+        type: PropType<dayjs.Dayjs>;
+    };
+    maxDate: {
+        type: PropType<dayjs.Dayjs>;
+    };
+    parsedValue: {
+        type: PropType<dayjs.Dayjs | dayjs.Dayjs[]>;
+    };
+    selectionMode: {
+        type: StringConstructor;
+        default: string;
+    };
+    showWeekNumber: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabledDate: {
+        type: FunctionConstructor;
+    };
+    cellClassName: {
+        type: FunctionConstructor;
+    };
+    rangeState: {
+        type: ObjectConstructor;
+        default: () => {
+            endDate: any;
+            selecting: boolean;
+        };
+    };
+}, {
+    handleMouseMove: (event: any) => void;
+    t: (...args: any[]) => string;
+    rows: import("vue").ComputedRef<any[][]>;
+    isWeekActive: (cell: any) => any;
+    getCellClasses: (cell: any) => string;
+    WEEKS: import("vue").ComputedRef<any>;
+    handleClick: (event: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changerange" | "pick" | "select")[], "changerange" | "pick" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    selectionMode: unknown;
+    showWeekNumber: boolean;
+    rangeState: Record<string, any>;
+} & {
+    date?: unknown;
+    minDate?: unknown;
+    maxDate?: unknown;
+    parsedValue?: unknown;
+    disabledDate?: unknown;
+    cellClassName?: unknown;
+}>, {
+    selectionMode: unknown;
+    showWeekNumber: boolean;
+    rangeState: Record<string, any>;
+}>;
+export default _default;

src/components/common/MyDatePicker/src/date-picker-com/basic-month-table.vue.d.ts

@@ -0,0 +1,50 @@
+import dayjs from 'dayjs';
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    disabledDate: {
+        type: PropType<(_: Date) => void>;
+    };
+    selectionMode: {
+        type: StringConstructor;
+        default: string;
+    };
+    minDate: {
+        type: PropType<dayjs.Dayjs>;
+    };
+    maxDate: {
+        type: PropType<dayjs.Dayjs>;
+    };
+    date: {
+        type: PropType<dayjs.Dayjs>;
+    };
+    parsedValue: {
+        type: PropType<dayjs.Dayjs>;
+    };
+    rangeState: {
+        type: ObjectConstructor;
+        default: () => {
+            endDate: any;
+            selecting: boolean;
+        };
+    };
+}, {
+    handleMouseMove: (event: any) => void;
+    handleMonthTableClick: (event: any) => void;
+    rows: import("vue").ComputedRef<any[][]>;
+    getCellStyle: (cell: any) => any;
+    t: (...args: any[]) => string;
+    months: any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changerange" | "pick" | "select")[], "changerange" | "pick" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    selectionMode: unknown;
+    rangeState: Record<string, any>;
+} & {
+    disabledDate?: unknown;
+    minDate?: unknown;
+    maxDate?: unknown;
+    date?: unknown;
+    parsedValue?: unknown;
+}>, {
+    selectionMode: unknown;
+    rangeState: Record<string, any>;
+}>;
+export default _default;

src/components/common/MyDatePicker/src/date-picker-com/basic-year-table.vue.d.ts

@@ -0,0 +1,22 @@
+import { PropType } from 'vue';
+import dayjs from 'dayjs';
+declare const _default: import("vue").DefineComponent<{
+    disabledDate: {
+        type: PropType<(_: Date) => void>;
+    };
+    parsedValue: {
+        type: PropType<dayjs.Dayjs>;
+    };
+    date: {
+        type: PropType<dayjs.Dayjs>;
+    };
+}, {
+    startYear: import("vue").ComputedRef<number>;
+    getCellStyle: (year: any) => any;
+    handleYearTableClick: (event: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "pick"[], "pick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {
+    disabledDate?: unknown;
+    parsedValue?: unknown;
+    date?: unknown;
+}>, {}>;
+export default _default;

src/components/common/MyDatePicker/src/date-picker-com/panel-date-pick.vue.d.ts

@@ -0,0 +1,136 @@
+import dayjs, { Dayjs } from 'dayjs';
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    parsedValue: {
+        type: PropType<dayjs.Dayjs | dayjs.Dayjs[]>;
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    handleTimePick: (value: any, visible: any, first: any) => void;
+    handleTimePickClose: () => void;
+    onTimePickerInputFocus: () => void;
+    timePickerVisible: import("vue").Ref<boolean>;
+    visibleTime: import("vue").ComputedRef<any>;
+    visibleDate: import("vue").ComputedRef<any>;
+    showTime: import("vue").ComputedRef<boolean>;
+    changeToNow: () => void;
+    onConfirm: () => void;
+    footerVisible: import("vue").ComputedRef<boolean>;
+    handleYearPick: (year: any) => void;
+    showMonthPicker: () => void;
+    showYearPicker: () => void;
+    handleMonthPick: (month: any) => void;
+    hasShortcuts: import("vue").ComputedRef<boolean>;
+    shortcuts: any;
+    arrowControl: any;
+    disabledDate: any;
+    cellClassName: any;
+    selectionMode: import("vue").ComputedRef<unknown>;
+    handleShortcutClick: (shortcut: any) => void;
+    prevYear_: () => void;
+    nextYear_: () => void;
+    prevMonth_: () => void;
+    nextMonth_: () => void;
+    innerDate: import("vue").Ref<{
+        clone: () => dayjs.Dayjs;
+        isValid: () => boolean;
+        year: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        month: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        date: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        day: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        hour: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        minute: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        second: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        millisecond: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
+        get: (unit: dayjs.UnitType) => number;
+        add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        format: (template?: string) => string;
+        diff: (date: dayjs.ConfigType, unit?: "M" | "week" | "month" | "year" | "day" | "date" | "hour" | "minute" | "second" | "millisecond" | "d" | "y" | "h" | "m" | "s" | "ms" | "w" | "quarter" | "Q", float?: boolean) => number;
+        valueOf: () => number;
+        unix: () => number;
+        daysInMonth: () => number;
+        toDate: () => Date;
+        toJSON: () => string;
+        toISOString: () => string;
+        toString: () => string;
+        utcOffset: () => number;
+        isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        locale: {
+            (): string;
+            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
+        };
+        localeData: () => any;
+        week: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        weekYear: () => number;
+        dayOfYear: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+    }>;
+    t: (...args: any[]) => string;
+    yearLabel: import("vue").ComputedRef<string>;
+    currentView: import("vue").Ref<string>;
+    month: import("vue").ComputedRef<number>;
+    handleDatePick: (value: Dayjs) => void;
+    handleVisibleTimeChange: (value: any) => void;
+    handleVisibleDateChange: (value: any) => void;
+    timeFormat: import("vue").ComputedRef<any>;
+    userInputTime: any;
+    userInputDate: any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "set-picker-option")[], "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    visible: boolean;
+    format: unknown;
+    type: unknown;
+} & {
+    parsedValue?: unknown;
+}>, {
+    visible: boolean;
+    format: unknown;
+}>;
+export default _default;

src/components/common/MyDatePicker/src/date-picker-com/panel-date-range.vue.d.ts

@@ -0,0 +1,210 @@
+import { PropType } from 'vue';
+import dayjs from 'dayjs';
+declare const _default: import("vue").DefineComponent<{
+    unlinkPanels: BooleanConstructor;
+    parsedValue: {
+        type: PropType<dayjs.Dayjs[]>;
+    };
+    type: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    shortcuts: any;
+    disabledDate: any;
+    cellClassName: any;
+    minTimePickerVisible: import("vue").Ref<boolean>;
+    maxTimePickerVisible: import("vue").Ref<boolean>;
+    handleMinTimeClose: () => void;
+    handleMaxTimeClose: () => void;
+    handleShortcutClick: (shortcut: any) => void;
+    rangeState: import("vue").Ref<{
+        endDate: any;
+        selecting: boolean;
+    }>;
+    minDate: any;
+    maxDate: any;
+    handleRangePick: (val: any, close?: boolean) => void;
+    onSelect: (selecting: any) => void;
+    handleChangeRange: (val: any) => void;
+    btnDisabled: import("vue").ComputedRef<boolean>;
+    enableYearArrow: import("vue").ComputedRef<boolean>;
+    enableMonthArrow: import("vue").ComputedRef<boolean>;
+    rightPrevMonth: () => void;
+    rightPrevYear: () => void;
+    rightNextMonth: () => void;
+    rightNextYear: () => void;
+    leftPrevMonth: () => void;
+    leftPrevYear: () => void;
+    leftNextMonth: () => void;
+    leftNextYear: () => void;
+    hasShortcuts: import("vue").ComputedRef<boolean>;
+    leftLabel: import("vue").ComputedRef<string>;
+    rightLabel: import("vue").ComputedRef<string>;
+    leftDate: import("vue").Ref<{
+        clone: () => dayjs.Dayjs;
+        isValid: () => boolean;
+        year: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        month: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        date: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        day: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        hour: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        minute: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        second: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        millisecond: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
+        get: (unit: dayjs.UnitType) => number;
+        add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        format: (template?: string) => string;
+        diff: (date: dayjs.ConfigType, unit?: "M" | "millisecond" | "second" | "minute" | "hour" | "day" | "month" | "year" | "date" | "d" | "y" | "h" | "m" | "s" | "ms" | "week" | "w" | "quarter" | "Q", float?: boolean) => number;
+        valueOf: () => number;
+        unix: () => number;
+        daysInMonth: () => number;
+        toDate: () => Date;
+        toJSON: () => string;
+        toISOString: () => string;
+        toString: () => string;
+        utcOffset: () => number;
+        isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        locale: {
+            (): string;
+            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
+        };
+        localeData: () => any;
+        week: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        weekYear: () => number;
+        dayOfYear: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+    }>;
+    rightDate: import("vue").Ref<{
+        clone: () => dayjs.Dayjs;
+        isValid: () => boolean;
+        year: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        month: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        date: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        day: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        hour: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        minute: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        second: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        millisecond: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
+        get: (unit: dayjs.UnitType) => number;
+        add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        format: (template?: string) => string;
+        diff: (date: dayjs.ConfigType, unit?: "M" | "millisecond" | "second" | "minute" | "hour" | "day" | "month" | "year" | "date" | "d" | "y" | "h" | "m" | "s" | "ms" | "week" | "w" | "quarter" | "Q", float?: boolean) => number;
+        valueOf: () => number;
+        unix: () => number;
+        daysInMonth: () => number;
+        toDate: () => Date;
+        toJSON: () => string;
+        toISOString: () => string;
+        toString: () => string;
+        utcOffset: () => number;
+        isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        locale: {
+            (): string;
+            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
+        };
+        localeData: () => any;
+        week: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        weekYear: () => number;
+        dayOfYear: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+    }>;
+    showTime: import("vue").ComputedRef<boolean>;
+    t: (...args: any[]) => string;
+    minVisibleDate: import("vue").ComputedRef<any>;
+    maxVisibleDate: import("vue").ComputedRef<any>;
+    minVisibleTime: import("vue").ComputedRef<any>;
+    maxVisibleTime: import("vue").ComputedRef<any>;
+    arrowControl: any;
+    handleDateInput: (value: any, type: any) => void;
+    handleDateChange: (value: any, type: any) => void;
+    handleTimeInput: (value: any, type: any) => void;
+    handleTimeChange: (value: any, type: any) => void;
+    handleMinTimePick: (value: any, visible: any, first: any) => void;
+    handleMaxTimePick: (value: any, visible: any, first: any) => void;
+    handleClear: () => void;
+    handleConfirm: (visible?: boolean) => void;
+    timeFormat: import("vue").ComputedRef<any>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "set-picker-option")[], "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    unlinkPanels: boolean;
+    type: unknown;
+} & {
+    parsedValue?: unknown;
+}>, {
+    unlinkPanels: boolean;
+}>;
+export default _default;

src/components/common/MyDatePicker/src/date-picker-com/panel-month-range.vue.d.ts

@@ -0,0 +1,179 @@
+import dayjs from 'dayjs';
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    unlinkPanels: BooleanConstructor;
+    parsedValue: {
+        type: PropType<dayjs.Dayjs[]>;
+    };
+}, {
+    shortcuts: any;
+    disabledDate: any;
+    onSelect: (selecting: any) => void;
+    handleRangePick: (val: any, close?: boolean) => void;
+    rangeState: import("vue").Ref<{
+        endDate: any;
+        selecting: boolean;
+    }>;
+    handleChangeRange: (val: any) => void;
+    minDate: any;
+    maxDate: any;
+    enableYearArrow: import("vue").ComputedRef<boolean>;
+    leftLabel: import("vue").ComputedRef<string>;
+    rightLabel: import("vue").ComputedRef<string>;
+    leftNextYear: () => void;
+    leftPrevYear: () => void;
+    rightNextYear: () => void;
+    rightPrevYear: () => void;
+    t: (...args: any[]) => string;
+    leftDate: import("vue").Ref<{
+        clone: () => dayjs.Dayjs;
+        isValid: () => boolean;
+        year: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        month: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        date: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        day: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        hour: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        minute: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        second: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        millisecond: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
+        get: (unit: dayjs.UnitType) => number;
+        add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        format: (template?: string) => string;
+        diff: (date: dayjs.ConfigType, unit?: "M" | "millisecond" | "second" | "minute" | "hour" | "day" | "month" | "year" | "date" | "d" | "y" | "h" | "m" | "s" | "ms" | "week" | "w" | "quarter" | "Q", float?: boolean) => number;
+        valueOf: () => number;
+        unix: () => number;
+        daysInMonth: () => number;
+        toDate: () => Date;
+        toJSON: () => string;
+        toISOString: () => string;
+        toString: () => string;
+        utcOffset: () => number;
+        isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        locale: {
+            (): string;
+            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
+        };
+        localeData: () => any;
+        week: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        weekYear: () => number;
+        dayOfYear: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+    }>;
+    rightDate: import("vue").Ref<{
+        clone: () => dayjs.Dayjs;
+        isValid: () => boolean;
+        year: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        month: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        date: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        day: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        hour: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        minute: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        second: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        millisecond: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
+        get: (unit: dayjs.UnitType) => number;
+        add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        format: (template?: string) => string;
+        diff: (date: dayjs.ConfigType, unit?: "M" | "millisecond" | "second" | "minute" | "hour" | "day" | "month" | "year" | "date" | "d" | "y" | "h" | "m" | "s" | "ms" | "week" | "w" | "quarter" | "Q", float?: boolean) => number;
+        valueOf: () => number;
+        unix: () => number;
+        daysInMonth: () => number;
+        toDate: () => Date;
+        toJSON: () => string;
+        toISOString: () => string;
+        toString: () => string;
+        utcOffset: () => number;
+        isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        locale: {
+            (): string;
+            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
+        };
+        localeData: () => any;
+        week: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        weekYear: () => number;
+        dayOfYear: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+    }>;
+    hasShortcuts: import("vue").ComputedRef<boolean>;
+    handleShortcutClick: (shortcut: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "set-picker-option")[], "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    unlinkPanels: boolean;
+} & {
+    parsedValue?: unknown;
+}>, {
+    unlinkPanels: boolean;
+}>;
+export default _default;

src/components/common/MyDatePicker/src/date-picker.d.ts

@@ -0,0 +1,154 @@
+declare const _default: import("vue").DefineComponent<{
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: (ArrayConstructor | StringConstructor)[];
+        default: string;
+    };
+    popperClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    format: {
+        type: StringConstructor;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prefixIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: import("vue").PropType<ComponentSize>;
+        validator: (val: string) => boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    popperOptions: {
+        type: import("vue").PropType<import("@popperjs/core").Options>;
+        default: () => {};
+    };
+    modelValue: {
+        type: import("vue").PropType<string | Date | Date[]>;
+        default: string;
+    };
+    rangeSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    startPlaceholder: StringConstructor;
+    endPlaceholder: StringConstructor;
+    defaultValue: {
+        type: import("vue").PropType<Date | Date[]>;
+    };
+    defaultTime: {
+        type: import("vue").PropType<Date | Date[]>;
+    };
+    isRange: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabledHours: {
+        type: FunctionConstructor;
+    };
+    disabledMinutes: {
+        type: FunctionConstructor;
+    };
+    disabledSeconds: {
+        type: FunctionConstructor;
+    };
+    disabledDate: {
+        type: FunctionConstructor;
+    };
+    cellClassName: {
+        type: FunctionConstructor;
+    };
+    shortcuts: {
+        type: ArrayConstructor;
+        default: () => any[];
+    };
+    arrowControl: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    validateEvent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    unlinkPanels: BooleanConstructor;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    type: unknown;
+    name: unknown;
+    popperClass: unknown;
+    clearable: boolean;
+    clearIcon: unknown;
+    editable: boolean;
+    prefixIcon: unknown;
+    readonly: boolean;
+    disabled: boolean;
+    placeholder: unknown;
+    popperOptions: unknown;
+    modelValue: unknown;
+    rangeSeparator: unknown;
+    isRange: boolean;
+    shortcuts: unknown;
+    arrowControl: boolean;
+    validateEvent: boolean;
+    unlinkPanels: boolean;
+} & {
+    format?: unknown;
+    size?: unknown;
+    startPlaceholder?: unknown;
+    endPlaceholder?: unknown;
+    defaultValue?: unknown;
+    defaultTime?: unknown;
+    disabledHours?: unknown;
+    disabledMinutes?: unknown;
+    disabledSeconds?: unknown;
+    disabledDate?: unknown;
+    cellClassName?: unknown;
+}>, {
+    type: unknown;
+    name: unknown;
+    popperClass: unknown;
+    clearable: boolean;
+    clearIcon: unknown;
+    editable: boolean;
+    prefixIcon: unknown;
+    readonly: boolean;
+    disabled: boolean;
+    placeholder: unknown;
+    popperOptions: unknown;
+    modelValue: unknown;
+    rangeSeparator: unknown;
+    isRange: boolean;
+    shortcuts: unknown;
+    arrowControl: boolean;
+    validateEvent: boolean;
+    unlinkPanels: boolean;
+}>;
+export default _default;

src/components/common/MytTimePicker/index.d.ts

@@ -0,0 +1,10 @@
+import TimePicker from './src/time-picker';
+import CommonPicker from './src/common/picker.vue';
+import TimePickPanel from './src/time-picker-com/panel-time-pick.vue';
+import type { SFCWithInstall } from 'element-plus/lib/utils/types';
+export * from './src/common/date-utils';
+export * from './src/common/constant';
+export * from './src/common/props';
+declare const _TimePicker: SFCWithInstall<typeof TimePicker>;
+export { CommonPicker, TimePickPanel };
+export default _TimePicker;

src/components/common/MytTimePicker/src/common/constant.d.ts

@@ -0,0 +1,12 @@
+export declare const DEFAULT_FORMATS_TIME = "HH:mm:ss";
+export declare const DEFAULT_FORMATS_DATE = "YYYY-MM-DD";
+export declare const DEFAULT_FORMATS_DATEPICKER: {
+    date: string;
+    week: string;
+    year: string;
+    month: string;
+    datetime: string;
+    monthrange: string;
+    daterange: string;
+    datetimerange: string;
+};

src/components/common/MytTimePicker/src/common/date-utils.d.ts

@@ -0,0 +1,3 @@
+export declare const rangeArr: (n: any) => number[];
+export declare const extractDateFormat: (format: any) => any;
+export declare const extractTimeFormat: (format: any) => any;

src/components/common/MytTimePicker/src/common/picker.vue.d.ts

@@ -0,0 +1,182 @@
+import type { Options } from '@popperjs/core';
+declare const _default: import("vue").DefineComponent<{
+    name: {
+        type: (ArrayConstructor | StringConstructor)[];
+        default: string;
+    };
+    popperClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    format: {
+        type: StringConstructor;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prefixIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: import("vue").PropType<ComponentSize>;
+        validator: (val: string) => boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    popperOptions: {
+        type: import("vue").PropType<Options>;
+        default: () => {};
+    };
+    modelValue: {
+        type: import("vue").PropType<string | Date | Date[]>;
+        default: string;
+    };
+    rangeSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    startPlaceholder: StringConstructor;
+    endPlaceholder: StringConstructor;
+    defaultValue: {
+        type: import("vue").PropType<Date | Date[]>;
+    };
+    defaultTime: {
+        type: import("vue").PropType<Date | Date[]>;
+    };
+    isRange: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabledHours: {
+        type: FunctionConstructor;
+    };
+    disabledMinutes: {
+        type: FunctionConstructor;
+    };
+    disabledSeconds: {
+        type: FunctionConstructor;
+    };
+    disabledDate: {
+        type: FunctionConstructor;
+    };
+    cellClassName: {
+        type: FunctionConstructor;
+    };
+    shortcuts: {
+        type: ArrayConstructor;
+        default: () => any[];
+    };
+    arrowControl: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    validateEvent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    unlinkPanels: BooleanConstructor;
+}, {
+    elPopperOptions: Options;
+    isDatesPicker: import("vue").ComputedRef<boolean>;
+    handleEndChange: () => void;
+    handleStartChange: () => void;
+    handleStartInput: (event: any) => void;
+    handleEndInput: (event: any) => void;
+    onUserInput: (e: any) => void;
+    handleChange: () => void;
+    handleKeydown: (event: any) => void;
+    popperPaneRef: import("vue").ComputedRef<any>;
+    onClickOutside: () => void;
+    pickerSize: import("vue").ComputedRef<any>;
+    isRangeInput: import("vue").ComputedRef<boolean>;
+    onMouseLeave: () => void;
+    onMouseEnter: () => void;
+    onClearIconClick: (event: any) => void;
+    showClose: import("vue").Ref<boolean>;
+    triggerClass: import("vue").ComputedRef<unknown>;
+    onPick: (date?: any, visible?: boolean) => void;
+    handleFocus: (e: any) => void;
+    pickerVisible: import("vue").Ref<boolean>;
+    pickerActualVisible: import("vue").Ref<boolean>;
+    displayValue: import("vue").ComputedRef<any>;
+    parsedValue: import("vue").ComputedRef<any>;
+    setSelectionRange: (start: any, end: any, pos: any) => void;
+    refPopper: any;
+    pickerDisabled: import("vue").ComputedRef<boolean>;
+    onSetPickerOption: (e: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "focus" | "blur")[], "update:modelValue" | "change" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    name: unknown;
+    popperClass: unknown;
+    type: unknown;
+    clearable: boolean;
+    clearIcon: unknown;
+    editable: boolean;
+    prefixIcon: unknown;
+    readonly: boolean;
+    disabled: boolean;
+    placeholder: unknown;
+    popperOptions: unknown;
+    modelValue: unknown;
+    rangeSeparator: unknown;
+    isRange: boolean;
+    shortcuts: unknown;
+    arrowControl: boolean;
+    validateEvent: boolean;
+    unlinkPanels: boolean;
+} & {
+    format?: unknown;
+    size?: unknown;
+    startPlaceholder?: unknown;
+    endPlaceholder?: unknown;
+    defaultValue?: unknown;
+    defaultTime?: unknown;
+    disabledHours?: unknown;
+    disabledMinutes?: unknown;
+    disabledSeconds?: unknown;
+    disabledDate?: unknown;
+    cellClassName?: unknown;
+}>, {
+    name: unknown;
+    popperClass: unknown;
+    type: unknown;
+    clearable: boolean;
+    clearIcon: unknown;
+    editable: boolean;
+    prefixIcon: unknown;
+    readonly: boolean;
+    disabled: boolean;
+    placeholder: unknown;
+    popperOptions: unknown;
+    modelValue: unknown;
+    rangeSeparator: unknown;
+    isRange: boolean;
+    shortcuts: unknown;
+    arrowControl: boolean;
+    validateEvent: boolean;
+    unlinkPanels: boolean;
+}>;
+export default _default;

src/components/common/MytTimePicker/src/common/props.d.ts

@@ -0,0 +1,103 @@
+import type { PropType } from 'vue';
+import type { Options } from '@popperjs/core';
+export declare const defaultProps: {
+    name: {
+        type: (ArrayConstructor | StringConstructor)[];
+        default: string;
+    };
+    popperClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    format: {
+        type: StringConstructor;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prefixIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: PropType<ComponentSize>;
+        validator: (val: string) => boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    popperOptions: {
+        type: PropType<Options>;
+        default: () => {};
+    };
+    modelValue: {
+        type: PropType<string | Date | Date[]>;
+        default: string;
+    };
+    rangeSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    startPlaceholder: StringConstructor;
+    endPlaceholder: StringConstructor;
+    defaultValue: {
+        type: PropType<Date | Date[]>;
+    };
+    defaultTime: {
+        type: PropType<Date | Date[]>;
+    };
+    isRange: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabledHours: {
+        type: FunctionConstructor;
+    };
+    disabledMinutes: {
+        type: FunctionConstructor;
+    };
+    disabledSeconds: {
+        type: FunctionConstructor;
+    };
+    disabledDate: {
+        type: FunctionConstructor;
+    };
+    cellClassName: {
+        type: FunctionConstructor;
+    };
+    shortcuts: {
+        type: ArrayConstructor;
+        default: () => any[];
+    };
+    arrowControl: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    validateEvent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    unlinkPanels: BooleanConstructor;
+};

src/components/common/MytTimePicker/src/time-picker-com/basic-time-spinner.vue.d.ts

@@ -0,0 +1,86 @@
+import { Ref, PropType } from 'vue';
+import { Dayjs } from 'dayjs';
+declare const _default: import("vue").DefineComponent<{
+    role: {
+        type: StringConstructor;
+        required: true;
+    };
+    spinnerDate: {
+        type: PropType<Dayjs>;
+        required: true;
+    };
+    showSeconds: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    arrowControl: BooleanConstructor;
+    amPmMode: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabledHours: {
+        type: FunctionConstructor;
+    };
+    disabledMinutes: {
+        type: FunctionConstructor;
+    };
+    disabledSeconds: {
+        type: FunctionConstructor;
+    };
+}, {
+    getRefId: (item: any) => string;
+    spinnerItems: import("vue").ComputedRef<string[]>;
+    currentScrollbar: any;
+    hours: import("vue").ComputedRef<any>;
+    minutes: import("vue").ComputedRef<any>;
+    seconds: import("vue").ComputedRef<any>;
+    hoursList: import("vue").ComputedRef<any[]>;
+    minutesList: import("vue").ComputedRef<any[]>;
+    arrowHourList: import("vue").ComputedRef<any[]>;
+    arrowMinuteList: import("vue").ComputedRef<any[]>;
+    arrowSecondList: import("vue").ComputedRef<any[]>;
+    getAmPmFlag: (hour: any) => string;
+    emitSelectRange: (type: any) => void;
+    adjustCurrentSpinner: (type: any) => void;
+    typeItemHeight: (type: any) => any;
+    listHoursRef: Ref<HTMLElement>;
+    listMinutesRef: Ref<HTMLElement>;
+    listSecondsRef: Ref<HTMLElement>;
+    onIncreaseClick: () => void;
+    onDecreaseClick: () => void;
+    handleClick: (type: any, { value, disabled }: {
+        value: any;
+        disabled: any;
+    }) => void;
+    secondsList: import("vue").ComputedRef<any[]>;
+    timePartsMap: import("vue").ComputedRef<{
+        hours: import("vue").ComputedRef<any>;
+        minutes: import("vue").ComputedRef<any>;
+        seconds: import("vue").ComputedRef<any>;
+    }>;
+    arrowListMap: import("vue").ComputedRef<{
+        hours: import("vue").ComputedRef<any[]>;
+        minutes: import("vue").ComputedRef<any[]>;
+        seconds: import("vue").ComputedRef<any[]>;
+    }>;
+    listMap: import("vue").ComputedRef<{
+        hours: import("vue").ComputedRef<any[]>;
+        minutes: import("vue").ComputedRef<any[]>;
+        seconds: import("vue").ComputedRef<any[]>;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "select-range" | "set-option")[], "change" | "select-range" | "set-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    role: unknown;
+    spinnerDate: unknown;
+    showSeconds: boolean;
+    arrowControl: boolean;
+    amPmMode: unknown;
+} & {
+    disabledHours?: unknown;
+    disabledMinutes?: unknown;
+    disabledSeconds?: unknown;
+}>, {
+    showSeconds: boolean;
+    arrowControl: boolean;
+    amPmMode: unknown;
+}>;
+export default _default;

src/components/common/MytTimePicker/src/time-picker-com/panel-time-pick.vue.d.ts

@@ -0,0 +1,45 @@
+import { PropType } from 'vue';
+import dayjs, { Dayjs } from 'dayjs';
+declare const _default: import("vue").DefineComponent<{
+    visible: BooleanConstructor;
+    actualVisible: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    datetimeRole: {
+        type: StringConstructor;
+    };
+    parsedValue: {
+        type: PropType<string | dayjs.Dayjs>;
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    transitionName: import("vue").ComputedRef<"" | "el-zoom-in-top">;
+    arrowControl: any;
+    onSetOption: (e: any) => void;
+    t: (...args: any[]) => string;
+    handleConfirm: (visible: boolean, first: any) => void;
+    handleChange: (_date: Dayjs) => void;
+    setSelectionRange: (start: any, end: any) => void;
+    amPmMode: import("vue").ComputedRef<"" | "A" | "a">;
+    showSeconds: import("vue").ComputedRef<any>;
+    handleCancel: () => void;
+    disabledHours: any;
+    disabledMinutes: any;
+    disabledSeconds: any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "select-range" | "set-picker-option")[], "pick" | "select-range" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    visible: boolean;
+    actualVisible: boolean;
+    format: unknown;
+} & {
+    datetimeRole?: unknown;
+    parsedValue?: unknown;
+}>, {
+    visible: boolean;
+    actualVisible: boolean;
+    format: unknown;
+}>;
+export default _default;

src/components/common/MytTimePicker/src/time-picker-com/panel-time-range.vue.d.ts

@@ -0,0 +1,44 @@
+import { PropType } from 'vue';
+import dayjs from 'dayjs';
+declare const _default: import("vue").DefineComponent<{
+    visible: BooleanConstructor;
+    actualVisible: BooleanConstructor;
+    parsedValue: {
+        type: PropType<string | dayjs.Dayjs[]>;
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    arrowControl: any;
+    onSetOption: (e: any) => void;
+    setMaxSelectionRange: (start: any, end: any) => void;
+    setMinSelectionRange: (start: any, end: any) => void;
+    btnConfirmDisabled: import("vue").ComputedRef<boolean>;
+    handleCancel: () => void;
+    handleConfirm: (visible?: boolean) => void;
+    t: (...args: any[]) => string;
+    showSeconds: import("vue").ComputedRef<any>;
+    minDate: import("vue").ComputedRef<any>;
+    maxDate: import("vue").ComputedRef<any>;
+    amPmMode: import("vue").ComputedRef<"" | "A" | "a">;
+    handleMinChange: (date: any) => void;
+    handleMaxChange: (date: any) => void;
+    minSelectableRange: import("vue").Ref<any[]>;
+    maxSelectableRange: import("vue").Ref<any[]>;
+    disabledHours_: (role: any, compare: any) => any[];
+    disabledMinutes_: (hour: any, role: any, compare: any) => any;
+    disabledSeconds_: (hour: any, minute: any, role: any, compare: any) => any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "select-range" | "set-picker-option")[], "pick" | "select-range" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    visible: boolean;
+    actualVisible: boolean;
+    format: unknown;
+} & {
+    parsedValue?: unknown;
+}>, {
+    visible: boolean;
+    actualVisible: boolean;
+    format: unknown;
+}>;
+export default _default;

src/components/common/MytTimePicker/src/time-picker-com/useTimePicker.d.ts

@@ -0,0 +1,155 @@
+import { Dayjs } from 'dayjs';
+export declare const getTimeLists: (disabledHours: any, disabledMinutes: any, disabledSeconds: any) => {
+    getHoursList: (role: any, compare?: any) => any[];
+    getMinutesList: (hour: any, role: any, compare?: any) => any[];
+    getSecondsList: (hour: any, minute: any, role: any, compare?: any) => any[];
+};
+export declare const getAvaliableArrs: (disabledHours: any, disabledMinutes: any, disabledSeconds: any) => {
+    getAvaliableHours: (role: any, compare?: any) => any;
+    getAvaliableMinutes: (hour: any, role: any, compare?: any) => any;
+    getAvaliableSeconds: (hour: any, minute: any, role: any, compare?: any) => any;
+};
+export declare const useOldValue: (props: {
+    parsedValue?: string | Dayjs | Dayjs[];
+    visible: boolean;
+}) => import("vue").Ref<string | {
+    clone: () => Dayjs;
+    isValid: () => boolean;
+    year: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    month: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    date: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    day: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    hour: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    minute: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    second: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    millisecond: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    set: (unit: import("dayjs").UnitType, value: number) => Dayjs;
+    get: (unit: import("dayjs").UnitType) => number;
+    add: (value: number, unit: import("dayjs").OpUnitType) => Dayjs;
+    subtract: (value: number, unit: import("dayjs").OpUnitType) => Dayjs;
+    startOf: (unit: import("dayjs").OpUnitType) => Dayjs;
+    endOf: (unit: import("dayjs").OpUnitType) => Dayjs;
+    format: (template?: string) => string;
+    diff: (date: import("dayjs").ConfigType, unit?: "year" | "month" | "date" | "day" | "hour" | "minute" | "second" | "millisecond" | "week" | "d" | "M" | "y" | "h" | "m" | "s" | "ms" | "w" | "quarter" | "Q", float?: boolean) => number;
+    valueOf: () => number;
+    unix: () => number;
+    daysInMonth: () => number;
+    toDate: () => Date;
+    toJSON: () => string;
+    toISOString: () => string;
+    toString: () => string;
+    utcOffset: () => number;
+    isBefore: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
+    isSame: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
+    isAfter: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
+    locale: {
+        (): string;
+        (preset: string | ILocale, object?: Partial<ILocale>): Dayjs;
+    };
+    localeData: () => any;
+    week: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    weekYear: () => number;
+    dayOfYear: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    isSameOrAfter: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
+    isSameOrBefore: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
+} | {
+    clone: () => Dayjs;
+    isValid: () => boolean;
+    year: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    month: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    date: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    day: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    hour: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    minute: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    second: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    millisecond: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    set: (unit: import("dayjs").UnitType, value: number) => Dayjs;
+    get: (unit: import("dayjs").UnitType) => number;
+    add: (value: number, unit: import("dayjs").OpUnitType) => Dayjs;
+    subtract: (value: number, unit: import("dayjs").OpUnitType) => Dayjs;
+    startOf: (unit: import("dayjs").OpUnitType) => Dayjs;
+    endOf: (unit: import("dayjs").OpUnitType) => Dayjs;
+    format: (template?: string) => string;
+    diff: (date: import("dayjs").ConfigType, unit?: "year" | "month" | "date" | "day" | "hour" | "minute" | "second" | "millisecond" | "week" | "d" | "M" | "y" | "h" | "m" | "s" | "ms" | "w" | "quarter" | "Q", float?: boolean) => number;
+    valueOf: () => number;
+    unix: () => number;
+    daysInMonth: () => number;
+    toDate: () => Date;
+    toJSON: () => string;
+    toISOString: () => string;
+    toString: () => string;
+    utcOffset: () => number;
+    isBefore: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
+    isSame: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
+    isAfter: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
+    locale: {
+        (): string;
+        (preset: string | ILocale, object?: Partial<ILocale>): Dayjs;
+    };
+    localeData: () => any;
+    week: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    weekYear: () => number;
+    dayOfYear: {
+        (): number;
+        (value: number): Dayjs;
+    };
+    isSameOrAfter: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
+    isSameOrBefore: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
+}[]>;

src/components/common/MytTimePicker/src/time-picker.d.ts

@@ -0,0 +1,154 @@
+declare const _default: import("vue").DefineComponent<{
+    isRange: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    name: {
+        type: (ArrayConstructor | StringConstructor)[];
+        default: string;
+    };
+    popperClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    format: {
+        type: StringConstructor;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prefixIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: import("vue").PropType<ComponentSize>;
+        validator: (val: string) => boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    popperOptions: {
+        type: import("vue").PropType<import("@popperjs/core").Options>;
+        default: () => {};
+    };
+    modelValue: {
+        type: import("vue").PropType<string | Date | Date[]>;
+        default: string;
+    };
+    rangeSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    startPlaceholder: StringConstructor;
+    endPlaceholder: StringConstructor;
+    defaultValue: {
+        type: import("vue").PropType<Date | Date[]>;
+    };
+    defaultTime: {
+        type: import("vue").PropType<Date | Date[]>;
+    };
+    disabledHours: {
+        type: FunctionConstructor;
+    };
+    disabledMinutes: {
+        type: FunctionConstructor;
+    };
+    disabledSeconds: {
+        type: FunctionConstructor;
+    };
+    disabledDate: {
+        type: FunctionConstructor;
+    };
+    cellClassName: {
+        type: FunctionConstructor;
+    };
+    shortcuts: {
+        type: ArrayConstructor;
+        default: () => any[];
+    };
+    arrowControl: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    validateEvent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    unlinkPanels: BooleanConstructor;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    isRange: boolean;
+    name: unknown;
+    popperClass: unknown;
+    type: unknown;
+    clearable: boolean;
+    clearIcon: unknown;
+    editable: boolean;
+    prefixIcon: unknown;
+    readonly: boolean;
+    disabled: boolean;
+    placeholder: unknown;
+    popperOptions: unknown;
+    modelValue: unknown;
+    rangeSeparator: unknown;
+    shortcuts: unknown;
+    arrowControl: boolean;
+    validateEvent: boolean;
+    unlinkPanels: boolean;
+} & {
+    format?: unknown;
+    size?: unknown;
+    startPlaceholder?: unknown;
+    endPlaceholder?: unknown;
+    defaultValue?: unknown;
+    defaultTime?: unknown;
+    disabledHours?: unknown;
+    disabledMinutes?: unknown;
+    disabledSeconds?: unknown;
+    disabledDate?: unknown;
+    cellClassName?: unknown;
+}>, {
+    isRange: boolean;
+    name: unknown;
+    popperClass: unknown;
+    type: unknown;
+    clearable: boolean;
+    clearIcon: unknown;
+    editable: boolean;
+    prefixIcon: unknown;
+    readonly: boolean;
+    disabled: boolean;
+    placeholder: unknown;
+    popperOptions: unknown;
+    modelValue: unknown;
+    rangeSeparator: unknown;
+    shortcuts: unknown;
+    arrowControl: boolean;
+    validateEvent: boolean;
+    unlinkPanels: boolean;
+}>;
+export default _default;

src/components/table/CnDataList.vue

@@ -5,6 +5,9 @@
       <!-- 顶部工具栏 -->
       <div class="main-container">
         <div class="top-tools">
+          <myDatePicker
+                  v-model="value1"
+                  type="datetime"/>
           <div class="top-tool-left" style="min-width: 300px">
             <slot name="top-tool-left"></slot>
           </div>
@@ -42,11 +45,13 @@
 
 <script>
 import columnCustomize from '@/components/table/ColumnCustomize'
+import myDatePicker from '../common/MyDatePicker'
 import { fromRoute } from '@/utils/constants'
 
 export default {
   name: 'cnDataList',
   components: {
+    myDatePicker,
     columnCustomize
   },
   props: {
@@ -74,7 +79,8 @@ export default {
       tools: {
         showCustomTableTitle: false // 自定义列弹框是否显示
       },
-      showLayout: []
+      showLayout: [],
+      value1: 1623997984000
     }
   },
   methods: {

src/jest.config.js

@@ -0,0 +1,37 @@
+module.exports = {
+  globals: {
+    // work around: https://github.com/kulshekhar/ts-jest/issues/748#issuecomment-423528659
+    'ts-jest': {
+      diagnostics: {
+        ignoreCodes: [151001],
+      },
+    },
+  },
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.(t|j)sx?$': [
+      'babel-jest', {
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              targets: {
+                node: true,
+              },
+            },
+          ],
+          '@babel/preset-typescript',
+        ],
+        plugins: [
+          '@vue/babel-plugin-jsx',
+          '@babel/plugin-proposal-class-properties',
+        ],
+      },
+    ],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
+  // u can change this option to a more specific folder for test single component or util when dev
+  // for example, ['<rootDir>/packages/input']
+  roots: ['<rootDir>'],
+}

src/store/modules/user.js

@@ -43,7 +43,7 @@ const user = {
   },
   actions: {
     loginSuccess (store, res) {
-      // res.data.timezone = 'America/New_York'
+      res.data.timezone = 'America/New_York'
       window.$dayJs.tz.setDefault(res.data.timezone)
       sessionStorage.setItem('cn-token', res.data.token)
       localStorage.setItem('cn-sys-name', res.data.systemName)

src/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "declaration": true,
+    "noImplicitAny": false,
+    "removeComments": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "noLib": false,
+    "target": "es6",
+    "sourceMap": true,
+    "lib": [
+      "ESNext", "DOM"
+    ],
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}

typings/vue-shim.d.ts

@@ -0,0 +1,21 @@
+declare module '*.vue' {
+  import { App, defineComponent } from 'vue'
+  const component: ReturnType<typeof defineComponent> & {
+    install(app: App): void
+  }
+  export default component
+}
+
+declare type Nullable<T> = T | null;
+
+declare type CustomizedHTMLElement<T> = HTMLElement & T
+
+declare type Indexable<T> = {
+  [key: string]: T
+}
+
+declare type Hash<T> = Indexable<T>
+
+declare type TimeoutHandle = ReturnType<typeof global.setTimeout>
+
+declare type ComponentSize = 'large' | 'medium' | 'small' | 'mini'

typings/vue-test-utils.d.ts

@@ -0,0 +1,11 @@
+import { ComponentPublicInstance } from 'vue'
+
+declare module '@vue/test-utils' {
+  interface DOMWrapper<ElementType> {
+    style: CSSStyleDeclaration
+  }
+
+  interface VueWrapper<T extends ComponentPublicInstance> {
+    style: CSSStyleDeclaration
+  }
+}