Repository: TangSY/vue-hash-calendar Branch: master Commit: 1d3423c26555 Files: 45 Total size: 186.0 KB Directory structure: gitextract_m17gn5ur/ ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README-en_US.md ├── README.md ├── babel.config.js ├── build_package/ │ └── package.json ├── commitlint.config.js ├── examples/ │ ├── App.vue │ ├── FirstDayDemo.vue │ ├── Github.vue │ ├── SlotDemo.vue │ ├── TouchDemo.vue │ ├── lunar/ │ │ ├── LunarDemo.vue │ │ └── lunar.js │ ├── main.js │ └── style/ │ ├── common.css │ ├── common.styl │ ├── reset.css │ └── reset.styl ├── npm_package/ │ └── package.json ├── package.json ├── packages/ │ ├── index.js │ └── vueHashCalendar/ │ ├── components/ │ │ └── ScrollContainer.vue │ ├── constant/ │ │ └── img.js │ ├── index.js │ ├── language/ │ │ ├── cn.js │ │ ├── en.js │ │ └── index.js │ ├── src/ │ │ ├── Calendar.vue │ │ ├── DatetimePicker.vue │ │ ├── TimePicker.vue │ │ └── YearMonthPicker.vue │ ├── style/ │ │ ├── colorVariable.styl │ │ ├── common.css │ │ ├── common.styl │ │ ├── reset.css │ │ └── reset.styl │ └── utils/ │ └── util.js ├── public/ │ └── index.html └── vue.config.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .eslintignore ================================================ /build/ /config/ /dist/ /*.js ================================================ FILE: .eslintrc.js ================================================ // https://eslint.org/docs/user-guide/configuring module.exports = { root: true, parserOptions: { parser: "babel-eslint", }, env: { browser: true, }, globals: { Vue: true, VueRouter: true, Vuex: true, axios: true, ELEMENT: true, THEME: true, RootApp: true, BMAP_NORMAL_MAP: true, BMAP_HYBRID_MAP: true, BMap: true, BaiduMap: true, }, extends: [ // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. "plugin:vue/essential", // https://github.com/standard/standard/blob/master/docs/RULES-en.md // 'standard' ], // required to lint *.vue files plugins: ["vue", "promise"], // add your custom rules here rules: { //禁止注册模板中未使用的组件 "vue/no-unused-components": [ "warn", { ignoreWhenBindingPresent: true, }, ], // allow async-await "generator-star-spacing": "off", // allow debugger during development "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", "no-extra-parens": 0, //不允许出现不必要的圆括号 "no-new": 0, //不允许new一个实例后不赋值或者不比较 "no-new-func": 0, //不允许使用new Function eqeqeq: ["off", "always"], //不可采用== camelcase: "off", //关闭不可采用驼峰 "no-useless-escape": "warn", //正则表达式转义问题 "one-var": [0, "always"], "prefer-const": 0, // 如果一个变量只有在声明时才被赋值一次，那么应该使用'const' "quote-props": 0, "bject-curly-spacing": 0, "no-prototype-builtins": 0, "object-curly-spacing": 0, "dot-notation": 0, "keyword-spacing": 0, quotes: ["error", "single"], "no-empty-character-class": 2, //正则表达式中不允许出现空的字符组 "no-extra-boolean-cast": 2, //不允许出现不必要的布尔值转换 "no-ex-assign": 2, //在try catch语句中不允许重新分配异常变量 "no-extra-semi": 2, //不允许出现不必要的分号 "no-func-assign": 2, //不允许重新分配函数声明 "no-dupe-args": 2, // 函数参数不能重复 "no-dupe-args": 2, // 函数参数不能重复no-duplicate-case": 2, // switch中的case标签不能重复 "space-before-function-paren": [2, { anonymous: "never", named: "never" }], "no-unreachable": 2, // 不能有无法执行的代码 "no-empty": 2, //不允许出现空的代码块 "no-var": 1, //禁用var，用let和const代替 "no-new-object": 0, "no-unused-vars": 0, "vue/no-unused-vars": 0, "no-trailing-spaces": 0, "eol-last": 0, "no-undef": 0, // 代码风格 "no-else-return": 2, // 如果if语句里面有return,后面不能跟else语句 "no-multi-spaces": 2, // 不能用多余的空格 "no-redeclare": [ 2, { // 禁止重复声明变量 builtinGlobals: true, }, ], "no-multiple-empty-lines": [ 1, { max: 2, }, ], //空行最多不能超过2行 "no-multi-str": 2, //字符串不能用\换行 "no-useless-escape": 0, //禁用不必要的转义字符; /* https://www.npmjs.com/package/eslint-plugin-promise */ "promise/always-return": 0, "promise/no-return-wrap": 0, //使用promise 时，强制使用标准参数命名： new Promise(function (resolve, reject) { ... }) "promise/param-names": "error", //promise，强制then、catch 一起出现 // "promise/catch-or-return": 1, "promise/no-native": 0, "promise/no-nesting": "warn", "promise/no-promise-in-callback": "warn", "promise/no-callback-in-promise": "warn", "promise/avoid-new": 0, "promise/no-new-statics": 0, "promise/no-return-in-finally": 0, "promise/valid-params": 0, }, }; ================================================ FILE: .gitignore ================================================ .DS_Store node_modules /dist .svn branches tags trunk test.html # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw* ================================================ FILE: .npmignore ================================================ .DS_Store node_modules build_package npm_package examples public /dist .svn .gitignore .travis.yml branches tags trunk test.html # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw* ================================================ FILE: .travis.yml ================================================ language: node_js node_js: - '10' install: - echo "install successed" os: - linux stages: - test - name: deploy jobs: include: - stage: test script: - node --version - npm --version - echo "Testing Started ..." - npm test - echo "Testing Finished." - stage: deploy script: - echo "NPM Deploying Started ..." - cd ../ - rm -rf vue-hash-calendar/ - git clone https://${GH_REF} - cd vue-hash-calendar - git branch - git checkout travis_build - git merge master - cd npm_package/ - npm version patch - cd ../build_package/ - npm version patch - cd ../ - npm install --registry=https://registry.npm.taobao.org - npm run lib - cp -f npm_package/package.json ./ - echo "NPM Building Finished." deploy: provider: npm email: t@tsy6.com api_key: '$NPM_TOKEN' # NPM_TOKEN 是在 Travis 中配置的 npm token 的名称 skip_cleanup: true on: all_branches: true after_script: - cp -f build_package/package.json ./ - ls - git config user.name "Travis" - git config user.email "t@tsy6.com" - git add . - git commit -m "Travis CI Auto Builder" - git status - git push "https://${GH_TOKEN}@${GH_REF}" travis_build:travis_build # GH_TOKEN 是在 Travis 中配置 github token 的名称 branches: only: - master env: global: - GH_REF: github.com/TangSY/vue-hash-calendar.git #github仓库地址 ================================================ FILE: CHANGELOG.md ================================================ ## [1.0.33](https://github.com/TangSY/vue-hash-calendar/compare/v1.0.5...v1.0.33) (2019-11-21) ### Bug Fixes - 修复日历切换导致高度不对的问题 ([cddef66](https://github.com/TangSY/vue-hash-calendar/commit/cddef6635663184f9d8330485ca90333569896a6)) - 禁用日期时，精确到日 ([a3bcc84](https://github.com/TangSY/vue-hash-calendar/commit/a3bcc843a91ebfe7065905c3e67350f883725099)) ### Features - travis 自动发布 npm 包 ([fe0d372](https://github.com/TangSY/vue-hash-calendar/commit/fe0d3726c1f7a5e57dc17487444fd9457f12776d)) - 修改版本号 ([f96e26a](https://github.com/TangSY/vue-hash-calendar/commit/f96e26a9de90dc9ae9f8c92bc6489233ebdaf8c0)) - 新增标记按颜色分组的功能 ([43ec197](https://github.com/TangSY/vue-hash-calendar/commit/43ec197937cece8c1680796dc21a8778f0e6b960)) - 更新 npmignore ([59814ef](https://github.com/TangSY/vue-hash-calendar/commit/59814ef2426dff4acfa5c289fbaccbde0f28a72e)) - 更新项目目录结构 ([eff67b9](https://github.com/TangSY/vue-hash-calendar/commit/eff67b9f6efa35b63629636e42b479d330ea2b28)) ## [1.0.5](https://github.com/TangSY/vue-hash-calendar/compare/v1.0.4...v1.0.5) (2019-09-01) ## [1.0.4](https://github.com/TangSY/vue-hash-calendar/compare/decfd30b724970d1fef8736cf7990478ee118890...v1.0.4) (2019-09-01) ### Bug Fixes - 修复 IOS 滑动失效的问题 ([65ecb60](https://github.com/TangSY/vue-hash-calendar/commit/65ecb60db85308abeef71c96c5461bd3936742ac)) - 修复切换周时，有时选中效果失效的问题 ([afff9fa](https://github.com/TangSY/vue-hash-calendar/commit/afff9fad9d6fad530fe55416b9d2b5e423ef7a85)) - 修复点击 今天 无效的 BUG ([decfd30](https://github.com/TangSY/vue-hash-calendar/commit/decfd30b724970d1fef8736cf7990478ee118890)) - 默认日期改成当前时间 ([43b6dba](https://github.com/TangSY/vue-hash-calendar/commit/43b6dbafd68979f8f495fa8406090833287a3564)) ### Features - 增加 在周模式中，左右滑动切换上一周/下一周的功能 ([eb00f4b](https://github.com/TangSY/vue-hash-calendar/commit/eb00f4b3fa8f9a1b73145e8a41bd91ff6e5f35df)) - 增加上下滑动，切换周/月模式 ([a5a65d3](https://github.com/TangSY/vue-hash-calendar/commit/a5a65d361a939c0468c734b19c7e93f2b2498b9a)) - 添加切换周动画 ([09af0b2](https://github.com/TangSY/vue-hash-calendar/commit/09af0b28cebeb350c70629e9e8c34880d8ab365d)) - 调试 IOS 滑动 ([f60f430](https://github.com/TangSY/vue-hash-calendar/commit/f60f430c81b53aff0f5b51843712d10f22b71ad8)) ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2020 TangSY Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README-en_US.md ================================================ [![Build Status](https://travis-ci.com/TangSY/vue-hash-calendar.svg?branch=master)](https://travis-ci.com/TangSY/vue-hash-calendar) [![version](https://img.shields.io/npm/v/vue-hash-calendar.svg)](https://www.npmjs.com/package/vue-hash-calendar) [![download](https://img.shields.io/npm/dt/vue-hash-calendar.svg)](https://www.npmjs.com/package/vue-hash-calendar) ![visitors](https://visitor-badge.glitch.me/badge?page_id=vue-hash-calendar) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![author](https://img.shields.io/badge/author-HashTang-orange.svg)](https://www.hxkj.vip) [简体中文](https://github.com/TangSY/vue-hash-calendar/blob/master/README-zh_CN.md) | English ## Using Effects ![calendar.gif](https://www.hxkj.vip/demo/calendar/calendar.gif?from=hxkj) ![dot.gif](https://www.hxkj.vip/demo/calendar/dot.gif?from=hxkj) ![week.gif](https://www.hxkj.vip/demo/calendar/week.gif?from=hxkj) ![yearmonth.gif](https://www.hxkj.vip/demo/calendar/yearmonth.gif?from=hxkj) The same calendar for React：[https://github.com/TangSY/react-hash-calendar](https://github.com/TangSY/react-hash-calendar) ## vue-hash-calendar - Calendar component based on Vue 2. X - Support gesture sliding operation - Slide up and down to switch weekly / monthly mode > [week mode] slide left and right to switch the previous week / next week > [month mode] slide left and right to switch the previous month / next month ## Install [![vue-hash-calendar](https://nodei.co/npm/vue-hash-calendar.png)](https://npmjs.org/package/vue-hash-calendar) ## Usage ``` npm i -S vue-hash-calendar // entry （main.js） import vueHashCalendar from 'vue-hash-calendar' // import CSS styles import 'vue-hash-calendar/lib/vue-hash-calendar.css' // use component Vue.use(vueHashCalendar) ``` ``` // using in vue files ``` ### Import by CDN ``` // add this in index.html js CDN：https://cdn.jsdelivr.net/npm/vue-hash-calendar@{version}/lib/vue-hash-calendar.umd.min.js css CDN: https://cdn.jsdelivr.net/npm/vue-hash-calendar@{version}/lib/vue-hash-calendar.css // add this to webpack config externals: { 'vue-hash-calendar': 'VueHashCalendar' }, ``` ## Demo ![demo_qrcode.png](https://www.hxkj.vip/demo/calendar/demo.webp) online demo：[https://www.hxkj.vip/demo/calendar/](https://www.hxkj.vip/demo/calendar/) - 🎉 can you give me a star? 🎉 ### github link: [https://github.com/TangSY/vue-hash-calendar](https://github.com/TangSY/vue-hash-calendar) ## API | name | describle | type | default | reuqire | | :-------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | :-----: | | visible | To control the display or hide of calendar components, use the '. Sync' modifier | Boolean | false | false | | scrollChangeDate | Controls whether the selected date is modified when sliding | Boolean | true | false | | model | What form is the calendar component displayed. Inline: the way to inline. Dialog: pop up mode | String | inline | false | | defaultDatetime | -- | Date | currentDate | false | | minDate | The minimum date range of the calendar. After setting, you can only slide the calendar within this range | Date | -- | false | | maxDate | The maximum date range of the calendar. After setting, you can only slide the calendar within this range | Date | -- | false | | format | The date format returned by the callback event when confirming the date. eg: "YY / mm / DD HH: mm" , "MM DD,YY at hh:mm F" | String | YY/MM/DD hh:mm | false | | weekStart | Use the day of the week as the starting week of each week in the calendar. choose: 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday' | String | sunday | false | | pickerType | Selector Type. choose: 'datetime', 'date', 'time' | String | datetime | false | | showTodayButton | -- | Boolean | true | false | | isShowWeekView | -- | Boolean | false | false | | isShowArrow | -- | Boolean | false | false | | isShowAction | -- | Boolean | true | false | | isShowNotCurrentMonthDay | -- | Boolean | true | false | | isAutoChangeMonth | -- | Boolean | true | false | | disabledWeekView | -- | Boolean | false | false | | disabledDate | Set the disabled status of the date (returned true to disabled) | (date) => Boolean | --- | false | | disabledTime | Set the disabled status of the time (returned true to disabled) | (date) => Boolean | --- | false | | disabledScroll | Set the no sliding direction of the calendar. choose: 'left', 'right', 'up', 'down', 'horizontal', 'vertical', true, false] | Boolean, String | false | false | | markDate | he date to be marked can be grouped according to different colors and mark types (no grouped, the default is blue). eg：[{color: 'red',date: ['2019/02/25']},{color: 'blue',type: 'dot',date: ['2019/01/20']},'2019/03/20'] | Array | [] | false | | markType | Mark pattern type. choose: 'dot', 'circle', 'dot+circle' | String | dot | false | | minuteStep | -- | Number | 1 | false | | lang | Language. choose: 'CN', 'EN' | String | CN | false | | changeYearFast | Set is can fast change year | Boolean | false | false | | themeColor | change the theme color. | { 'main-color': string; 'bg-color': string; 'main-font-color': string; 'vice-font-color': string; 'disabled-bg-color': string; 'disabled-font-color': string;} | --- | false | | disabledClassName | -- | String | --- | false | | notCurrentMonthDayClassName | -- | String | --- | false | | checkedDayClassName | -- | String | --- | false | | todayClassName | -- | String | --- | false | | firstDayOfMonthClassName | -- | String | --- | false | ## Events | name | describle | params | | :----------------- | :------------------------------------------------------------------------ | :------------ | | change | -- | { date } | | confirm | -- | { date } | | click | -- | { date } | | touchstart | -- | { event } | | touchmove | -- | { event } | | touchend | -- | { event } | | slidechange | This event is triggered when the direction of the calendar slide changes. | { direction } | | calendarTypeChange | -- | { type } | ## Slots | name | describle | params | | :------ | :--------------------------------------------- | :----------------------------------------------------------------------------------------------------------- | | day | Customize date content and style | { date, extendAttr: { isMarked, isDisabledDate, isToday, isChecked, isCurrentMonthDay, isFirstDayOfMonth } } | | week | Customize week content and style | { week } | | arrow | Customize arrow content and style | { isShow } | | today | Customize today button content and style | -- | | confirm | Customize dconfirmate button content and style | -- | | action | Customize action content and style | -- | # Methods | name | desc | version | | :-------- | :--- | :------ | | lastMonth | -- | 1.3.20 | | nextMonth | -- | 1.3.20 | | lastWeek | -- | 1.3.20 | | nextWeek | -- | 1.3.20 | | today | -- | 1.3.20 | ### Changelog [changelog](https://github.com/TangSY/vue-hash-calendar/blob/travis_build/CHANGELOG.md) ### Other - How to show calendar? ``` this.isShowCalendar = true; ``` - How to show English formater？ `MM DD,YY at hh:mm F` ``` ``` - If you want to return a 12 hour date, how should the format attribute be written? Add `F` after the formatted string ``` ``` - day slot example ``` https://github.com/TangSY/vue-hash-calendar/blob/dev/examples/FirstDayDemo.vue ``` - How to disable date? ``` // For example, disable all dates after today /** vue files template **/ /** vue methods **/ disabledDate(date) { let timestamp = date.getTime(); if (timestamp > new Date().getTime()) { return true } return false } ``` - How to disable time? ``` // For example, disable all time after now /** vue files template **/ /** vue methods **/ disabledTime(date) { // 禁用的时间 let hours = date.getHours() let minute = date.getMinutes() let hoursNow = new Date().getHours() let minuteNow = new Date().getMinutes() if (hours < hoursNow || (hours === hoursNow && minute < minuteNow)) { return true } return false } ``` - If there are other problems or incompatible functions. Can communicate by email 't@tsy6.com', or GitHub submits the issue. ### Sponsor ![pay.jpg](https://www.hxkj.vip/demo/calendar/pay.jpg) ================================================ FILE: README.md ================================================ [![Build Status](https://travis-ci.com/TangSY/vue-hash-calendar.svg?branch=master&from=hxkj)](https://travis-ci.com/TangSY/vue-hash-calendar) [![version](https://img.shields.io/npm/v/vue-hash-calendar.svg?from=hxkj)](https://www.npmjs.com/package/vue-hash-calendar) [![download](https://img.shields.io/npm/dt/vue-hash-calendar.svg?from=hxkj)](https://www.npmjs.com/package/vue-hash-calendar) ![visitors](https://visitor-badge.glitch.me/badge?page_id=vue-hash-calendar) ![license](https://img.shields.io/badge/license-MIT-blue.svg?from=hxkj) [![author](https://img.shields.io/badge/author-HashTang-orange.svg?from=hxkj)](https://www.hxkj.vip) 简体中文 | [English](https://github.com/TangSY/vue-hash-calendar/blob/master/README-en_US.md) # 按照惯例，先上效果图 ![calendar.gif](https://www.hxkj.vip/demo/calendar/calendar.gif?from=hxkj) ![dot.gif](https://www.hxkj.vip/demo/calendar/dot.gif?from=hxkj) ![week.gif](https://www.hxkj.vip/demo/calendar/week.gif?from=hxkj) ![yearmonth.gif](https://www.hxkj.vip/demo/calendar/yearmonth.gif?from=hxkj) # Demo ![demo_qrcode.png](https://www.hxkj.vip/demo/calendar/demo.webp) 或者请用浏览器的手机模式查看：[https://www.hxkj.vip/demo/calendar/](https://www.hxkj.vip/demo/calendar/) - 🎉 觉得好用可以给一个 star 哦~~ 🎉 ## 仓库地址 - github：[https://github.com/TangSY/vue-hash-calendar](https://github.com/TangSY/vue-hash-calendar) - 码云 gitee：[https://gitee.com/HashTang/vue-hash-calendar](https://gitee.com/HashTang/vue-hash-calendar) ## 其他版本 - vue 3.x 版本：[https://github.com/TangSY/vue3-hash-calendar](https://github.com/TangSY/vue3-hash-calendar) - react 版本：[https://github.com/TangSY/react-hash-calendar](https://github.com/TangSY/react-hash-calendar) # vue-hash-calendar - 基于 vue 2.X 开发的日历组件 - 支持手势滑动操作 - 原生 js 开发，没引入第三方库 - 支持快速切换年份和月份 - 上下滑动 切换 周/月 模式 > 【周模式中】 左右滑动可切换 上一周/下一周 > 【月模式中】 左右滑动可切换 上一月/下一月 # 安装使用说明 [![vue-hash-calendar](https://nodei.co/npm/vue-hash-calendar.png?from=hxkj)](https://npmjs.org/package/vue-hash-calendar) ```js npm i -S vue-hash-calendar // 在入口文件中（main.js），导入组件库 import vueHashCalendar from 'vue-hash-calendar' // 引入组件CSS样式 import 'vue-hash-calendar/lib/vue-hash-calendar.css' // 注册组件库 Vue.use(vueHashCalendar) ``` ```js // 在VUE文件中引入组件 ``` ## CDN 方式引入 ```js //在 index.html 加入以下两个 CDN 链接： js CDN：https://cdn.jsdelivr.net/npm/vue-hash-calendar@{version}/lib/vue-hash-calendar.umd.min.js css CDN: https://cdn.jsdelivr.net/npm/vue-hash-calendar@{version}/lib/vue-hash-calendar.css //然后在 webpack 配置中，加入以下配置。 externals: { 'vue-hash-calendar': 'VueHashCalendar' }, ``` # API | 属性 | 说明 | 类型 | 默认 | 是否必传 | | :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------: | :------: | | visible | 控制日历组件的显示或隐藏,需使用 `.sync` 修饰符 | Boolean | false | 否 | | scrollChangeDate | 控制滑动的时候是否修改选中的日期 | Boolean | true | 否 | | model | 日历组件以哪种形式展示。inline：内联的方式。dialog：弹窗的方式 | String | inline | 否 | | defaultDatetime | 指定默认时间。 | Date | 当前时间 | 否 | | minDate | 指定日历最小日期范围，设置之后只能在该范围内滑动日历。 | Date | -- | 否 | | maxDate | 指定日历最大日期范围，设置之后只能在该范围内滑动日历。 | Date | -- | 否 | | format | 确认日期时，回调事件返回的日期格式。如“YY/MM/DD hh:mm” 、“YY 年 MM 月第 DD 天，当前时间 hh 时 mm 分”、“MM DD,YY at hh:mm F” | String | YY/MM/DD hh:mm | 否 | | weekStart | 以星期几作为日历每一周的起始星期。可选['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] | String | sunday | 否 | | pickerType | 选择器类型 datetime：日期+时间 date：日期 time：时间 | String | datetime | 否 | | showTodayButton | 是否显示返回今日按钮 | Boolean | true | 否 | | isShowWeekView | 是否以周视图展示组件 | Boolean | false | 否 | | isShowArrow | 是否显示周月切换时的指示箭头（日历下方的小箭头），当 model 等于 inline 时生效 | Boolean | false | 否 | | isShowAction | 是否显示日历组件操作栏（标题栏） | Boolean | true | 否 | | isShowNotCurrentMonthDay | 是否展示日历中的非本月日期（灰色部分日期） | Boolean | true | 否 | | isAutoChangeMonth | 点击非本月日期是否自动切换月份 | Boolean | true | 否 | | disabledWeekView | 禁用周视图（设置为 true 后，无法上下滑动进行周/月切换） | Boolean | false | 否 | | disabledDate | 设置日期的禁用状态，参数为当前日期，要求返回 Boolean （禁用该日期需返回 true） | Function | --- | 否 | | disabledTime | 设置时间的禁用状态，参数为当前日期，要求返回 Boolean （禁用该时间需返回 true） | Function | --- | 否 | | disabledScroll | 设置日历的禁止滑动方向。可选['left', 'right', 'up', 'down', 'horizontal', 'vertical', true, false] 。可取其一控制单个方向，其中 `true` 和 `false` 控制所有方向。 | Boolean, String | false | 否 | | markDate | 需要被标记的日期，可按不同颜色不同标记类型分组标记（不分组默认蓝色）。如：[{color: 'red',date: ['2019/02/25']},{color: 'blue',type: 'dot',date: ['2019/01/20']},'2019/03/20'] | Array | [] | 否 | | markType | 标记图案类型 dot：小圆点（日期下方小圆点标记） circle：小圆圈（日期被小圆圈包围） dot+circle：同时使用小圆点与圆圈标记 | String | dot | 否 | | minuteStep | 间隔时间。（分钟的步长） | Number | 1 | 否 | | lang | 选择的语言版本。可选值:['CN', 'EN'] | String | CN | 否 | | changeYearFast | 是否支持点击操作栏（标题栏）的日期区域快速切换年份 | Boolean | false | 否 | | themeColor | 用于修改日历主题色 | { 'main-color': string; 'bg-color': string; 'main-font-color': string; 'vice-font-color': string; 'disabled-bg-color': string; 'disabled-font-color': string;} | --- | 否 | | disabledClassName | 日期被禁用时的 className。用于修改日期被禁用时的默认样式 | String | --- | 否 | | notCurrentMonthDayClassName | 非当前展示月份日期的 className(例如日历前面几天与后面几天灰色部分)。用于修改非当前展示月份日期的默认样式 | String | --- | 否 | | checkedDayClassName | 日期被选中时的 className。用于修改日期被选中时的默认样式 | String | --- | 否 | | todayClassName | 当天日期的 className。用于修改当天日期的默认样式 | String | --- | 否 | | firstDayOfMonthClassName | 每月第一天的 className。用于修改每月第一天的默认样式 | String | --- | 否 | # 事件 | 事件名称 | 说明 | 参数 | | :----------------- | :---------------------------------------------------------------------------------------- | :--------------------------------- | | change | 日期改变时，触发该事件。（返回的日期格式取决于 format 属性） | (date: 日期改变时，选中的日期) | | confirm | 点击确认按钮时，触发该事件，dialog 模式中才有该按钮。（返回的日期格式取决于 format 属性） | (date: 点击确认按钮时，选中的日期) | | click | 点击日期时，触发该事件。（返回的日期格式取决于 format 属性） | (date: 当前点击的日期) | | touchstart | 日历滑动 start 事件，同于原生该事件。 | （event: touch 事件） | | touchmove | 日历滑动 move 事件，同于原生该事件。 | （event: touch 事件） | | touchend | 日历滑动 end 事件，同于原生该事件。 | （event: touch 事件） | | slidechange | 日历滑动的方向。返回值：right、left、up、down 。 | （direction: 滑动的方向） | | calendarTypeChange | 日历展示类型切换时触发。返回值：time、week、date、month、year、yearRange 。 | （type: 日历展示面板类型） | # 插槽 Slot | name | 说明 | | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | day | 自定义日期内容。例如可用于添加农历之类的。配合自定义 className 使用，效果更佳！参数为 { date, extendAttr }，其中 extendAttr 参数包含 `isMarked`（该日期是否被标记）、`isDisabledDate`（该日期是否被禁用）、`isToday`（该日期是否为今天）、`isChecked`（该日期是否被选中）、`isCurrentMonthDay`（该日期是否为本月日期）、`isFirstDayOfMonth`（该日期是否为当月第一天），可用于一些特殊需求 | | week | 自定义星期内容。例如可用于自定义星期样式等等。参数为 { week } | | arrow | 自定义周月切换时的指示箭头。参数为 { show }，`show`: 类型为 Boolen，表示当前是否为周视图 | | today | 自定义 "今天" 按钮文字内容以及样式 | | confirm | 自定义 "确定" 按钮文字内容以及样式 | | action | 自定义操作栏（标题栏）内容以及样式 | # 方法 Method | 方法名称 | 说明 | 版本 | | :-------- | :------------------------------- | :----- | | lastMonth | 切换日历到上一月 | 1.3.20 | | nextMonth | 切换日历到下一月 | 1.3.20 | | lastWeek | 切换日历到上一周 | 1.3.20 | | nextWeek | 切换日历到下一周 | 1.3.20 | | today | 返回今日。当今日被禁用时，不生效 | 1.3.20 | ## Other - 如何添加农历/节假日？ ```js https://github.com/TangSY/vue-hash-calendar/blob/master/examples/lunar/LunarDemo.vue ``` - 在 dialog 模式中，如何显示日历组件？注意使用 `.sync` 修饰符 ```js //设置为true this.isShowCalendar = true; ``` - cdn 方式引入的组件，为什么有些属性不起作用？ ```js 在非 webpack 开发模式下，属性名称不能使用驼峰命名。例如：isShowAction 需要写成 is-show-action. ``` - 想要返回标准的英文格式日期，format 属性应该怎样写？ `MM DD,YY at hh:mm F` ```js ``` - 想要返回 12 小时制的日期，format 属性应该怎样写？ 在格式化字符串后面加上大写 `F` ```js ``` - 设置了 `disabledScroll="vertical"` 之后，滑动日历区域导致页面也无法滚动？使用 `disabledWeekView` 属性代替 ```js ``` - day slot 的基本用法 ```js https://github.com/TangSY/vue-hash-calendar/blob/dev/examples/FirstDayDemo.vue ``` - 能否通过外部的某个按钮来触发日历的展开和收起 ```js 可以在外部通过修改 isShowWeekView 的值来控制日历的收起与展开 ``` - 如何设置禁用日期？ 可参考源码中 `App.vue` 文件 ```js // 例如禁用今日之前的所有日期 /** vue模板文件 **/ /** vue methods 中的方法 **/ disabledDate(date) { let timestamp = date.getTime(); if (timestamp > new Date().getTime()) { return true } return false } ``` - 如何设置禁用日期？ 可参考源码中 `App.vue` 文件 ```js // 例如禁用现在之前的时间 /** vue模板文件 **/ /** vue methods 中的方法 **/ disabledTime(date) { // 禁用的时间 let hours = date.getHours() let minute = date.getMinutes() let hoursNow = new Date().getHours() let minuteNow = new Date().getMinutes() if (hours < hoursNow || (hours === hoursNow && minute < minuteNow)) { return true } return false } ``` - 如果有其他问题， 或者功能上不兼容的。可以邮件沟通 t@tsy6.com，或者 github 提交 issue。 ## 赞助 ![pay.jpg](https://www.hxkj.vip/demo/calendar/pay.jpg) ================================================ FILE: babel.config.js ================================================ module.exports = { presets: [ '@vue/app' ] } ================================================ FILE: build_package/package.json ================================================ { "name": "vue-hash-calendar", "version": "1.1.21", "author": "HashTang", "repository": { "type": "git", "url": "https://github.com/TangSY/vue-hash-calendar.git" }, "bugs": { "url": "https://github.com/TangSY/vue-hash-calendar/issues" }, "homepage": "https://www.hxkj.vip", "license": "MIT", "description": "vue 周 月 时间选择器", "main": "lib/vue-hash-calendar.umd.min.js", "keyword": "vue-hash-calendar calendar date-picker datetime-picker time-picker week-picker", "private": false, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test": "echo 'exited with 0'", "lib": "vue-cli-service build --target lib --name vue-hash-calendar --dest lib packages/index.js", "lint": "vue-cli-service lint" }, "dependencies": { "vue": "^2.5.17", "vue-ba": "^1.2.5" }, "devDependencies": { "@babel/preset-es2015": "^7.0.0-beta.51", "@vue/cli-plugin-babel": "^3.5.1", "@vue/cli-plugin-eslint": "^3.0.0-beta.15", "@vue/cli-service": "^3.0.0-beta.15", "babel-plugin-component": "^1.1.1", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "vue-template-compiler": "^2.5.16" }, "eslintConfig": { "root": false, "env": { "node": false }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] } ================================================ FILE: commitlint.config.js ================================================ module.exports = { extends: [ '@commitlint/config-conventional' ], rules: { /* upd：更新某功能（不是 feat, 不是 fix） feat：新功能（feature） fix：修补bug docs：文档（documentation） style： 格式（不影响代码运行的变动） refactor：重构（即不是新增功能，也不是修改bug的代码变动） test：增加测试 chore：构建过程或辅助工具的变动 栗子： git commit -m 'feat: 增加 xxx 功能' */ 'type-enum': [2, 'always', [ 'upd', 'feat', 'fix', 'refactor', 'docs', 'chore', 'style', 'revert' ]], 'type-case': [0], 'type-empty': [0], 'scope-empty': [0], 'scope-case': [0], 'subject-full-stop': [0, 'never'], 'subject-case': [0, 'never'], 'header-max-length': [0, 'always', 72] } } ================================================ FILE: examples/App.vue ================================================ /** * @Description: vue-hash-calendar 移动端日期、时间选择插件，日期选择面板以日历形式展示。支持上下滑动切换日期、时间 * @Author: TSY * @CreateDate: 2019/05/23 00:08 * @Email: t@tsy6.com */ ================================================ FILE: examples/FirstDayDemo.vue ================================================ /** * @Description: 通过 slot 实现将每个月的1号显示为1号，而不是类似【6月】 github issues：https://github.com/TangSY/vue-hash-calendar/issues/23 * @Author: TSY * @CreateDate: 2020/06/09 21:08 * @Email: t@tsy6.com */ ================================================ FILE: examples/Github.vue ================================================ /** * @Description: 右上角github入口 * @Author: TSY * @Email: t@tsy6.com * @CreateDate: 2019/5/9 23:18 */ ================================================ FILE: examples/SlotDemo.vue ================================================ /** * @Description: 通过 slot 实现被标注的日期下面进行备注功能 github issues：https://github.com/TangSY/vue-hash-calendar/issues/19 * @Author: TSY * @CreateDate: 2019/05/23 00:08 * @Email: t@tsy6.com */ ================================================ FILE: examples/TouchDemo.vue ================================================ /** * @Description: 滑动事件监听demo * @Author: TSY * @Email: t@tsy6.com * @CreateDate: 2019/11/30 13:29 */ ================================================ FILE: examples/lunar/LunarDemo.vue ================================================ ================================================ FILE: examples/lunar/lunar.js ================================================ export const lunar = { /** * 农历1900-2100的润大小信息表 * @Array Of Property * @return Hex */ lunarInfo: [ 0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929 0x06566, 0x0d4a0, 0x0ea50, 0x16a95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999 0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029 0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049 /** Add By JJonline@JJonline.Cn**/ 0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059 0x092e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069 0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079 0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089 0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099 0x0d520 ], // 2100 /** * 公历每个月份的天数普通表 * @Array Of Property * @return Number */ solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], /** * 天干地支之天干速查表 * @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"] * @return Cn string */ Gan: [ '\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678' ], /** * 天干地支之地支速查表 * @Array Of Property * @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"] * @return Cn string */ Zhi: [ '\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5' ], /** * 天干地支之地支速查表<=>生肖 * @Array Of Property * @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"] * @return Cn string */ Animals: [ '\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a' ], /** * 阳历节日 */ festival: { '1-1': { title: '元旦节' }, '2-14': { title: '情人节' }, '5-1': { title: '劳动节' }, '5-4': { title: '青年节' }, '6-1': { title: '儿童节' }, '9-10': { title: '教师节' }, '10-1': { title: '国庆节' }, '12-25': { title: '圣诞节' }, '3-8': { title: '妇女节' }, '3-12': { title: '植树节' }, '4-1': { title: '愚人节' }, '5-12': { title: '护士节' }, '7-1': { title: '建党节' }, '8-1': { title: '建军节' }, '12-24': { title: '平安夜' } }, /** * 农历节日 */ lFestival: { '12-30': { title: '除夕' }, '1-1': { title: '春节' }, '1-15': { title: '元宵节' }, '2-2': { title: '龙抬头' }, '5-5': { title: '端午节' }, '7-7': { title: '七夕节' }, '7-15': { title: '中元节' }, '8-15': { title: '中秋节' }, '9-9': { title: '重阳节' }, '10-1': { title: '寒衣节' }, '10-15': { title: '下元节' }, '12-8': { title: '腊八节' }, '12-23': { title: '北方小年' }, '12-24': { title: '南方小年' } }, /** * 返回默认定义的阳历节日 */ getFestival() { return this.festival }, /** * 返回默认定义的内容里节日 */ getLunarFestival() { return this.lFestival }, /** * * @param param {Object} 按照festival的格式输入数据，设置阳历节日 */ setFestival(param = {}) { this.festival = param }, /** * * @param param {Object} 按照lFestival的格式输入数据，设置农历节日 */ setLunarFestival(param = {}) { this.lFestival = param }, /** * 24节气速查表 * @Array Of Property * @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"] * @return Cn string */ solarTerm: [ '\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3' ], /** * 1900-2100各年的24节气日期速查表 * @Array Of Property * @return 0x string For splice */ sTermInfo: [ '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e', '97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd', '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722' ], /** * 数字转中文速查表 * @Array Of Property * @trans ['日','一','二','三','四','五','六','七','八','九','十'] * @return Cn string */ nStr1: [ '\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341' ], /** * 日期转农历称呼速查表 * @Array Of Property * @trans ['初','十','廿','卅'] * @return Cn string */ nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'], /** * 月份转农历称呼速查表 * @Array Of Property * @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊'] * @return Cn string */ nStr3: [ '\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a' ], /** * 返回农历y年一整年的总天数 * @param y lunar Year * @return Number * @eg:var count = calendar.lYearDays(1987) ;//count=387 */ lYearDays: function(y) { let i, sum = 348 for (i = 0x8000; i > 0x8; i >>= 1) { sum += this.lunarInfo[y - 1900] & i ? 1 : 0 } return sum + this.leapDays(y) }, /** * 返回农历y年闰月是哪个月；若y年没有闰月 则返回0 * @param y lunar Year * @return Number (0-12) * @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6 */ leapMonth: function(y) { // 闰字编码 \u95f0 return this.lunarInfo[y - 1900] & 0xf }, /** * 返回农历y年闰月的天数 若该年没有闰月则返回0 * @param y lunar Year * @return Number (0、29、30) * @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29 */ leapDays: function(y) { if (this.leapMonth(y)) { return this.lunarInfo[y - 1900] & 0x10000 ? 30 : 29 } return 0 }, /** * 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法 * @param y lunar Year * @param m lunar Month * @return Number (-1、29、30) * @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29 */ monthDays: function(y, m) { if (m > 12 || m < 1) { return -1 } // 月份参数从1至12，参数错误返回-1 return this.lunarInfo[y - 1900] & (0x10000 >> m) ? 30 : 29 }, /** * 返回公历(!)y年m月的天数 * @param y solar Year * @param m solar Month * @return Number (-1、28、29、30、31) * @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30 */ solarDays: function(y, m) { if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1 const ms = m - 1 if (ms === 1) { // 2月份的闰平规律测算后确认返回28或29 return (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0 ? 29 : 28 } return this.solarMonth[ms] }, /** * 农历年份转换为干支纪年 * @param lYear 农历年的年份数 * @return Cn string */ toGanZhiYear: function(lYear) { let ganKey = (lYear - 3) % 10 let zhiKey = (lYear - 3) % 12 if (ganKey === 0) ganKey = 10 // 如果余数为0则为最后一个天干 if (zhiKey === 0) zhiKey = 12 // 如果余数为0则为最后一个地支 return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1] }, /** * 公历月、日判断所属星座 * @param cMonth [description] * @param cDay [description] * @return Cn string */ toAstro: function(cMonth, cDay) { const s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf' const arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22] return ( s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7' ) // 座 }, /** * 传入offset偏移量返回干支 * @param offset 相对甲子的偏移量 * @return Cn string */ toGanZhi: function(offset) { return this.Gan[offset % 10] + this.Zhi[offset % 12] }, /** * 传入公历(!)y年获得该年第n个节气的公历日期 * @param y y公历年(1900-2100) * @param n n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起 * @return day Number * @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春 */ getTerm: function(y, n) { if (y < 1900 || y > 2100 || n < 1 || n > 24) { return -1 } const _table = this.sTermInfo[y - 1900] const _calcDay = [] for (let index = 0; index < _table.length; index += 5) { const chunk = parseInt('0x' + _table.substr(index, 5)).toString() _calcDay.push(chunk[0], chunk.substr(1, 2), chunk[3], chunk.substr(4, 2)) } return parseInt(_calcDay[n - 1]) }, /** * 传入农历数字月份返回汉语通俗表示法 * @param m lunar month * @return Cn string * @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月' */ toChinaMonth: function(m) { // 月 => \u6708 if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1 let s = this.nStr3[m - 1] s += '\u6708' // 加上月字 return s }, /** * 传入农历日期数字返回汉字表示法 * @param d lunar day * @return Cn string * @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一' */ toChinaDay: function(d) { // 日 => \u65e5 let s switch (d) { case 10: s = '\u521d\u5341' break case 20: s = '\u4e8c\u5341' break case 30: s = '\u4e09\u5341' break default: s = this.nStr2[Math.floor(d / 10)] s += this.nStr1[d % 10] } return s }, /** * 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春” * @param y year * @return Cn string * @eg:var animal = calendar.getAnimal(1987) ;//animal='兔' */ getAnimal: function(y) { return this.Animals[(y - 4) % 12] }, /** * 传入阳历年月日获得详细的公历、农历object信息 <=>JSON * !important! 公历参数区间1900.1.31~2100.12.31 * @param yPara solar year * @param mPara solar month * @param dPara solar day * @return JSON object * @eg:console.log(calendar.solar2lunar(1987,11,01)); */ solar2lunar: function(yPara, mPara, dPara) { let y = parseInt(yPara) let m = parseInt(mPara) let d = parseInt(dPara) // 年份限定、上限 if (y < 1900 || y > 2100) { return -1 // undefined转换为数字变为NaN } // 公历传参最下限 if (y === 1900 && m === 1 && d < 31) { return -1 } // 未传参 获得当天 let objDate if (!y) { objDate = new Date() } else { objDate = new Date(y, parseInt(m) - 1, d) } let i, leap = 0, temp = 0 // 修正ymd参数 y = objDate.getFullYear() m = objDate.getMonth() + 1 d = objDate.getDate() let offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000 for (i = 1900; i < 2101 && offset > 0; i++) { temp = this.lYearDays(i) offset -= temp } if (offset < 0) { offset += temp i-- } // 是否今天 let isTodayObj = new Date(), isToday = false if ( isTodayObj.getFullYear() === y && isTodayObj.getMonth() + 1 === m && isTodayObj.getDate() === d ) { isToday = true } // 星期几 let nWeek = objDate.getDay(), cWeek = this.nStr1[nWeek] // 数字表示周几顺应天朝周一开始的惯例 if (nWeek === 0) { nWeek = 7 } // 农历年 const year = i leap = this.leapMonth(i) // 闰哪个月 let isLeap = false // 效验闰月 for (i = 1; i < 13 && offset > 0; i++) { // 闰月 if (leap > 0 && i === leap + 1 && isLeap === false) { --i isLeap = true temp = this.leapDays(year) // 计算农历闰月天数 } else { temp = this.monthDays(year, i) // 计算农历普通月天数 } // 解除闰月 if (isLeap === true && i === leap + 1) { isLeap = false } offset -= temp } // 闰月导致数组下标重叠取反 if (offset === 0 && leap > 0 && i === leap + 1) { if (isLeap) { isLeap = false } else { isLeap = true --i } } if (offset < 0) { offset += temp --i } // 农历月 const month = i // 农历日 const day = offset + 1 // 天干地支处理 const sm = m - 1 const gzY = this.toGanZhiYear(year) // 当月的两个节气 // bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year` const firstNode = this.getTerm(y, m * 2 - 1) // 返回当月「节」为几日开始 const secondNode = this.getTerm(y, m * 2) // 返回当月「节」为几日开始 // 依据12节气修正干支月 let gzM = this.toGanZhi((y - 1900) * 12 + m + 11) if (d >= firstNode) { gzM = this.toGanZhi((y - 1900) * 12 + m + 12) } // 传入的日期的节气与否 let isTerm = false let Term = null if (firstNode === d) { isTerm = true Term = this.solarTerm[m * 2 - 2] } if (secondNode === d) { isTerm = true Term = this.solarTerm[m * 2 - 1] } // 日柱 当月一日与 1900/1/1 相差天数 const dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10 const gzD = this.toGanZhi(dayCyclical + d - 1) // 该日期所属的星座 const astro = this.toAstro(m, d) const solarDate = y + '-' + m + '-' + d const lunarDate = year + '-' + month + '-' + day const festival = this.festival const lFestival = this.lFestival const festivalDate = m + '-' + d let lunarFestivalDate = month + '-' + day // bugfix https://github.com/jjonline/calendar.js/issues/29 // 农历节日修正：农历12月小月则29号除夕，大月则30号除夕 // 此处取巧修正：当前为农历12月29号时增加一次判断并且把lunarFestivalDate设置为12-30以正确取得除夕 // 天朝农历节日遇闰月过前不过后的原则，此处取农历12月天数不考虑闰月 // 农历润12月在本工具支持的200年区间内仅1574年出现 if (month === 12 && day === 29 && this.monthDays(year, month) === 29) { lunarFestivalDate = '12-30' } return { date: solarDate, lunarDate: lunarDate, festival: festival[festivalDate] ? festival[festivalDate].title : null, lunarFestival: lFestival[lunarFestivalDate] ? lFestival[lunarFestivalDate].title : null, lYear: year, lMonth: month, lDay: day, Animal: this.getAnimal(year), IMonthCn: (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), IDayCn: this.toChinaDay(day), cYear: y, cMonth: m, cDay: d, gzYear: gzY, gzMonth: gzM, gzDay: gzD, isToday: isToday, isLeap: isLeap, nWeek: nWeek, ncWeek: '\u661f\u671f' + cWeek, isTerm: isTerm, Term: Term, astro: astro } }, /** * 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON * !important! 参数区间1900.1.31~2100.12.1 * @param y lunar year * @param m lunar month * @param d lunar day * @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可] * @return JSON object * @eg:console.log(calendar.lunar2solar(1987,9,10)); */ lunar2solar: function(y, m, d, isLeapMonth) { y = parseInt(y) m = parseInt(m) d = parseInt(d) isLeapMonth = !!isLeapMonth const leapOffset = 0 const leapMonth = this.leapMonth(y) const leapDay = this.leapDays(y) if (isLeapMonth && leapMonth !== m) { return -1 } // 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同 if ( (y === 2100 && m === 12 && d > 1) || (y === 1900 && m === 1 && d < 31) ) { return -1 } // 超出了最大极限值 const day = this.monthDays(y, m) let _day = day // bugFix 2016-9-25 // if month is leap, _day use leapDays method if (isLeapMonth) { _day = this.leapDays(y, m) } if (y < 1900 || y > 2100 || d > _day) { return -1 } // 参数合法性效验 // 计算农历的时间差 let offset = 0 let i for (i = 1900; i < y; i++) { offset += this.lYearDays(i) } let leap = 0, isAdd = false for (i = 1; i < m; i++) { leap = this.leapMonth(y) if (!isAdd) { // 处理闰月 if (leap <= i && leap > 0) { offset += this.leapDays(y) isAdd = true } } offset += this.monthDays(y, i) } // 转换闰月农历 需补充该年闰月的前一个月的时差 if (isLeapMonth) { offset += day } // 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点) const strap = Date.UTC(1900, 1, 30, 0, 0, 0) const calObj = new Date((offset + d - 31) * 86400000 + strap) const cY = calObj.getUTCFullYear() const cM = calObj.getUTCMonth() + 1 const cD = calObj.getUTCDate() return this.solar2lunar(cY, cM, cD) } } ================================================ FILE: examples/main.js ================================================ import Vue from 'vue' import App from './App.vue' // 导入组件库 import vueHashCalendar from '../packages/index' // 引入百度统计插件 import ba from 'vue-ba' // 注册组件库 Vue.use(vueHashCalendar) Vue.config.productionTip = false Vue.use(ba, 'b0668f30d62e1597bdb36d05edea8960') Vue.config.productionTip = false new Vue({ render: (h) => h(App) }).$mount('#app') ================================================ FILE: examples/style/common.css ================================================ /** * @Description: * @Author: TSY * @CreateDate: 2018/6/9 13:28 */ .click_item:active { background: #eee; } .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; } .pulldown-wrapper { top: -150px; } .iconfont { font-size: 34px; font-size: 4.533333333333333vw; } ================================================ FILE: examples/style/common.styl ================================================ /** * @Description: * @Author: TSY * @CreateDate: 2018/6/9 13:28 */ //设计稿尺寸 designSize = 750px // 页面主色 main-color = #1c71fb //页面背景色 bg-color = #f4f4f4 //主文字颜色 main-font-color = #4c4c4c //副文字颜色 vice-font-color = #898989 //绿色 green-color = #00cb69 //红色 red-color = #f80f30 //橙色 orange-color = #FF7800 // 1px 实线边框 solidBorder(color = bg-color) { border 1px solid color } borderBottom(color = bg-color) { border-bottom 1px solid color } borderTop(color = bg-color) { border-top 1px solid color } borderLeft(color = bg-color) { border-left 1px solid color } borderRight(color = bg-color) { border-right 1px solid color } bottomLine(color = bg-color) { border-bottom px2vw(16px) solid color } topLine(color = bg-color) { border-top px2vw(16px) solid color } //浏览器私有前缀属性扩展 vendor(prop, args) { -webkit-{prop} args -moz-{prop} args {prop} args } //文字溢出显示省略号 textOverflow() { overflow hidden text-overflow ellipsis white-space nowrap } //px转vw px2vw(size) { return (size /designSize * 100) vw } fontSize(size, isMoblie = true) if isMobile font-size size font-size px2vw(size) else font-size size paddingAround() { padding px2vw(30px) px2vw(34px) } paddingSmall() { padding px2vw(16px) px2vw(34px) } fixedTop() { position: fixed width 100% top 0 left 0 z-index 2 } fixedBottom() { position: fixed width 100% bottom 0 left 0 z-index 2 } flexAlign(align = center) { display flex align-items align } flexContent(align = center, justify = center) { display flex align-items align justify-content justify } flexBetween(align = center) { display flex align-items align justify-content space-between } flexAround(align = center) { display flex align-items align justify-content space-around } .click_item:active { background: #eee; } .mask { position fixed top 0 left 0 width 100% height 100% background rgba(0,0,0,0.5) z-index 999 } .pulldown-wrapper { top: -150px; } .iconfont { fontSize(34px) } ================================================ FILE: examples/style/reset.css ================================================ /** * @Description: * @Author: TSY * @CreateDate: 2018/6/9 13:28 */ html, body { width: 100%; border: 0; font-family: "Helvetica-Neue", "Helvetica", Arial, sans-serif; margin: 0; padding: 0; overflow-x: hidden; font-size: 4vw; background: #fff; color: #191919; } div, span, object, iframe, img, table, caption, thead, tbody, tfoot, tr, td, article, aside, canvas, details, figure, hgroup, menu, nav, footer, header, section, summary, mark, audio, video { border: 0; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cit, code, del, dfn, em, ins, q, samp, small, strong, sub, sup, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, legend, label { border: 0; vertical-align: baseline; margin: 0; padding: 0; } article, aside, canvas, figure, figure img, figcaption, hgroup, footer, header, nav, section, audio, video { display: inline-block; } table { border-collapse: separate; border-spacing: 0; } table caption, table th, table td { text-align: left; vertical-align: middle; } li { list-style: none; } a { text-decoration: none; outline: none; display: inline-block; } a img { border: 0; } img { width: 100%; } :focus { outline: 0; } * { box-sizing: border-box; } textarea { resize: none; appearance: none; font-size: 4vw; } input { appearance: none; -webkit-appearance: none; font-size: 4vw; } select { appearance: none; background-color: #fff; font-size: 4vw; } button { border: none; font-size: 4vw; } p, span { letter-spacing: 1px; } .mescroll-totop-self { bottom: 50px !important; } .mint-indicator-wrapper { z-index: 99; } ================================================ FILE: examples/style/reset.styl ================================================ /** * @Description: * @Author: TSY * @CreateDate: 2018/6/9 13:28 */ html, body { width: 100%; border: 0; font-family: "Helvetica-Neue", "Helvetica", Arial, sans-serif; margin: 0; padding: 0; overflow-x: hidden; font-size: 4vw; background: #fff; color: #191919 } div, span, object, iframe, img, table, caption, thead, tbody, tfoot, tr, tr, td, article, aside, canvas, details, figure, hgroup, menu, nav, footer, header, section, summary, mark, audio, video { border: 0; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cit, code, del, dfn, em, ins, q, samp, small, strong, sub, sup, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, legend, label { border: 0; vertical-align: baseline; margin: 0; padding: 0; } article, aside, canvas, figure, figure img, figcaption, hgroup, footer, header, nav, section, audio, video { display: inline-block; } table { border-collapse: separate; border-spacing: 0; caption, th, td { text-align: left; vertical-align: middle; } } li { list-style: none; } a { text-decoration: none; outline: none; display: inline-block; } a img { border: 0; } img { width: 100% } :focus { outline: 0; } * { box-sizing: border-box; } textarea { resize: none; appearance: none; font-size: 4vw; } input { appearance: none; -webkit-appearance: none; font-size: 4vw; } select { appearance: none; background-color: #fff; font-size: 4vw; } button { border: none; font-size: 4vw; } p, span { letter-spacing: 1px; } .mescroll-totop-self { bottom: 50px !important; } .mint-indicator-wrapper { z-index: 99; } ================================================ FILE: npm_package/package.json ================================================ { "name": "vue-hash-calendar", "version": "1.1.21", "author": "HashTang", "repository": { "type": "git", "url": "https://github.com/TangSY/vue-hash-calendar.git" }, "bugs": { "url": "https://github.com/TangSY/vue-hash-calendar/issues" }, "homepage": "https://www.hxkj.vip", "license": "MIT", "description": "vue 周 月 时间选择器", "main": "lib/vue-hash-calendar.umd.min.js", "keyword": "vue-hash-calendar calendar date-picker datetime-picker time-picker week-picker", "private": false, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test": "echo 'exited with 0'", "lib": "vue-cli-service build --target lib --name vue-hash-calendar --dest lib packages/index.js", "lint": "vue-cli-service lint" }, "dependencies": { "vue": "^2.5.17" }, "devDependencies": { "@babel/preset-es2015": "^7.0.0-beta.51", "@vue/cli-plugin-babel": "^3.5.1", "@vue/cli-plugin-eslint": "^3.0.0-beta.15", "@vue/cli-service": "^3.0.0-beta.15", "babel-plugin-component": "^1.1.1", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "vue-template-compiler": "^2.5.16" }, "eslintConfig": { "root": false, "env": { "node": false }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] } ================================================ FILE: package.json ================================================ { "name": "vue-hash-calendar", "version": "1.1.21", "author": "HashTang", "repository": { "type": "git", "url": "https://github.com/TangSY/vue-hash-calendar.git" }, "bugs": { "url": "https://github.com/TangSY/vue-hash-calendar/issues" }, "homepage": "https://www.hxkj.vip", "license": "MIT", "description": "vue 周 月 时间选择器", "main": "lib/vue-hash-calendar.umd.min.js", "keyword": "vue-hash-calendar calendar date-picker datetime-picker time-picker week-picker", "private": false, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test": "echo 'exited with 0'", "lib": "vue-cli-service build --target lib --name vue-hash-calendar --dest lib packages/index.js", "commitmsg": "commitlint -e $GIT_PARAMS", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -w -r 1", "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore ." }, "dependencies": { "vue": "^2.5.17", "vue-ba": "^1.2.5" }, "devDependencies": { "@babel/preset-es2015": "^7.0.0-beta.51", "@commitlint/cli": "^8.2.0", "@commitlint/config-conventional": "^8.2.0", "@vue/cli-plugin-babel": "^3.5.1", "@vue/cli-plugin-eslint": "^3.0.0-beta.15", "@vue/cli-service": "^3.0.0-beta.15", "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.8.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.0.0", "babel-plugin-component": "^1.1.1", "husky": "^3.1.0", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "vue-template-compiler": "^2.5.16" }, "eslintConfig": { "root": false, "env": { "node": false }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "postcss": { "plugins": { "autoprefixer": {} } }, "config": { "commitizen": { "path": "cz-customizable" } }, "husky": { "hooks": { "pre-commit": "npm run lint", "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" } }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] } ================================================ FILE: packages/index.js ================================================ /** * @Description: 导出整个库 * @Author: TSY * @CreateDate: 2019/8/31 12:30 */ import './vueHashCalendar/style/reset.styl' // 导入时间选择器组件 import vueHashCalendar from './vueHashCalendar' // 存储组件列表 const components = [ vueHashCalendar ] // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册 const install = function(Vue) { // 判断是否安装 if (install.installed) return // 遍历注册全局组件 components.map(component => Vue.component(component.name, component)) } // 判断是否是直接引入文件 if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } export default { // 导出的对象必须具有 install，才能被 Vue.use() 方法安装 install, // 以下是组件列表 ...components } ================================================ FILE: packages/vueHashCalendar/components/ScrollContainer.vue ================================================ /** * @Description: 日历滑动容器 * @Author: TSY * @Email: t@tsy6.com * @CreateDate: 2021/6/27 16:53 */ ================================================ FILE: packages/vueHashCalendar/constant/img.js ================================================ /** * @Description: 图片dataURI * @Author: TSY * @CreateDate: 2020/11/08 12:25 */ export const ARROW_DOWN_IMG = 'data:image/png;base64,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' export const ARROW_UP_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAANp0lEQVR4Xu2dbYwdZRXHz7m7l94LSsluKr6kwRqINQtsd2Y0kagxEqsfNFFJipSKTTUajRWKEcSWlhIltFhE40uCWAotGDDRDxg1kcQPSk3MzNysa1HTagMYI5WtvNTQ7C5zzFOngLAv954789y59/zna+c8z5zfmV/PnX3uM5cJBwiAwIIEGGxAAAQWJgBBcHeAwCIEIAhuDxCAILgHQEBHAB1Exw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAECOFRpo6AhBExw1RRghAEI+FfuKJJ5pPPfXU2izLJk5PKyLP1Wq1XwRB8KjHS8FUbRKAIG2C6ua0NE3fmWXZ9US0lpmbC4x1hIgOjIyM7Fq1atXJbuZDbHEEIEhxLOcdKUmS3UT05XanEZG/Dg0NXTUxMXGw3RicVx4BCFIS28nJyQvn5uYeJKK3KabIROSO0dHRregmCnoFhkCQAmG6oUSkliTJdcy8k4jO6HL4I0NDQ1euWbPm912Og3AlAQiiBDdf2OTk5Kq5ubkDRHRJgcOimxQIs9OhIEinxBY4P0mSzxDRHiJ6TUFDvnIYdJOSwC42LATpEnqapitE5F4i+mCXQ7UT7rrJN0dHR7fh2aQdXN2fA0G6YJgkyUdF5AfMPNrFMJpQdBMNNUUMBFFAO3z48NnPPvvsd4logyK8qBB0k6JILjIOBOkQcpIk7yMi95HqTR2GlnU6uklZ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' ================================================ FILE: packages/vueHashCalendar/index.js ================================================ /** * @Description: 导出datetimePicker * @Author: TSY * @CreateDate: 2019/8/31 12:25 */ // 导入组件，组件必须声明 name import DatetimePicker from './src/DatetimePicker.vue' // 为组件提供 install 安装方法，供按需引入 // DatetimePicker = function (Vue) { // Vue.component(DatetimePicker.name, DatetimePicker) // } // 默认导出组件 export default DatetimePicker ================================================ FILE: packages/vueHashCalendar/language/cn.js ================================================ /** * @Description: 中文 * @Author: TSY * @CreateDate: 2020/3/22 21:59 */ export default { CONFIRM: '确定', TODAY: '今天', WEEK: ['日', '一', '二', '三', '四', '五', '六'], MONTH: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], DEFAULT_DATE_FORMAT: 'YY年MM月DD日', DEFAULT_TIME_FORMAT: 'hh:mm' } ================================================ FILE: packages/vueHashCalendar/language/en.js ================================================ /** * @Description: 英文 * @Author: TSY * @CreateDate: 2020/3/22 21:59 */ export default { CONFIRM: 'CONFIRM', TODAY: 'TODAY', WEEK: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'], MONTH: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'], DEFAULT_DATE_FORMAT: 'MM DD,YY', DEFAULT_TIME_FORMAT: 'at hh:mm F' } ================================================ FILE: packages/vueHashCalendar/language/index.js ================================================ /** * @Description: 统一导出所有语言文件 * @Author: TSY * @CreateDate: 2020/3/22 22:01 */ import CN from './cn' import EN from './en' export default { CN, EN } ================================================ FILE: packages/vueHashCalendar/src/Calendar.vue ================================================ /** * @Description: 日历组件 * @Author: TSY * @Email: t@tsy6.com * @CreateDate: 2019/5/26 22:53 */ ================================================ FILE: packages/vueHashCalendar/src/DatetimePicker.vue ================================================ /** * @Description: 日期、时间选择器 * @Author: TSY * @CreateDate: 2019/5/17 16:22 * @Email: t@tsy6.com */ ================================================ FILE: packages/vueHashCalendar/src/TimePicker.vue ================================================ /** * @Description: 时间选择组件 * @Author: TSY * @Email: t@tsy6.com * @CreateDate: 2019/5/26 22:53 */ ================================================ FILE: packages/vueHashCalendar/src/YearMonthPicker.vue ================================================ /** * @Description: 年月选择组件（年范围/年/月） * @Author: TSY * @Email: t@tsy6.com * @CreateDate: 2021/5/26 22:53 */ ================================================ FILE: packages/vueHashCalendar/style/colorVariable.styl ================================================ // 页面主色 main-color = var(--hash-calendar-main-color) //页面背景色 bg-color = var(--hash-calendar-bg-color) //主文字颜色 main-font-color = var(--hash-calendar-main-font-color) //副文字颜色 vice-font-color = var(--hash-calendar-vice-font-color) //禁用背景颜色 disabled-bg-color = var(--hash-calendar-disabled-bg-color) //禁用文字颜色 disabled-font-color = var(--hash-calendar-disabled-font-color) // 定义一套默认颜色配置，用于适配不兼容 css 变量的浏览器 default-main-color = #1c71fb; default-bg-color = #f4f4f4; default-main-font-color = #4c4c4c; default-vice-font-color = #898989; default-disabled-bg-color = #f5f7fa; default-disabled-font-color = #c0c4cc; // 根据属性生成不同的样式表达式 genColor(prop, gen-color, gen-default-color) { if prop == border { {prop} 1px solid gen-default-color {prop} 1px solid gen-color } else { {prop} gen-default-color {prop} gen-color } } // 定义一系列颜色变量适配函数 mainColor(prop) { genColor(prop, main-color, default-main-color) } bgColor(prop) { genColor(prop, bg-color, default-bg-color) } mainFontColor(prop) { genColor(prop, main-font-color, default-main-font-color) } viceFontColor(prop) { genColor(prop, vice-font-color, default-vice-font-color) } disabledBgColor(prop) { genColor(prop, disabled-bg-color, default-disabled-bg-color) } disabledFontColor(prop) { genColor(prop, disabled-font-color, default-disabled-font-color) } .hash-calendar { --hash-calendar-main-color: default-main-color; --hash-calendar-bg-color: default-bg-color; --hash-calendar-main-font-color: default-main-font-color; --hash-calendar-vice-font-color: default-vice-font-color; --hash-calendar-disabled-bg-color: default-disabled-bg-color; --hash-calendar-disabled-font-color: default-disabled-font-color; } ================================================ FILE: packages/vueHashCalendar/style/common.css ================================================ /** * @Description: * @Author: TSY * @CreateDate: 2018/6/9 13:28 */ .click_item:active { background: #eee; } .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; } .pulldown-wrapper { top: -150px; } .iconfont { font-size: 34px; font-size: 4.533333333333333vw; } ================================================ FILE: packages/vueHashCalendar/style/common.styl ================================================ /** * @Description: * @Author: TSY * @CreateDate: 2018/6/9 13:28 */ @import './colorVariable.styl'; //设计稿尺寸 designSize = 750px // 1px 实线边框 solidBorder(color = bg-color) { border 1px solid color } borderBottom(color = bg-color) { border-bottom 1px solid color } borderTop(color = bg-color) { border-top 1px solid color } borderLeft(color = bg-color) { border-left 1px solid color } borderRight(color = bg-color) { border-right 1px solid color } bottomLine(color = bg-color) { border-bottom px2vw(16px) solid color } topLine(color = bg-color) { border-top px2vw(16px) solid color } //浏览器私有前缀属性扩展 vendor(prop, args) { -webkit-{prop} args -moz-{prop} args {prop} args } //文字溢出显示省略号 textOverflow() { overflow hidden text-overflow ellipsis white-space nowrap } //px转vw px2vw(size) { return (size /designSize * 100) vw } fontSize(size, isMoblie = true) if isMobile font-size size font-size px2vw(size) else font-size size paddingAround() { padding px2vw(30px) px2vw(34px) } paddingSmall() { padding px2vw(16px) px2vw(34px) } fixedTop() { position: fixed width 100% top 0 left 0 z-index 2 } fixedBottom() { position: fixed width 100% bottom 0 left 0 z-index 2 } flexAlign(align = center) { display flex align-items align } flexContent(align = center, justify = center) { display flex align-items align justify-content justify } flexBetween(align = center) { display flex align-items align justify-content space-between } flexAround(align = center) { display flex align-items align justify-content space-around } .click_item:active { background: #eee; } .mask { position fixed top 0 left 0 width 100% height 100% background rgba(0,0,0,0.5) z-index 999 } .pulldown-wrapper { top: -150px; } .iconfont { fontSize(34px) } ================================================ FILE: packages/vueHashCalendar/style/reset.css ================================================ /** * @Description: * @Author: TSY * @CreateDate: 2018/6/9 13:28 */ html, body { width: 100%; border: 0; font-family: 'Helvetica-Neue', 'Helvetica', Arial, sans-serif; margin: 0; padding: 0; overflow-x: hidden; font-size: 4vw; background: #fff; color: #191919; } div, span, object, iframe, img, table, caption, thead, tbody, tfoot, tr, td, article, aside, canvas, details, figure, hgroup, menu, nav, footer, header, section, summary, mark, audio, video { border: 0; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cit, code, del, dfn, em, ins, q, samp, small, strong, sub, sup, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, legend, label { border: 0; vertical-align: baseline; margin: 0; padding: 0; } article, aside, canvas, figure, figure img, figcaption, hgroup, footer, header, nav, section, audio, video { display: inline-block; } table { border-collapse: separate; border-spacing: 0; } table caption, table th, table td { text-align: left; vertical-align: middle; } li { list-style: none; } a { text-decoration: none; outline: none; display: inline-block; } a img { border: 0; } img { width: 100%; } :focus { outline: 0; } * { box-sizing: border-box; } textarea { resize: none; appearance: none; font-size: 4vw; } input { appearance: none; -webkit-appearance: none; font-size: 4vw; } select { appearance: none; background-color: #fff; font-size: 4vw; } button { border: none; font-size: 4vw; } p, span { letter-spacing: 1px; } .mescroll-totop-self { bottom: 50px !important; } .mint-indicator-wrapper { z-index: 99; } ================================================ FILE: packages/vueHashCalendar/style/reset.styl ================================================ /** * @Description: * @Author: TSY * @CreateDate: 2018/6/9 13:28 */ html, body { .hash-calendar { width: 100%; border: 0; font-family: "Helvetica-Neue", "Helvetica", Arial, sans-serif; margin: 0; padding: 0; overflow-x: hidden; font-size: 4vw; background: #fff; color: #191919 } } .hash-calendar { div, span, object, iframe, img, table, caption, thead, tbody, tfoot, tr, tr, td, article, aside, canvas, details, figure, hgroup, menu, nav, footer, header, section, summary, mark, audio, video { border: 0; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cit, code, del, dfn, em, ins, q, samp, small, strong, sub, sup, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, legend, label { border: 0; vertical-align: baseline; margin: 0; padding: 0; } li { list-style: none; } * { box-sizing: border-box; &:focus { outline: 0; } } button { border: none; font-size: 4vw; } p, span { letter-spacing: 1px; } } ================================================ FILE: packages/vueHashCalendar/utils/util.js ================================================ /** * @Description: 各种工具类 * @Author: TSY * @CreateDate: 2018/6/9 13:28 */ /** * 判断安卓与IOS平台 * @returns {string} */ export const checkPlatform = function() { if (/android/i.test(navigator.userAgent)) { return '1' } if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { return '2' } } /** * 日期格式化 * @param time * @param format * @returns {string} */ export let formatDate = function(time, format, lang = 'CN') { lang = lang.toUpperCase() let language = require('../language').default[lang] || {} format = format || `${language.DEFAULT_DATE_FORMAT} ${language.DEFAULT_TIME_FORMAT}` let date = time ? new Date(time) : new Date() let year = date.getFullYear() let month = date.getMonth() + 1 // 月份是从0开始的 let day = date.getDate() let hour = date.getHours() let min = date.getMinutes() let sec = date.getSeconds() let preArr = Array.apply(null, Array(10)).map(function(elem, index) { return '0' + index })/// /开个长度为10的数组 格式为 00 01 02 03 let newTime = format.replace(/YY/g, year) .replace(/F/g, hour >= 12 ? 'pm' : 'am') .replace(/ss/g, preArr[sec] || sec) .replace(/mm/g, preArr[min] || min) .replace(/hh/g, (hour > 12 && format.includes('F')) ? hour - 12 : format.includes('F') ? hour : preArr[hour] || hour) .replace(/DD/g, preArr[day] || day) .replace(/MM/g, lang === 'EN' ? language.MONTH[month - 1] : preArr[month] || month) return newTime } /** * 当前日期是否在两个日期范围之间 * @param {*} curr * @param {*} min * @param {*} max * @returns */ export const isDateInRange = (curr, min, max) => { let minDate = min && min.getTime() - 24 * 60 * 60 * 1000 let maxDate = max && max.getTime() let currentDate = curr && curr.getTime() if (minDate && maxDate) return currentDate > minDate && currentDate < maxDate if (minDate) return currentDate > minDate if (maxDate) return currentDate < maxDate return true } ================================================ FILE: public/index.html ================================================ vue-hash-calendar_移动端日期时间选择插件_hxkj.vip_HashTang
================================================ FILE: vue.config.js ================================================ /** * @Description: 自定义配置 * @Author: TSY * @CreateDate: 2018/6/9 13:28 */ module.exports = { baseUrl: process.env.NODE_ENV === 'production' ? './' : '/', productionSourceMap: false, lintOnSave: false, // 修改 src 目录 为 examples 目录 pages: { index: { entry: 'examples/main.js', template: 'public/index.html', filename: 'index.html' } } }