├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── DateTimePickerDemo.vue ├── assets │ └── stylus │ │ ├── base.styl │ │ ├── index.styl │ │ └── mixin.styl ├── components │ ├── DateTimePicker.vue │ └── index.js └── main.js └── vue.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-datetime-picker 2 | 3 | 一款基于 VUE 的时间日期选择器，按文档说明编译为组件后引入项目使用。 4 | 5 | 6 | 7 | ## 基本功能 8 | 9 | - [x] 时间日期选择 / 日期选择 / 时间选择 10 | - [x] 设置起止时间范围 11 | - [x] 自定义 按钮 / 标题 / 单位 文案 12 | - [x] 自动选中当前时间 13 | 14 | 15 | 16 | ## 样例 17 | 18 | 在线实例 👉 [DEMO](https://ctxtub.com/vue-datetime-picker/) 19 | 20 | ```vue 21 | 42 | ``` 43 | 44 | 45 | 46 | ## 如何使用 47 | 48 | 1. 安装依赖 49 | 50 | ```shell 51 | npm install 52 | ``` 53 | 54 | 2. 构建组件 55 | 56 | ```shell 57 | npm run build:lib 58 | ``` 59 | 60 | 3. 项目中引入组件 61 | 62 | 将dist目录下，`dateTimePicker.umd.js` & `dateTimePicker.css`引入项目。 63 | 64 | 4. 挂载组件 65 | 66 | `main.js`入口文件中`Vue.install(..)`挂载 或者 `.vue`文件中`components`中引入。 67 | 68 | 69 | 70 | ## API 71 | 72 | | 参数 | 说明 | 类型 | 默认值 | 73 | | ------------ | --------------------------- | ------- | ------------------------------------------------------------ | 74 | | v-model | 绑定值，选择器显示/隐藏状态 | Boolean | false | 75 | | title | 选择器标题 | String | 请选择 | 76 | | confirm | 确认按钮文案 | String | 确定 | 77 | | cancel | 取消按钮文案 | String | 取消 | 78 | | transToNow | 是否默认选中当前时间 | Boolean | true | 79 | | selectedText | 选择器内选项单位 | Object | { year: '年', month: '月', day: '日', hour: '时', minute: '分'} | 80 | | startYear | 开始年份 | Number | 1970 | 81 | | startMonth | 开始月份 | Number | 1 | 82 | | startDay | 开始日期 | Number | 1 | 83 | | endYear | 截止年份 | Number | 2030 | 84 | | endMonth | 截止月份 | Number | 12 | 85 | | endDay | 截止日期 | Number | 31 | 86 | 87 | | 事件 | 说明 | 回调参数 | 88 | | ---------- | ------------------ | ------------------------- | 89 | | syncResult | 点击确认按钮时触发 | 选择器选中结果值 `Object` | 90 | 91 | 92 | 93 | ## 目录结构 94 | 95 | ``` 96 | |-- src 97 | |-- DateTimePickerDemo.vue // demo文件 98 | |-- main.js // demo文件入口 99 | |-- assets 100 | | |-- stylus // demo样式文件 101 | | |-- base.styl 102 | | |-- index.styl 103 | | |-- mixin.styl 104 | |-- components // 时间日期选择器组件 105 | |-- DateTimePicker.vue 106 | |-- index.js 107 | ``` -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-datetime-picker", 3 | "version": "2.1.0", 4 | "description": "date/time-picker, 时间/日期选择器", 5 | "author": "Tensho Chen", 6 | "private": true, 7 | "scripts": { 8 | "serve": "vue-cli-service serve", 9 | "build": "vue-cli-service build", 10 | "lint": "vue-cli-service lint", 11 | "build:lib": "vue-cli-service build --target lib --name dateTimePicker src/components/index.js" 12 | }, 13 | "dependencies": { 14 | "core-js": "^2.6.10", 15 | "vue": "^2.6.6" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "^3.12.1", 19 | "@vue/cli-plugin-eslint": "^3.12.1", 20 | "@vue/cli-service": "^3.12.1", 21 | "babel-eslint": "^10.0.3", 22 | "eslint": "^5.8.0", 23 | "eslint-plugin-vue": "^5.2.3", 24 | "mddir": "^1.1.1", 25 | "stylus": "^0.54.7", 26 | "stylus-loader": "^3.0.2", 27 | "vue-template-compiler": "^2.5.21" 28 | }, 29 | "eslintConfig": { 30 | "root": true, 31 | "env": { 32 | "node": true 33 | }, 34 | "extends": [ 35 | "plugin:vue/essential", 36 | "eslint:recommended" 37 | ], 38 | "rules": {}, 39 | "parserOptions": { 40 | "parser": "babel-eslint" 41 | } 42 | }, 43 | "postcss": { 44 | "plugins": { 45 | "autoprefixer": {} 46 | } 47 | }, 48 | "browserslist": [ 49 | "> 1%", 50 | "last 2 versions", 51 | "not ie <= 8" 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ctxtub/vue-datetime-picker/61538fd9a64b1d5fcabfd5d88b5b2504d979c5e3/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 时间日期选择器 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/DateTimePickerDemo.vue: -------------------------------------------------------------------------------- 1 | 62 | 63 | 140 | 141 | 174 | -------------------------------------------------------------------------------- /src/assets/stylus/base.styl: -------------------------------------------------------------------------------- 1 | body,html 2 | line-height: 1 3 | font-weight: 200 4 | font-family: 'PingFang SC','STHeitiSC-Light','Helvetica-Light',arial,sans-serif 5 | margin: 0 6 | padding: 0 7 | 8 | .clearfix 9 | &:after 10 | display: block 11 | content: "." 12 | height: 0 13 | line-height: 0 14 | clear: both 15 | visibility: hidden 16 | 17 | .texthidden 18 | text-indent:-9999px 19 | 20 | 21 | .fscreen 22 | position: absolute 23 | left: 0 24 | right: 0 25 | bottom: 0 26 | top: 0 27 | overflow: hidden 28 | background: #ecf0f3 29 | .fscreen-content 30 | position: absolute 31 | left: 0 32 | right: 0 33 | bottom: 0 34 | top: 0 35 | overflow-x: hidden 36 | overflow-y: auto 37 | 38 | .fpage 39 | &::before 40 | content: " " 41 | position: absolute 42 | left:0 43 | right:0 44 | top:0 45 | bottom:0 46 | background-color:#ecf0f3 47 | z-index:-100 48 | .fpage-content 49 | background-color:#ecf0f3 50 | overflow: hidden 51 | 52 | 53 | @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) 54 | .border-1px 55 | &::after 56 | -webkit-transform: scaleY(0.7) 57 | transform: scaleY(0.7) 58 | 59 | @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) 60 | .border-1px 61 | &::after 62 | -webkit-transform: scaleY(0.5) 63 | transform: scaleY(0.5) -------------------------------------------------------------------------------- /src/assets/stylus/index.styl: -------------------------------------------------------------------------------- 1 | @import "./base" 2 | @import "./mixin" 3 | @import "./iconfont" -------------------------------------------------------------------------------- /src/assets/stylus/mixin.styl: -------------------------------------------------------------------------------- 1 | cal($val) 2 | ($val/37.5)rem -------------------------------------------------------------------------------- /src/components/DateTimePicker.vue: -------------------------------------------------------------------------------- 1 | 151 | 152 | 658 | 659 | 764 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import DateTimePicker from '@/components/DateTimePicker' 2 | 3 | DateTimePicker.install = function (Vue) { 4 | Vue.component(DateTimePicker.name, DateTimePicker) 5 | } 6 | 7 | export default DateTimePicker 8 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueDateTimePicker from './components/index.js' 3 | import DateTimePickerDemo from './DateTimePickerDemo.vue' 4 | 5 | Vue.config.productionTip = false 6 | 7 | Vue.use(VueDateTimePicker) 8 | 9 | new Vue({ 10 | render: h => h(DateTimePickerDemo), 11 | }).$mount('#app') 12 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const TerserPlugin = require('terser-webpack-plugin') 2 | 3 | const publicPath = '' 4 | 5 | // 页面Pages配置 6 | const PAGES = { 7 | index: { 8 | // page 的入口 9 | entry: 'src/main.js', 10 | // 模板来源 11 | template: 'public/index.html', 12 | // 在 dist/index.html 的输出 13 | filename: 'index.html', 14 | // 提取出来的通用 chunk 和 vendor chunk。 15 | chunks: ['chunk-vendors', 'chunk-common', 'index'] 16 | } 17 | } 18 | 19 | module.exports = { 20 | publicPath: publicPath, 21 | pages: PAGES, 22 | filenameHashing: true, 23 | css: { 24 | modules: true, 25 | extract: true, 26 | loaderOptions: {} 27 | }, 28 | transpileDependencies: [], 29 | configureWebpack: { 30 | resolve: { 31 | alias: {} 32 | }, 33 | optimization: { 34 | minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true } } })] 35 | }, 36 | plugins: [] 37 | }, 38 | devServer: {} 39 | } 40 | --------------------------------------------------------------------------------