├── .github └── workflows │ └── code-test.yml ├── .idea ├── .gitignore ├── datepicker.iml ├── modules.xml └── vcs.xml ├── Doc ├── index.html ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── assets │ │ ├── style │ │ │ ├── color.scss │ │ │ ├── el-message.css │ │ │ ├── global.scss │ │ │ ├── hightlight.scss │ │ │ ├── index.scss │ │ │ └── mobile.scss │ │ └── svg │ │ │ └── svg.js │ ├── components │ │ ├── Document │ │ │ ├── Document.vue │ │ │ ├── components │ │ │ │ ├── content.vue │ │ │ │ └── slider.vue │ │ │ └── index.ts │ │ ├── Enter │ │ │ ├── enter.vue │ │ │ └── index.ts │ │ └── Header │ │ │ ├── Header.vue │ │ │ └── index.ts │ ├── main.ts │ ├── package │ │ ├── button-group │ │ │ ├── index.ts │ │ │ └── src │ │ │ │ └── button-group.vue │ │ ├── button │ │ │ ├── index.ts │ │ │ └── src │ │ │ │ └── button.vue │ │ ├── datepicker-demo │ │ │ ├── index.ts │ │ │ └── src │ │ │ │ └── datepicker-demo.vue │ │ ├── demo-card │ │ │ ├── index.ts │ │ │ └── src │ │ │ │ └── card.vue │ │ ├── icon │ │ │ ├── index.ts │ │ │ └── src │ │ │ │ └── icon.vue │ │ ├── index.ts │ │ ├── input │ │ │ ├── index.ts │ │ │ └── src │ │ │ │ └── Input.vue │ │ ├── install-card-group │ │ │ ├── index.ts │ │ │ └── src │ │ │ │ ├── group.vue │ │ │ │ └── install-card.vue │ │ ├── logo │ │ │ ├── index.ts │ │ │ └── src │ │ │ │ └── logo.vue │ │ └── theme-card │ │ │ ├── index.ts │ │ │ └── src │ │ │ └── card.vue │ ├── plugins │ │ └── md-loader │ │ │ ├── index.ts │ │ │ ├── markdown.ts │ │ │ ├── markdownTag.ts │ │ │ ├── render.ts │ │ │ └── snippet.ts │ ├── router │ │ └── index.ts │ ├── shims-vue.d.ts │ ├── type │ │ └── utils.ts │ ├── utils.ts │ └── views │ │ ├── en │ │ ├── api.md │ │ ├── basic.md │ │ ├── home.md │ │ ├── locale.md │ │ ├── method.md │ │ ├── options.md │ │ ├── start.md │ │ ├── theme.md │ │ └── type.md │ │ └── zh │ │ ├── api.md │ │ ├── basic.md │ │ ├── home.md │ │ ├── locale.md │ │ ├── method.md │ │ ├── options.md │ │ ├── start.md │ │ ├── theme.md │ │ └── type.md └── tsconfig.json ├── LICENSE ├── README.md ├── build ├── gulpfile.ts ├── jest.config.ts ├── locales.ts └── rollup.config.ts ├── locale ├── af.ts ├── br.ts ├── en-au.ts ├── en-ca.ts ├── en-gb.ts ├── en-ie.ts ├── en.ts ├── es.ts ├── fi.ts ├── fo.ts ├── fr.ts ├── hr.ts ├── ht.ts ├── it.ts ├── ja.ts ├── ko.ts ├── ku.ts ├── lb.ts ├── lo.ts ├── uk.ts ├── uz.ts ├── zh-cn.ts ├── zh-hk.ts ├── zh-tw.ts └── zh.ts ├── package.json ├── tsconfig.json ├── vite.config.ts └── yarn.lock /.github/workflows/code-test.yml: -------------------------------------------------------------------------------- 1 | name: code-test 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | schedule: 8 | # Runs at 12am UTC 9 | - cron: '0 0 * * *' 10 | 11 | 12 | jobs: 13 | build: 14 | 15 | runs-on: ubuntu-latest 16 | 17 | steps: 18 | - uses: actions/checkout@master 19 | - name: Use Node.js 12.x 20 | uses: actions/setup-node@v1 21 | - name: test 22 | run: | 23 | npm i 24 | npm run test -u 25 | bash <(curl -s https://codecov.io/bash) 26 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Editor-based HTTP Client requests 5 | /httpRequests/ 6 | -------------------------------------------------------------------------------- /.idea/datepicker.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Doc/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Better datePicker 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Doc/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Js-Monkey/datepicker/1199144b4e7d54f1893de5c1e8dcebb07571a9e2/Doc/public/favicon.ico -------------------------------------------------------------------------------- /Doc/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 41 | 42 | 68 | -------------------------------------------------------------------------------- /Doc/src/assets/style/color.scss: -------------------------------------------------------------------------------- 1 | $red: #F1453D; 2 | $red-1: lighten($red, 30); 3 | $red-2: lighten($red, 20); 4 | $red-3: lighten($red, 10); 5 | $red-4: lighten($red, 0); 6 | $red-5: darken($red, 10); 7 | $red-6: darken($red, 20); 8 | $red-7: darken($red, 30); 9 | 10 | $orange: #ffb311; 11 | $orange-1: lighten($orange, 30); 12 | $orange-2: lighten($orange, 20); 13 | $orange-3: lighten($orange, 10); 14 | $orange-4: lighten($orange, 0); 15 | $orange-5: darken($orange, 10); 16 | $orange-6: darken($orange, 20); 17 | $orange-7: darken($orange, 30); 18 | 19 | $blue: #26acee; 20 | $blue-1: lighten($blue, 30); 21 | $blue-2: lighten($blue, 20); 22 | $blue-3: lighten($blue, 10); 23 | $blue-4: lighten($blue, 0); 24 | $blue-5: darken($blue, 10); 25 | $blue-6: darken($blue, 20); 26 | $blue-7: darken($blue, 30); 27 | 28 | $green: #17cc15; 29 | $green-1: lighten($green, 30); 30 | $green-2: lighten($green, 20); 31 | $green-3: lighten($green, 10); 32 | $green-4: lighten($green, 0); 33 | $green-5: darken($green, 10); 34 | $green-6: darken($green, 20); 35 | $green-7: darken($green, 30); 36 | 37 | $grey: #c2c5cb; 38 | $grey-1: lighten($grey, 30); 39 | $grey-2: lighten($grey, 20); 40 | $grey-3: lighten($grey, 10); 41 | $grey-4: lighten($grey, 0); 42 | $grey-5: darken($grey, 10); 43 | $grey-6: darken($grey, 20); 44 | $grey-7: darken($grey, 30); 45 | 46 | 47 | $black: #13181b; 48 | $black-1: lighten($black, 30); 49 | $black-2: lighten($black, 20); 50 | $black-3: lighten($black, 10); 51 | $black-4: lighten($black, 0); 52 | $black-5: darken($black, 10); 53 | $black-6: darken($black, 20); 54 | $black-7: darken($black, 30); 55 | -------------------------------------------------------------------------------- /Doc/src/assets/style/el-message.css: -------------------------------------------------------------------------------- 1 | .el-message{min-width:380px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border-width:1px;border-style:solid;border-color:#EBEEF5;position:fixed;left:50%;top:20px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#edf2fc;-webkit-transition:opacity .3s,top .4s,-webkit-transform .4s;transition:opacity .3s,top .4s,-webkit-transform .4s;transition:opacity .3s,transform .4s,top .4s;transition:opacity .3s,transform .4s,top .4s,-webkit-transform .4s;overflow:hidden;padding:15px 15px 15px 20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-message.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-message.is-closable .el-message__content{padding-right:16px}.el-message p{margin:0}.el-message--info .el-message__content{color:#909399}.el-message--success{background-color:#1ea83f;border-color:#aafa91}.el-message--success .el-message__content{color:#ffffff}.el-message--warning{background-color:#fdf6ec;border-color:#faecd8}.el-message--warning .el-message__content{color:#E6A23C}.el-message--error{background-color:#fef0f0;border-color:#fde2e2}.el-message--error .el-message__content{color:#F56C6C}.el-message__icon{margin-right:10px}.el-message__content{padding:0;font-size:14px;line-height:1}.el-message__content:focus{outline-width:0}.el-message__closeBtn{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;color:#C0C4CC;font-size:16px}.el-message__closeBtn:focus{outline-width:0}.el-message__closeBtn:hover{color:#909399}.el-message .el-icon-success{color:#67C23A}.el-message .el-icon-error{color:#F56C6C}.el-message .el-icon-info{color:#909399}.el-message .el-icon-warning{color:#E6A23C}.el-message-fade-enter-from,.el-message-fade-leave-to{opacity:0;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)} 2 | -------------------------------------------------------------------------------- /Doc/src/assets/style/global.scss: -------------------------------------------------------------------------------- 1 | @import "./color"; 2 | 3 | $text-light: #ffffff; 4 | 5 | $text: $grey-7; 6 | $text-2: $grey-6; 7 | $text-3: $grey-4; 8 | 9 | $bg: $black; 10 | $bg-2: $black-3; 11 | $bg-3: $black-4; 12 | 13 | $line-1: $grey; 14 | $line-2: $grey-3; 15 | $line-3: $grey-2; 16 | 17 | $disabled-text: $grey-3; 18 | $disabled-bg: $grey-6; 19 | 20 | 21 | $border-color: $grey-3; 22 | $border-hover-color: $grey-7; 23 | $border-radius: 4px; 24 | $border-drop-radius: 1px 1px 4px 4px; 25 | $border-solid: 1px solid $border-color; 26 | 27 | $bg-color-1: $grey-1; 28 | 29 | 30 | $shadow-color: $grey-5; 31 | 32 | $shadow-up: 0 -1px 5px $bg; 33 | $shadow-down: 0 1px 5px $bg; 34 | $shadow-left: -1px 3px 3px 3px $bg; 35 | $shadow-right: 1px 0 5px $bg; 36 | 37 | $padding-left-more: 0 30px 0 25px; 38 | $padding-right-more: 0 10px 0 30px; 39 | 40 | $button-active-bg: #ffffff; 41 | $button-bg: $grey-1; 42 | 43 | $font-size-large: 16px; 44 | $font-size: 14px; 45 | $font-size-small: 13px; 46 | 47 | $animation-duration: .32s; 48 | 49 | 50 | $primary-1: $blue; 51 | $primary-2: $blue-5; 52 | $error-1: $red; 53 | $error-2: $red-5; 54 | $success-1: $green; 55 | $success-2: $green-5; 56 | $warn-1: $orange; 57 | $warn-2: $orange-5; 58 | $info-1: $grey; 59 | $info-2: $grey-5; 60 | 61 | -------------------------------------------------------------------------------- /Doc/src/assets/style/hightlight.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Darcula color scheme from the JetBrains family of IDEs 4 | 5 | */ 6 | 7 | .hljs { 8 | display: block; 9 | overflow-x: auto; 10 | padding: 0.5em; 11 | background: #131b2e; 12 | color: #efefe4; 13 | } 14 | 15 | a { 16 | color: #3498DB; 17 | } 18 | 19 | pre { 20 | margin: 0; 21 | padding: 0; 22 | display: flex; 23 | align-items: stretch; 24 | 25 | code { 26 | width: 100%; 27 | border-radius: 7px; 28 | padding: 20px !important; 29 | font-size: 16px; 30 | line-height: 1.7; 31 | 32 | span { 33 | display: inline-block; 34 | } 35 | 36 | p { 37 | line-height: 1.75; 38 | } 39 | } 40 | } 41 | 42 | .hljs-strong, 43 | .hljs-emphasis { 44 | color: #a8a8a2; 45 | } 46 | 47 | .hljs-bullet, 48 | .hljs-quote, 49 | .hljs-link, 50 | .hljs-number, 51 | .hljs-regexp, 52 | .hljs-literal { 53 | color: #6896ba; 54 | } 55 | 56 | .hljs-code, 57 | .hljs-selector-class { 58 | color: #a6e22e; 59 | } 60 | 61 | .hljs-emphasis { 62 | font-style: italic; 63 | } 64 | 65 | .hljs-keyword, 66 | .hljs-selector-tag, 67 | .hljs-section, 68 | .hljs-attribute, 69 | .hljs-name, 70 | .hljs-variable { 71 | color: #ffb311; 72 | } 73 | 74 | .hljs-attr { 75 | color: #aafa91; 76 | } 77 | 78 | .hljs-title { 79 | color: #6ed766; 80 | } 81 | 82 | .hljs-params { 83 | color: #b9b9b9; 84 | } 85 | 86 | .hljs-string { 87 | color: #1ea83f; 88 | } 89 | 90 | .hljs-subst, 91 | .hljs-type, 92 | .hljs-built_in, 93 | .hljs-builtin-name, 94 | .hljs-symbol, 95 | .hljs-selector-id, 96 | .hljs-selector-attr, 97 | .hljs-selector-pseudo, 98 | .hljs-template-tag, 99 | .hljs-template-variable, 100 | .hljs-addition { 101 | color: #e0c46c; 102 | } 103 | 104 | .hljs-deletion, 105 | .hljs-meta { 106 | color: #aafa91; 107 | } 108 | 109 | .hljs-comment { 110 | color: #7a7a7a; 111 | } 112 | 113 | .markdown-body, .demo { 114 | color: #dae3f6; 115 | 116 | strong { 117 | color: #e84c3b; 118 | } 119 | 120 | > table { 121 | width: 100%; 122 | margin-top: 100px; 123 | border-collapse: collapse; 124 | font-family: Menlo; 125 | margin-bottom: 30px; 126 | 127 | 128 | th { 129 | color: #e84c3b; 130 | text-align: start; 131 | padding: 10px; 132 | } 133 | 134 | td { 135 | font-size: 14px; 136 | 137 | &:nth-child(odd) { 138 | color: #eec15c; 139 | font-size: 16px; 140 | } 141 | 142 | &:nth-child(3) { 143 | color: #48f68d; 144 | font-size: 16px; 145 | } 146 | 147 | &:nth-child(5) { 148 | color: #8189f1; 149 | font-size: 16px; 150 | } 151 | 152 | padding: 10px; 153 | } 154 | 155 | tr { 156 | border-bottom: 1px solid #808a89 !important; 157 | } 158 | } 159 | 160 | h1 { 161 | color: #ffb311; 162 | } 163 | 164 | h2 { 165 | color: #eec15c; 166 | } 167 | 168 | h2, h1 { 169 | font-family: Futura; 170 | } 171 | 172 | pre { 173 | 174 | } 175 | 176 | h3 { 177 | color: #eac674; 178 | } 179 | 180 | em { 181 | color: #3498DB; 182 | } 183 | } 184 | -------------------------------------------------------------------------------- /Doc/src/assets/style/index.scss: -------------------------------------------------------------------------------- 1 | @import "./hightlight"; 2 | @import "./global"; 3 | @import "./src/assets/date-picker"; 4 | @import "./mobile"; 5 | -------------------------------------------------------------------------------- /Doc/src/assets/style/mobile.scss: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 893px) { 2 | body { 3 | font-size: 14px; 4 | } 5 | .install { 6 | flex-direction: column; 7 | font-size: 14px; 8 | 9 | &-card { 10 | margin: 6px 0; 11 | 12 | &-code { 13 | padding: 6px 9px; 14 | } 15 | 16 | svg { 17 | font-size: 14px !important; 18 | } 19 | } 20 | } 21 | } 22 | 23 | 24 | @media screen and (max-width: 564px) { 25 | .install { 26 | font-size: 12px; 27 | } 28 | .enter-button { 29 | &-description { 30 | font-size: 15px !important; 31 | } 32 | 33 | //button{ 34 | // padding: 5px 12px !important; 35 | // font-size: 12px !important; 36 | //} 37 | button { 38 | display: none !important; 39 | } 40 | } 41 | .header-nav { 42 | display: none !important; 43 | } 44 | .header-github { 45 | margin-left: auto !important; 46 | } 47 | .logo { 48 | width: 50vw !important; 49 | height: 39vw !important; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /Doc/src/assets/svg/svg.js: -------------------------------------------------------------------------------- 1 | !function(l){var c,a,o,t,h,i,e='',m=(m=document.getElementsByTagName("script"))[m.length-1].getAttribute("data-injectcss");if(m&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(l){console&&console.log(l)}}function s(){h||(h=!0,o())}c=function(){var l,c,a,o;(o=document.createElement("div")).innerHTML=e,e=null,(a=o.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",l=a,(c=document.body).firstChild?(o=l,(a=c.firstChild).parentNode.insertBefore(o,a)):c.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(a=function(){document.removeEventListener("DOMContentLoaded",a,!1),c()},document.addEventListener("DOMContentLoaded",a,!1)):document.attachEvent&&(o=c,t=l.document,h=!1,(i=function(){try{t.documentElement.doScroll("left")}catch(l){return void setTimeout(i,50)}s()})(),t.onreadystatechange=function(){"complete"==t.readyState&&(t.onreadystatechange=null,s())})}(window); 2 | -------------------------------------------------------------------------------- /Doc/src/components/Document/Document.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | 25 | -------------------------------------------------------------------------------- /Doc/src/components/Document/components/content.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 43 | -------------------------------------------------------------------------------- /Doc/src/components/Document/components/slider.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 40 | 41 | 83 | -------------------------------------------------------------------------------- /Doc/src/components/Document/index.ts: -------------------------------------------------------------------------------- 1 | import Document from './Document.vue' 2 | 3 | export default Document 4 | -------------------------------------------------------------------------------- /Doc/src/components/Enter/enter.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 16 | 17 | 65 | -------------------------------------------------------------------------------- /Doc/src/components/Enter/index.ts: -------------------------------------------------------------------------------- 1 | import Enter from './enter.vue' 2 | 3 | export default Enter 4 | -------------------------------------------------------------------------------- /Doc/src/components/Header/Header.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 60 | 61 | 138 | -------------------------------------------------------------------------------- /Doc/src/components/Header/index.ts: -------------------------------------------------------------------------------- 1 | import Header from './Header.vue' 2 | 3 | export default Header 4 | -------------------------------------------------------------------------------- /Doc/src/main.ts: -------------------------------------------------------------------------------- 1 | import {createApp, nextTick} from 'vue' 2 | import App from './App.vue' 3 | import Router from './router/index' 4 | import {useComponent} from "./package" 5 | import highlightJs from 'highlight.js' 6 | import './assets/style/index.scss' 7 | import ColorPicker from 'element-plus/lib/el-color-picker' 8 | import Msg from 'element-plus/lib/el-message' 9 | import 'element-plus/lib/theme-chalk/index.css' 10 | import './assets/style/el-message.css' 11 | import {createDatePicker, locale, defaultOptions, destroy} from '../../src' 12 | import NProgress from "nprogress"; 13 | // import xx from '../../dist/locale_es/zh-cn' 14 | // locale(xx) 15 | // defaultOptions({ 16 | // themeColor: '#1890ff', 17 | // rangeBgColor: '#e6f7ff', 18 | // tdColor: '#5f5f5f', 19 | // thColor: '#5f5f5f', 20 | // }) 21 | NProgress.configure({ 22 | easing: 'ease', 23 | speed: 200, 24 | showSpinner: true, 25 | trickleSpeed: 200, 26 | }) 27 | 28 | const app = createApp(App) 29 | useComponent(app) 30 | 31 | app.config.globalProperties.createDatePicker = createDatePicker 32 | app.config.globalProperties.$Msg = Msg 33 | 34 | highlightJs.configure({ 35 | languages: ['js', 'html'] 36 | }) 37 | 38 | Router.afterEach((event) => { 39 | nextTick(() => document.querySelectorAll('pre code').forEach(block => highlightJs.highlightBlock(block))) 40 | }) 41 | app.use(Router) 42 | app.use(ColorPicker) 43 | app.mount('#app') 44 | -------------------------------------------------------------------------------- /Doc/src/package/button-group/index.ts: -------------------------------------------------------------------------------- 1 | import {App} from 'vue' 2 | import Group from './src/button-group.vue' 3 | import {VueComponent} from '../../type/utils' 4 | 5 | Group.install = (app: App): void => { 6 | app.component(Group.name, Group) 7 | } 8 | 9 | export default Group as VueComponent 10 | -------------------------------------------------------------------------------- /Doc/src/package/button-group/src/button-group.vue: -------------------------------------------------------------------------------- 1 | 6 | 16 | 17 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /Doc/src/package/button/index.ts: -------------------------------------------------------------------------------- 1 | import {App} from 'vue' 2 | import Button from './src/button.vue' 3 | import {VueComponent} from '../../type/utils' 4 | 5 | Button.install = (app: App): void => { 6 | app.component(Button.name, Button) 7 | } 8 | 9 | export default Button as VueComponent 10 | -------------------------------------------------------------------------------- /Doc/src/package/button/src/button.vue: -------------------------------------------------------------------------------- 1 | 155 | 184 | 255 | 256 | 257 | 258 | 259 | -------------------------------------------------------------------------------- /Doc/src/package/datepicker-demo/index.ts: -------------------------------------------------------------------------------- 1 | import {App} from 'vue' 2 | import demo from './src/datepicker-demo.vue' 3 | import {VueComponent} from "../../type/utils" 4 | 5 | demo.install = (app: App): void => { 6 | app.component(demo.name, demo) 7 | } 8 | 9 | export default demo as unknown as VueComponent 10 | -------------------------------------------------------------------------------- /Doc/src/package/datepicker-demo/src/datepicker-demo.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 84 | 85 | 98 | -------------------------------------------------------------------------------- /Doc/src/package/demo-card/index.ts: -------------------------------------------------------------------------------- 1 | import {App} from 'vue' 2 | import card from './src/card.vue' 3 | import {VueComponent} from "../../type/utils" 4 | 5 | card.install = (app: App): void => { 6 | app.component(card.name, card) 7 | } 8 | 9 | export default card as unknown as VueComponent 10 | -------------------------------------------------------------------------------- /Doc/src/package/demo-card/src/card.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 67 | 68 | 177 | -------------------------------------------------------------------------------- /Doc/src/package/icon/index.ts: -------------------------------------------------------------------------------- 1 | import {App} from 'vue' 2 | import Icon from './src/icon.vue' 3 | import {VueComponent} from "../../type/utils" 4 | 5 | Icon.install = (app: App): void => { 6 | app.component(Icon.name, Icon) 7 | } 8 | 9 | export default Icon as unknown as VueComponent 10 | -------------------------------------------------------------------------------- /Doc/src/package/icon/src/icon.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 36 | 37 | 56 | -------------------------------------------------------------------------------- /Doc/src/package/index.ts: -------------------------------------------------------------------------------- 1 | import Button from './button' 2 | import ButtonGroup from './button-group' 3 | import Input from './input' 4 | import Icon from './icon' 5 | import demoCard from './demo-card' 6 | import themeCard from './theme-card' 7 | import datepickerDemo from './datepicker-demo' 8 | import cardGroup from './install-card-group' 9 | import Logo from './logo' 10 | import {App} from 'vue' 11 | 12 | export function useComponent(app: App): void { 13 | app.use(Button) 14 | app.use(ButtonGroup) 15 | app.use(Icon) 16 | app.use(Input) 17 | app.use(demoCard) 18 | app.use(themeCard) 19 | app.use(datepickerDemo) 20 | app.use(cardGroup) 21 | app.use(Logo) 22 | } 23 | -------------------------------------------------------------------------------- /Doc/src/package/input/index.ts: -------------------------------------------------------------------------------- 1 | import {App} from 'vue' 2 | import Input from './src/Input.vue' 3 | import {VueComponent} from "../../type/utils" 4 | 5 | Input.install = (app: App): void => { 6 | app.component(Input.name, Input) 7 | } 8 | 9 | export default Input as unknown as VueComponent 10 | -------------------------------------------------------------------------------- /Doc/src/package/input/src/Input.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 108 | 109 | 272 | -------------------------------------------------------------------------------- /Doc/src/package/install-card-group/index.ts: -------------------------------------------------------------------------------- 1 | import {App} from 'vue' 2 | import installCardGroup from './src/group.vue' 3 | import {VueComponent} from "../../type/utils" 4 | 5 | installCardGroup.install = (app: App): void => { 6 | app.component(installCardGroup.name, installCardGroup) 7 | } 8 | 9 | export default installCardGroup as unknown as VueComponent 10 | -------------------------------------------------------------------------------- /Doc/src/package/install-card-group/src/group.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 20 | 21 | 40 | -------------------------------------------------------------------------------- /Doc/src/package/install-card-group/src/install-card.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 32 | 33 | 76 | -------------------------------------------------------------------------------- /Doc/src/package/logo/index.ts: -------------------------------------------------------------------------------- 1 | import {App} from 'vue' 2 | import logo from './src/logo.vue' 3 | import {VueComponent} from "../../type/utils" 4 | 5 | logo.install = (app: App): void => { 6 | app.component(logo.name, logo) 7 | } 8 | 9 | export default logo as unknown as VueComponent 10 | -------------------------------------------------------------------------------- /Doc/src/package/logo/src/logo.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 49 | 50 | 75 | -------------------------------------------------------------------------------- /Doc/src/package/theme-card/index.ts: -------------------------------------------------------------------------------- 1 | import {App} from 'vue' 2 | import card from './src/card.vue' 3 | import {VueComponent} from "../../type/utils" 4 | 5 | card.install = (app: App): void => { 6 | app.component(card.name, card) 7 | } 8 | 9 | export default card as unknown as VueComponent 10 | -------------------------------------------------------------------------------- /Doc/src/package/theme-card/src/card.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 98 | 99 | 168 | -------------------------------------------------------------------------------- /Doc/src/plugins/md-loader/index.ts: -------------------------------------------------------------------------------- 1 | import type {Plugin} from 'vite' 2 | import transformToVue from "./snippet" 3 | 4 | function MarkDownLoader(): Plugin { 5 | 6 | return { 7 | name: 'vite-plugin-markdown-to-vue', 8 | enforce: 'pre', 9 | transform(raw, id) { 10 | if (id.endsWith('.md')) return transformToVue(raw) 11 | }, 12 | } 13 | } 14 | 15 | export default MarkDownLoader 16 | 17 | -------------------------------------------------------------------------------- /Doc/src/plugins/md-loader/markdown.ts: -------------------------------------------------------------------------------- 1 | import MarkdownIt from "markdown-it" 2 | 3 | const markdown = new MarkdownIt({ 4 | html: true, 5 | linkify: true, 6 | typographer: true 7 | }) 8 | export default function toMd(source: any): string { 9 | return markdown.render(source, {}) 10 | } 11 | -------------------------------------------------------------------------------- /Doc/src/plugins/md-loader/markdownTag.ts: -------------------------------------------------------------------------------- 1 | export const h1 = '#' 2 | export const h2 = '##' 3 | export const codeBlock = ':::' 4 | export const htmlBlock = '```html' 5 | export const scriptTag = ' 18 | * 19 | */ 20 | 21 | export default function transformToVue(source: string): string { 22 | if (source.indexOf(':::') === -1) { 23 | const plugin = mdPlugin() as any 24 | return plugin.transform(source, 'xxx.md') as string 25 | } 26 | const snippet = source.split(h2) 27 | const title = snippet[0].slice(0, 2) === '# ' ? toMd(snippet.shift()) : '' 28 | const snippetStr = snippet.join(h2) 29 | const componentsEndIdx = snippetStr.lastIndexOf(codeBlock) + codeBlock.length 30 | const components = snippetStr.slice(0, componentsEndIdx).split(h2) 31 | const {componentNames, componentsRender} = getRenderComponent(components) 32 | const rowLeft: string[] = [] 33 | const rowRight: string[] = [] 34 | componentNames.forEach((name, idx) => { 35 | if (idx & 1) { 36 | rowRight.push(name) 37 | } else { 38 | rowLeft.push(name) 39 | } 40 | }) 41 | return ` 42 | 55 | 67 | 68 | ` 69 | } 70 | -------------------------------------------------------------------------------- /Doc/src/router/index.ts: -------------------------------------------------------------------------------- 1 | import {createRouter, createWebHashHistory} from "vue-router" 2 | import Enter from '../components/Enter' 3 | import Document from '../components/Document' 4 | import NProgress from "nprogress" 5 | 6 | const history = createWebHashHistory() 7 | 8 | 9 | function createRoute(lang: string, lists: any[]) { 10 | const createChild = (list: any) => { 11 | return { 12 | path: list.path, 13 | name: list.name, 14 | metaName: list.metaName, 15 | isSecondLevel: list.isSecond, 16 | component: () => import(`../views/${lang}/${list.path}.md`) 17 | } 18 | } 19 | 20 | return { 21 | path: `/${lang}/doc`, 22 | component: Document, 23 | redirect: `/${lang}/doc/start`, 24 | children: lists.map(list => createChild(list)) 25 | } 26 | } 27 | 28 | const router = createRouter({ 29 | history, 30 | routes: [ 31 | { 32 | path: '/', 33 | component: Enter, 34 | children: [ 35 | { 36 | path: 'zh', 37 | name: 'zh', 38 | component: () => import('../views/zh/home.md') 39 | }, 40 | { 41 | path: 'en', 42 | name: 'en', 43 | component: () => import('../views/en/home.md') 44 | }, 45 | ] 46 | }, 47 | createRoute('en', [ 48 | { 49 | name: 'start', 50 | path: 'start' 51 | }, 52 | { 53 | name: 'theme', 54 | path: 'theme' 55 | }, 56 | { 57 | name: 'options', 58 | path: 'options' 59 | }, 60 | { 61 | name: 'type', 62 | path: 'type', 63 | isSecond: true 64 | }, 65 | { 66 | name: 'basic', 67 | path: 'basic', 68 | isSecond: true 69 | }, 70 | { 71 | name: 'method', 72 | path: 'method' 73 | }, 74 | { 75 | name: 'locale', 76 | path: 'locale', 77 | }, 78 | { 79 | name: 'API', 80 | path: 'api' 81 | }, 82 | ]), 83 | createRoute('zh', [ 84 | { 85 | name: '开始', 86 | path: 'start', 87 | }, 88 | { 89 | name: '主题', 90 | path: 'theme', 91 | }, 92 | { 93 | name: '配置', 94 | path: 'options', 95 | }, 96 | { 97 | name: '类型', 98 | path: 'type', 99 | isSecond: true 100 | }, 101 | { 102 | name: '基础配置', 103 | isSecond: true, 104 | path: 'basic', 105 | }, 106 | { 107 | name: '方法', 108 | path: 'method' 109 | }, 110 | 111 | { 112 | name: '地区设置', 113 | path: 'locale', 114 | }, 115 | { 116 | name: '其他接口', 117 | path: 'api' 118 | }, 119 | ]) 120 | ] 121 | }) 122 | 123 | 124 | router.beforeEach((to, from, next) => { 125 | const name = localStorage.getItem('lang') || 'en' 126 | NProgress.start() 127 | if (to.path === '/') { 128 | next({ 129 | name 130 | }) 131 | } else if (to.path === '/zh/' || to.path === '/en/') { 132 | next('/') 133 | } else { 134 | next() 135 | } 136 | }) 137 | 138 | router.afterEach(() => { 139 | NProgress.done() 140 | }) 141 | 142 | export default router 143 | -------------------------------------------------------------------------------- /Doc/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import {ComponentOptions} from 'vue' 3 | const Component: ComponentOptions 4 | export default Component 5 | } 6 | 7 | declare module '*.md' { 8 | const value: any 9 | export default value 10 | } 11 | 12 | declare module 'rollup-plugin-sourcemaps' { 13 | const value: any 14 | export default value 15 | } 16 | 17 | declare module 'nprogress' { 18 | const value: any 19 | export default value 20 | } 21 | 22 | 23 | declare module 'rollup-plugin-json' { 24 | const value: any 25 | export default value 26 | } 27 | 28 | 29 | declare module 'lodash.camelcase' { 30 | const value: any 31 | export default value 32 | } 33 | -------------------------------------------------------------------------------- /Doc/src/type/utils.ts: -------------------------------------------------------------------------------- 1 | import {App, DefineComponent} from "vue"; 2 | 3 | export interface VueComponent extends DefineComponent { 4 | install(app: App): void 5 | } 6 | 7 | -------------------------------------------------------------------------------- /Doc/src/utils.ts: -------------------------------------------------------------------------------- 1 | import {_Event} from "../../src/types/event" 2 | import $Msg from 'element-plus/lib/el-message' 3 | 4 | let message: any 5 | 6 | export function copyText(e: _Event): void { 7 | const transfer = document.createElement('input') 8 | document.body.appendChild(transfer) 9 | transfer.value = e.target.innerText 10 | transfer.select() 11 | if (document.execCommand) { 12 | document.execCommand('copy') 13 | if (message && message.close) { 14 | message.close() 15 | } 16 | message = $Msg.success('Copy succeeded') 17 | } 18 | document.body.removeChild(transfer) 19 | } 20 | -------------------------------------------------------------------------------- /Doc/src/views/en/api.md: -------------------------------------------------------------------------------- 1 | # API 2 | 3 | ## DESTROYED INSTANCE 4 | 5 | **Deletion by Query**, If no parameters are provided, **destroyed All** 6 | 7 | ```js 8 | import {destroy} from "better-datepicker" 9 | 10 | const picker1 = createDatePicker('#input1') 11 | 12 | const picker1 = createDatePickerc('#input2') 13 | destroy([picker1,picker2]) // destroyed picker1 and picker 2 14 | destroy() //destroyed all 15 | ``` 16 | 17 | ## TODO 18 | -------------------------------------------------------------------------------- /Doc/src/views/en/basic.md: -------------------------------------------------------------------------------- 1 | Datepicker options 2 | 3 | ## format 4 | 5 | ::: 6 | 7 | ```html 8 | 9 | 15 | 16 | ``` 17 | 18 | ::: 19 | 20 | ## placement 21 | 22 | ::: 23 | 24 | ```html 25 | 26 | 30 | 31 | ``` 32 | 33 | ::: 34 | 35 | ## offset 36 | 37 | ::: 38 | 39 | ```html 40 | 41 | 48 | 49 | ``` 50 | 51 | ::: 52 | 53 | ## binding 54 | 55 | ::: Whether to bind the value of the inputElement 56 | 57 | ```html 58 | 59 | 65 | 66 | ``` 67 | 68 | ::: 69 | 70 | ## disabledDate 71 | 72 | ::: 73 | 74 | ```html 75 | 76 | 84 | 85 | ``` 86 | 87 | ::: 88 | 89 | ::: 90 | 91 | ## insertTo 92 | 93 | ::: **Set** the DOM node that the picker insertTo, *body/parent* 94 | 95 | ```html 96 | 97 | 104 | 105 | ``` 106 | 107 | ::: 108 | 109 | ## Theme 110 | 111 | ::: 112 | 113 | ```html 114 | 115 | 125 | 126 | ``` 127 | 128 | ::: 129 | 130 | ## Todo 131 | 132 | ::: Support *ClassName*、*Style*、*Size*、*unlinkPanels*、*zIndex*、*more format*、*readonly* 133 | 134 | ```html 135 | 136 | ::: 137 | -------------------------------------------------------------------------------- /Doc/src/views/en/home.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ## START 6 | 7 | Import styles, **or you can customize theme colors** [Here](#/en/doc/theme) 8 | 9 | ```js 10 | import {createDatePicker} from 'better-datepicker' 11 | import 'better-datepicker/dist/index.css' 12 | 13 | ``` 14 | 15 | you can also 16 | 17 | ```html 18 |
19 | Including children, find the first inputElement 20 | 21 |
22 | ``` 23 | 24 | ```js 25 | const input = document.querySelector('#wrapper') 26 | createDatePicker(input) 27 | ``` 28 | 29 | ## OPTIONS 30 | 31 | *createDatePicker* accepts two parameters. The first is the **InputElement**, and the second is the **configuration 32 | item**. For more details [Here](#/en/doc/options) 33 | 34 | ```js 35 | const input = document.querySelector('#input') 36 | createDatePicker(input,{ 37 | placement: 'bottom', 38 | type: 'date', 39 | zIndex: 2000, 40 | format: 'yyyy/MM/dd' 41 | }) 42 | ``` 43 | 44 | ## METHODS 45 | 46 | ```js 47 | const input = document.querySelector('#input') 48 | const picker = createDatePicker(input) 49 | 50 | picker.destroyed() //destroyed the datepicker 51 | 52 | picker.update({placement: 'top'}) //Update configuration, destroyed old datepicker 53 | 54 | picker.onChange((date)=>{ 55 | console.log('The current date is ' + date) 56 | }) 57 | 58 | picker.getCurrentDate() 59 | 60 | picker.open() // to open picker 61 | 62 | picker.close() // to close picker 63 | 64 | picker.clear() // to clear picker 65 | 66 | //more 67 | ``` 68 | 69 | ## Locale 70 | 71 | **global config** 72 | 73 | ```js 74 | import {locale} from "better-datepicker" 75 | import zhCn from 'better-datepicker/dist/locale_es/zh-cn' // es 76 | //require('better-datepicker/dist/locale_umd/zh-cn') // cjs 77 | locale(zhCn) 78 | ``` 79 | 80 | or 81 | 82 | ```js 83 | const localeConfig = { 84 | name: "en", 85 | weekStart: 0, 86 | yearStart: 1, 87 | weekdays: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 88 | months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 89 | yearFormat: "yyyy", 90 | weekFormat: 'yyyy-ww' 91 | } 92 | locale(en) 93 | ``` 94 | 95 | ## destroy 96 | 97 | ```js 98 | import {destroy} from "better-datepicker" 99 | 100 | const picker1 = createDatePicker('#input1') 101 | 102 | const picker1 = createDatePickerc('#input2') 103 | destroy([picker1,picker2]) // destroyed picker1 and picker 2 104 | destroy() //destroyed all 105 | ``` 106 | 107 | ## TODOLIST 108 | 109 | | versions | Description| 110 | |---------|------------ | 111 | | 0.5.0 | support unlinkPanels、zIndex、readonly、default-value、className、style、size .... | 112 | | 0.7.0 | support extends plugins | 113 | | 0.9.0 | support time picker | 114 | -------------------------------------------------------------------------------- /Doc/src/views/en/locale.md: -------------------------------------------------------------------------------- 1 | # Locale 2 | 3 | We provide some regional profiles 4 | 5 | ```js 6 | import {locale} from "better-datepicker" 7 | import zhCn from 'better-datepicker/dist/locale_es/zh-cn' // es 8 | //require('better-datepicker/dist/locale_umd/zh-cn') // cjs 9 | locale(zhCn) 10 | ``` 11 | 12 | or you can add it yourself, pull request 13 | 14 | ```js 15 | const localeConfig = { 16 | name: "en", 17 | weekStart: 0, 18 | yearStart: 1, 19 | weekdays: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 20 | months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 21 | yearFormat: "yyyy", 22 | weekFormat: 'yyyy-ww' 23 | } 24 | locale(en) 25 | ``` 26 | 27 | | Locale/Language | Abbreviation/Link | 28 | | ----------------- | -------------------------------- | 29 | | Afghanistan | [af](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/af.ts) | 30 | | Brazil | [br](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/br.ts) | 31 | | English | [en](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/en.ts) | 32 | | Australia | [en-au](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/en-au.ts) | 33 | | Canada | [en-au](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/en-ca.ts) | 34 | | England | [en-gb](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/en-gb.ts) | 35 | | Ireland | [en-ie](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/en-ie.ts) | 36 | | Spain | [es](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/es.ts) | 37 | | Finland | [fi](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/fi.ts) | 38 | | Angola | [fo](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/fo.ts) | 39 | | Faroe Islands | [fr](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/fr.ts) | 40 | | Croatia | [hr](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/hr.ts) | 41 | | Haiti | [ht](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/ht.ts) | 42 | | Italy | [it](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/it.ts) | 43 | | Japan | [ja](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/ja.ts) | 44 | | Korea(South) | [ko](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/ko.ts) | 45 | | Kuwait | [ku](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/ku.ts) | 46 | | Lebanon | [lb](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/lb.ts) | 47 | | Laos | [lo](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/lo.ts) | 48 | | Ukraine | [uk](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/uk.ts) | 49 | | Uzbekistan | [uz](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/uz.ts) | 50 | | Chinese | [zh](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/zh.ts) | 51 | | Simplified Chinese | [zh-cn](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/zh-cn.ts) | 52 | | Hong Kong China | [zh-hk](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/zh-hk.ts) | 53 | | Taiwan China | [zh-tw](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/zh-tw.ts) | 54 | 55 |
56 | -------------------------------------------------------------------------------- /Doc/src/views/en/method.md: -------------------------------------------------------------------------------- 1 | Instance method 2 | 3 | ## clear 4 | 5 | ::: **clear** date and InputElement value 6 | 7 | ```html 8 |
9 | 10 | clear 11 |
12 | 18 | 19 | ``` 20 | 21 | ::: 22 | 23 | ## destroyed 24 | 25 | ::: **destroyed** the datepicker, Instance methods are not available except *update* 26 | 27 | ```html 28 |
29 | 30 | destroyed 31 |
32 | 37 | 38 | ``` 39 | 40 | ::: 41 | 42 | ## update 43 | 44 | ::: **update** the datepicker 45 | 46 | ```html 47 |
48 | 49 | update 50 |
51 | 56 | 57 | ``` 58 | 59 | ::: 60 | 61 | ## onChange 62 | 63 | ::: It supports passing in a **callback**, which will be call after date change 64 | 65 | ```html 66 |
67 | 68 |
69 | 76 | 77 | ``` 78 | 79 | ::: 80 | 81 | ## getCurrentDate 82 | 83 | ::: **getCurrentDate** 84 | 85 | ```html 86 |
87 | 88 | get date 89 |
90 | 100 | 101 | ``` 102 | 103 | ::: 104 | 105 | ## open/close 106 | 107 | ::: **Manual open/close** 108 | If *open/close* is executed in the event listener callback. please use **e.stopPropagation()** to prevent events from 109 | bubbling onto the **Body** 110 | 111 | ```html 112 |
113 | 114 | open 115 |
116 | 123 | 124 | ``` 125 | 126 | ::: 127 | -------------------------------------------------------------------------------- /Doc/src/views/en/options.md: -------------------------------------------------------------------------------- 1 | # Options 2 | 3 | configuration of better-datepicker 4 | 5 | ```js 6 | const input = document.querySelector('#input') 7 | const options = { 8 | placement: 'bottom', 9 | type: 'date', 10 | zIndex: 2000, 11 | format: 'yyyy/MM/dd', 12 | } 13 | createDatePicker(input,options) 14 | ``` 15 | 16 | **Global config** 17 | 18 | ``` 19 | import {locale,defaultOptions} from 'better-datepicker' 20 | defaultOptions({ 21 | themeColor: '#1890ff', 22 | rangeBgColor: '#e6f7ff', 23 | tdColor: '#5f5f5f', 24 | thColor: '#5f5f5f' 25 | }) 26 | ``` 27 | 28 | | Property | Description | Type | Accepted Values | Default | 29 | | ----------------- | -------------------------------- | --------------- | ------ | ------ | 30 | | type | Type of datepicker | string | date/date-range/month/month-range/year/year-range/week | date | 31 | | format | To set the date format | string | - | yyyy/MM/dd | 32 | | classes | To set the picker wrapper classes(**It will have a logo prefix: better-datepicker**) | string[] | - | - | 33 | | zIndex | z-index of Picker | number | - | 2000 34 | | style | To set the picker wrapper style(**zIndex Priority is lower than above**) | Object | - | - | 35 | | placement | Placement of datepicker | string | top/bottom/right/left | bottom | 36 | | disabledDate | Specifies the date that cannot be selected | function | - | - | 37 | | offset | Distance between Picker and inputElement | number | - | 12 | 38 | | insertTo | Name of the node inserted | string | body/parent | body | 39 | | binding | Bind the value of the inputElement | boolean | - | true | 40 | | themeColor | Theme color(selected、hover、range-start、range-end), like *#2ECC71* | string | - | - 41 | | rangeBgColor | The backgroundColor that element is in range ,It's usually lighter than the themeColor | string | - | - 42 | | tdColor | Td text color | string | - | - 43 | | thColor | Th text color | string | - | - 44 | 45 | ## TODO 46 | 47 | -------------------------------------------------------------------------------- /Doc/src/views/en/start.md: -------------------------------------------------------------------------------- 1 | # START 2 | 3 | First, use **npm** or **yarn** to install *better-datepicker* 4 | 5 | ```shell script 6 | npm install better-datepicker 7 | yarn add better-datepicker 8 | ``` 9 | 10 | Then, import *better-datepicker* and css 11 | 12 | ```js 13 | import {createDatePicker} from 'better-datepicker' 14 | import 'better-datepicker/dist/index.css' 15 | ``` 16 | 17 | ## CreateDatePicker 18 | 19 | createDatePicker accepts two parameters. The first is the InputElement, and the second is the configuration item. 20 | 21 | ``` 22 | const input = document.querySelector('#input') 23 | const picker = createDatePicker(input,{ 24 | type: 'week', 25 | offset: 20, 26 | placement: 'bottom' 27 | }) 28 | ``` 29 | 30 | ## defaultOptions 31 | 32 | ``` 33 | import {locale,defaultOptions} from 'better-datepicker' 34 | defaultOptions({ 35 | themeColor: '#1890ff', 36 | rangeBgColor: '#e6f7ff', 37 | tdColor: '#5f5f5f', 38 | thColor: '#5f5f5f' 39 | }) 40 | ``` 41 | 42 | ## locale 43 | 44 | ``` 45 | import {locale} from 'better-datepicker' 46 | import ZH from 'better-datepicker/dist/locale_es/zh-cn' 47 | locale(ZH) 48 | ``` 49 | 50 | 51 | -------------------------------------------------------------------------------- /Doc/src/views/en/theme.md: -------------------------------------------------------------------------------- 1 | # Theme 2 | 3 | We provide 3 ways for custom theme. For now we only support custom of **color**, totally there are 5 colors 4 | 5 | ## SCSS Variables 6 | 7 | `better-datepicker` uses **SCSS** as a pre-compiled language for the selector, you can modify it by 8 | downloading 9 | scss code directly. 10 | 11 | Of course, you need to use *loader* to parse the code. 12 | 13 | ```scss 14 | $theme-color: #2ECC71; 15 | $range-color: #eafaf1; 16 | $text-header-color: #858585; 17 | $text-th-color: #969595; 18 | $text-tbody-color: #5f5f5f; 19 | ``` 20 | 21 | ## Style Configuration 22 | 23 | After configuring the style on this page, you can download the css code and put it into your project file and import it. 24 | 25 | 26 | 27 | ## Options 28 | 29 | ```js 30 | import {defaultOptions} from "better-datepicker" 31 | defaultOptions({ 32 | themeColor: '#1890ff', 33 | rangeBgColor: '#e6f7ff', 34 | tdColor: '#5f5f5f', 35 | thColor: '#5f5f5f' 36 | }) 37 | ``` 38 | 39 | or 40 | 41 | only changes theme of the **current instance** 42 | 43 | ```js 44 | const input = document.querySelector('#input') 45 | const instance = createDatePicker(input,{ 46 | themeColor: '#2a3a4a', 47 | rangeBgColor: '#bbbbbb', 48 | tdColor: '#5f5f5f', 49 | thColor: '#5f5f5f' 50 | }) 51 | 52 | ``` 53 | -------------------------------------------------------------------------------- /Doc/src/views/en/type.md: -------------------------------------------------------------------------------- 1 | datepicker Type 2 | 3 | ## Date 4 | 5 | ::: Default mode is Date, the basic unit is [day] 6 | 7 | ```html 8 | 9 | 14 | 15 | ``` 16 | 17 | ::: 18 | 19 | ## Date-range 20 | 21 | ::: **date-range** mode can choose the start time and the end time. 22 | 23 | ```html 24 | 25 | 31 | 32 | ``` 33 | 34 | ::: 35 | 36 | ## Month 37 | 38 | ::: The basic unit is [month], and the date you choose is accurate to [day], which is the first day of the month 39 | 40 | ```html 41 | 42 | 48 | 49 | ``` 50 | 51 | ::: 52 | 53 | ## Month-range 54 | 55 | ::: The basic unit is [month], and the range you choose is a **month range** 56 | 57 | ```html 58 | 59 | 65 | 66 | ``` 67 | 68 | ::: 69 | 70 | ## Year 71 | 72 | ::: 73 | 74 | ```html 75 | 76 | 83 | 84 | ``` 85 | 86 | ::: 87 | 88 | ::: 89 | 90 | ## Year-range 91 | 92 | ::: 93 | 94 | ```html 95 | 96 | 103 | 104 | ``` 105 | 106 | ::: 107 | 108 | ## Week 109 | 110 | ::: 111 | 112 | ```html 113 | 114 | 122 | 123 | ``` 124 | 125 | ::: 126 | -------------------------------------------------------------------------------- /Doc/src/views/zh/api.md: -------------------------------------------------------------------------------- 1 | # API 2 | 3 | ## 删除实例 4 | 5 | **批量删除**, 如果不传参数, **则删除所有实例** 6 | 7 | ```js 8 | import {destroy} from "better-datepicker" 9 | 10 | const picker1 = createDatePicker('#input1') 11 | 12 | const picker1 = createDatePickerc('#input2') 13 | destroy([picker1,picker2]) // destroyed picker1 and picker 2 14 | destroy() //destroyed all 15 | ``` 16 | 17 | ## TODO 18 | -------------------------------------------------------------------------------- /Doc/src/views/zh/basic.md: -------------------------------------------------------------------------------- 1 | Datepicker options 基础配置 2 | 3 | ## format 4 | 5 | ::: 输入框值**格式**， 如果设置带有*ww/w*，当前日期会改为**当周第一天**绑定到输入框 6 | 7 | ```html 8 | 9 | 15 | 16 | ``` 17 | 18 | ::: 19 | 20 | ## placement 21 | 22 | ::: 弹出框的**位置** 23 | 24 | ```html 25 | 26 | 30 | 31 | ``` 32 | 33 | ::: 34 | 35 | ## offset 36 | 37 | ::: 弹出框距离输入框的距离 38 | 39 | ```html 40 | 41 | 48 | 49 | ``` 50 | 51 | ::: 52 | 53 | ## binding 54 | 55 | ::: 是否**绑定**到输入框的值 56 | 57 | ```html 58 | 59 | 65 | 66 | ``` 67 | 68 | ::: 69 | 70 | ## disabledDate 71 | 72 | ::: **禁用**的日期 73 | 74 | ```html 75 | 76 | 84 | 85 | ``` 86 | 87 | ::: 88 | 89 | ::: 90 | 91 | ## insertTo 92 | 93 | ::: 设置弹出框的父节点，当前只接受 *body/parent*, 后续版本会增加接受一个**dom节点** 94 | 95 | ```html 96 | 97 | 104 | 105 | ``` 106 | 107 | ::: 108 | 109 | ## Theme 110 | 111 | ::: **配置**主题 112 | 113 | ```html 114 | 115 | 125 | 126 | ``` 127 | 128 | ::: 129 | 130 | ## Todo 131 | 132 | ::: Support *ClassName*、*Style*、*Size*、*unlinkPanels*、*zIndex*、*more format*、*readonly* 133 | 134 | ```html 135 | 136 | ::: 137 | -------------------------------------------------------------------------------- /Doc/src/views/zh/home.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ## START 6 | 7 | 引入样式, **或者你可以自定义主题颜色** [这里](#/en/doc/theme) 8 | 9 | ```js 10 | import {createDatePicker} from 'better-datepicker' 11 | import 'better-datepicker/dist/index.css' 12 | 13 | const input = document.querySelector('#input') 14 | createDatePicker(input) 15 | ``` 16 | 17 | 你同样可以 18 | 19 | ```html 20 |
21 | 如果传入的dom节点不是Input元素，则会在子元素里面逐级寻找 22 | 23 |
24 | ``` 25 | 26 | ```js 27 | const input = document.querySelector('#wrapper') 28 | createDatePicker(input) 29 | ``` 30 | 31 | ## OPTIONS 32 | 33 | *createDatePicker* 接受两个参数 第一个是需要绑定的**输入框节点**, 第二个是选择器局部配置[更多详情](#/en/doc/options) 34 | 35 | ```js 36 | const input = document.querySelector('#input') 37 | createDatePicker(input,{ 38 | placement: 'bottom', 39 | type: 'date', 40 | zIndex: 2000, 41 | format: 'yyyy/MM/dd' 42 | }) 43 | ``` 44 | 45 | ## METHODS 实例方法 46 | 47 | ```js 48 | const input = document.querySelector('#input') 49 | const picker = createDatePicker(input) 50 | 51 | picker.destroyed() //destroyed the datepicker 52 | 53 | picker.update({placement: 'top'}) //Update configuration, destroyed old datepicker 54 | 55 | picker.onChange((date)=>{ 56 | console.log('The current date is ' + date) 57 | }) 58 | 59 | picker.getCurrentDate() 60 | 61 | picker.open() // to open picker 62 | 63 | picker.close() // to close picker 64 | 65 | picker.clear() 66 | 67 | //more 68 | ``` 69 | 70 | ## Locale 地区 71 | 72 | **全局配置** 73 | 74 | ```js 75 | import {locale} from "better-datepicker" 76 | import zhCn from 'better-datepicker/dist/locale_es/zh-cn' // es 77 | //require('better-datepicker/dist/locale_umd/zh-cn') // cjs 78 | locale(zhCn) 79 | ``` 80 | 81 | 如果安装包没有提供的地区文件，可以自定义 82 | 83 | ```js 84 | const localeConfig = { 85 | name: "en", 86 | weekStart: 0, 87 | yearStart: 1, 88 | weekdays: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 89 | months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 90 | yearFormat: "yyyy", 91 | weekFormat: 'yyyy-ww' 92 | } 93 | locale(en) 94 | ``` 95 | 96 | ## destroy 删除所有实例 97 | 98 | ```js 99 | import {destroy} from "better-datepicker" 100 | 101 | const picker1 = createDatePicker('#input1') 102 | 103 | const picker1 = createDatePickerc('#input2') 104 | destroy([picker1,picker2]) // 删除 picker1 和 picker 2 105 | destroy() // 如果不传参，则默认是删除所有实例 106 | ``` 107 | 108 | ## TODOLIST 109 | 110 | | versions | Description| 111 | |---------|------------ | 112 | | 0.5.0 | support unlinkPanels、zIndex、readonly、default-value、className、style、size .... | 113 | | 0.7.0 | support extends plugins | 114 | | 0.9.0 | support time picker | 115 | -------------------------------------------------------------------------------- /Doc/src/views/zh/locale.md: -------------------------------------------------------------------------------- 1 | # Locale 地区设置 2 | 3 | 安装包提供一部分地区静态配置文件 4 | 5 | ```js 6 | import {locale} from "better-datepicker" 7 | import zhCn from 'better-datepicker/dist/locale_es/zh-cn' // es 8 | //require('better-datepicker/dist/locale_umd/zh-cn') // cjs 9 | locale(zhCn) 10 | ``` 11 | 12 | 如果安装包没有提供的地区文件，可以自定义 13 | 14 | ```js 15 | const localeConfig = { 16 | name: "en", 17 | weekStart: 0, 18 | yearStart: 1, 19 | weekdays: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 20 | months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 21 | yearFormat: "yyyy", 22 | weekFormat: 'yyyy-ww' 23 | } 24 | locale(en) 25 | ``` 26 | 27 | | 地区/语言 | 缩写/链接 | 28 | | ----------------- | -------------------------------- | 29 | | 阿富汗 | [af](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/af.ts) | 30 | | 巴西 | [br](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/br.ts) | 31 | | 英语 | [en](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/en.ts) | 32 | | 澳大利亚 | [en-au](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/en-au.ts) | 33 | | 加拿大 | [en-au](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/en-ca.ts) | 34 | | 英国 | [en-gb](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/en-gb.ts) | 35 | | 爱尔兰 | [en-ie](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/en-ie.ts) | 36 | | 西班牙 | [es](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/es.ts) | 37 | | 芬兰 | [fi](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/fi.ts) | 38 | | 法罗群岛 | [fo](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/fo.ts) | 39 | | 法国 | [fr](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/fr.ts) | 40 | | 克罗地亚 | [hr](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/hr.ts) | 41 | | 海地 | [ht](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/ht.ts) | 42 | | 意大利 | [it](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/it.ts) | 43 | | 日本 | [ja](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/ja.ts) | 44 | | 韩国 | [ko](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/ko.ts) | 45 | | 科威特 | [ku](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/ku.ts) | 46 | | 黎巴嫩 | [lb](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/lb.ts) | 47 | | 老挝 | [lo](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/lo.ts) | 48 | | 乌克兰 | [uk](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/uk.ts) | 49 | | 乌兹别克斯坦 | [uz](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/uz.ts) | 50 | | 中文 | [zh](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/zh.ts) | 51 | | 简体中文 | [zh-cn](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/zh-cn.ts) | 52 | | 中国香港 | [zh-hk](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/zh-hk.ts) | 53 | | 中国台湾 | [zh-tw](https://github.com/Js-Monkey/better-datepicker/blob/master/locale/zh-tw.ts) | 54 | 55 |
56 | -------------------------------------------------------------------------------- /Doc/src/views/zh/method.md: -------------------------------------------------------------------------------- 1 | 示例方法 2 | 3 | ## clear 4 | 5 | ::: **清除** 日期和输入框的值 6 | 7 | ```html 8 |
9 | 10 | clear 11 |
12 | 17 | 18 | ``` 19 | 20 | ::: 21 | 22 | ## destroyed 23 | 24 | ::: **销毁**选择器，移除弹出框节点，数据将从内部移除。实例不会被清空，但所有函数都会**不可用** 25 | 26 | ```html 27 |
28 | 29 | destroyed 30 |
31 | 36 | 37 | ``` 38 | 39 | ::: 40 | 41 | ## update 42 | 43 | ::: **更新**选择器的配置，事实上它等于 *destroyed + create*, 之前的弹出框节点会被移除 44 | 45 | ```html 46 |
47 | 48 | update 49 |
50 | 55 | 56 | ``` 57 | 58 | ::: 59 | 60 | ## onChange 61 | 62 | ::: 支持传入一个回调函数， 在选择日期变化后，会触发这个回调 63 | 64 | ```html 65 |
66 | 67 |
68 | 75 | 76 | ``` 77 | 78 | ::: 79 | 80 | ## getCurrentDate 81 | 82 | ::: 获取当前选择的日期，如果不存在则返回**null** 83 | 84 | ```html 85 |
86 | 87 | get date 88 |
89 | 99 | 100 | ``` 101 | 102 | ::: 103 | 104 | ## open/close 105 | 106 | ::: **手动触发 open/close** 107 | 需要注意的是，如果在点击事件监听回调函数中使用这两个函数，会触发组件自带的*clickoutside*,导致**不生效** 108 | 或可以使用**e.stopPropagation()** 使点击事件不再冒泡到*body上面* 109 | 110 | ```html 111 |
112 | 113 | open 114 |
115 | 122 | 123 | ``` 124 | 125 | ::: 126 | -------------------------------------------------------------------------------- /Doc/src/views/zh/options.md: -------------------------------------------------------------------------------- 1 | # Options 2 | 3 | 日期选择器配置 4 | 5 | ```js 6 | const input = document.querySelector('#input') 7 | const options = { 8 | placement: 'bottom', 9 | type: 'date', 10 | zIndex: 2000, 11 | format: 'yyyy/MM/dd', 12 | } 13 | createDatePicker(input,options) 14 | ``` 15 | 16 | | Property | Description | Type | Accepted Values | Default | 17 | | ----------------- | -------------------------------- | --------------- | ------ | ------ | 18 | | type | 选择器类型 | string | date/date-range/month/month-range/year/year-range/week | date 19 | | format | 格式 | string | - | yyyy/MM/d 20 | | classes | 设置弹出框的classes，**注意，这会携带logo前缀 better-datepicker** | string[] | - | - | 21 | | zIndex | 设置弹出框的z-index | number | - | 2000 22 | | style | 设置弹出框的样式，**需要注意类似z-index这种优先级没有上面高** | Object | - | - | 23 | | offset | 距离输入框的距离 | number | - | 12 24 | | insertTo | 设置弹出框的父节点，设置*body*可以规避 *overflow: hidden* | string | body/parent | body 25 | | binding | 选择日期后是否改变输入框的值 | boolean | - | true 26 | | disabledDate | 决定日期是否被禁用 | Function | - | - 27 | | disabled | 是否禁用整个输出框 | boolean | - | false 28 | | placement | 弹出框弹出的位置 | string | top/bottom/right/left | bottom 29 | | themeColor | 主题颜色(selected、hover、range-start、range-end), like * 30 | #2ECC71* | string | - | - 31 | | rangeBgColor | 处于时间范围的背景色 | string | - | - 32 | | tdColor | Td文字颜色 | string | - | - 33 | | thColor | Th文字颜色 | string | - | - 34 | 35 | ## TODO 36 | 37 | -------------------------------------------------------------------------------- /Doc/src/views/zh/start.md: -------------------------------------------------------------------------------- 1 | # START 2 | 3 | 首先使用 **npm** 或者 **yarn** 安装 *better-datepicker* 4 | 5 | ```shell script 6 | npm install better-datepicker 7 | yarn add better-datepicker 8 | ``` 9 | 10 | 然后引入 *better-datepicker* 和 *css文件* 11 | 12 | ```js 13 | import {createDatePicker} from 'better-datepicker' 14 | import 'better-datepicker/dist/index.css' 15 | ``` 16 | 17 | ## CreateDatePicker 创建日期选择器 18 | 19 | *createDatePicker*接受两个参数 **输出框节点**和**局部配置** 20 | 21 | ``` 22 | const input = document.querySelector('#input') 23 | const picker = createDatePicker(input,{ 24 | type: 'week', 25 | offset: 20, 26 | placement: 'bottom' 27 | }) 28 | ``` 29 | 30 | ## defaultOptions 全局默认配置 31 | 32 | ``` 33 | import {locale,defaultOptions} from 'better-datepicker' 34 | defaultOptions({ 35 | themeColor: '#1890ff', 36 | rangeBgColor: '#e6f7ff', 37 | tdColor: '#5f5f5f', 38 | thColor: '#5f5f5f' 39 | }) 40 | ``` 41 | 42 | ## locale 地区配置 43 | 44 | ``` 45 | import {locale} from 'better-datepicker' 46 | import ZH from 'better-datepicker/dist/locale_es/zh-cn' 47 | locale(ZH) 48 | ``` 49 | -------------------------------------------------------------------------------- /Doc/src/views/zh/theme.md: -------------------------------------------------------------------------------- 1 | # Theme 主题 2 | 3 | 提供三种方式用于修改*主题* 4 | 5 | ## SCSS Variables 6 | 7 | `better-datepicker` uses **SCSS** as a pre-compiled language for the selector, you can modify it by 8 | downloading 9 | scss code directly. 10 | 11 | Of course, you need to use *loader* to parse the code. 12 | 13 | ```scss 14 | $theme-color: #2ECC71; 15 | $range-color: #eafaf1; 16 | $text-header-color: #858585; 17 | $text-th-color: #969595; 18 | $text-tbody-color: #5f5f5f; 19 | ``` 20 | 21 | ## Style Configuration 配置下载 22 | 23 | 配置完成后，下载引入 24 | 25 | 26 | 27 | ## Options 全局配置 28 | 29 | ```js 30 | import {defaultOptions} from "better-datepicker" 31 | defaultOptions({ 32 | themeColor: '#1890ff', 33 | rangeBgColor: '#e6f7ff', 34 | tdColor: '#5f5f5f', 35 | thColor: '#5f5f5f' 36 | }) 37 | ``` 38 | 39 | 或者局部配置 40 | 41 | ```js 42 | const input = document.querySelector('#input') 43 | const instance = createDatePicker(input,{ 44 | themeColor: '#2a3a4a', 45 | rangeBgColor: '#bbbbbb', 46 | tdColor: '#5f5f5f', 47 | thColor: '#5f5f5f' 48 | }) 49 | 50 | ``` 51 | -------------------------------------------------------------------------------- /Doc/src/views/zh/type.md: -------------------------------------------------------------------------------- 1 | datepicker Type 选择器类型 2 | 3 | ## Date 4 | 5 | ::: 默认值是*date*, 单位是[**日**] 6 | 7 | ```html 8 | 9 | 13 | 14 | ``` 15 | 16 | ::: 17 | 18 | ## Date-range 19 | 20 | ::: 选择时间范围，单位是[**日**] 21 | 22 | ```html 23 | 24 | 30 | 31 | ``` 32 | 33 | ::: 34 | 35 | ## Month 36 | 37 | ::: 基础单位是[**月**]，日期是选择月份的**第一天** 38 | 39 | ```html 40 | 41 | 47 | 48 | ``` 49 | 50 | ::: 51 | 52 | ## Month-range 53 | 54 | ::: 选择时间范围，单位是[**月**] 55 | 56 | ```html 57 | 58 | 64 | 65 | ``` 66 | 67 | ::: 68 | 69 | ## Year 70 | 71 | ::: 单位是[**年**] 72 | 73 | ```html 74 | 75 | 82 | 83 | ``` 84 | 85 | ::: 86 | 87 | ::: 88 | 89 | ## Year-range 90 | 91 | ::: 选择时间范围，单位是[**年**] 92 | 93 | ```html 94 | 95 | 102 | 103 | ``` 104 | 105 | ::: 106 | 107 | ## Week 108 | 109 | ::: 得到的日期即是选择的日期，单位是[**日**]。输入框绑定的值是选择日期那周**第一天的周数**，可以被**format**覆盖。 值得注意的时候，如果**format** 包含*w*或者*ww* 110 | ,那么最终处理显示在输入框上的日期依然会被设为当前周的第一天，当然，这不影响你选择日期的值。 111 | 112 | ```html 113 | 114 | 122 | 123 | ``` 124 | 125 | ::: 126 | -------------------------------------------------------------------------------- /Doc/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "moduleResolution": "node", 4 | "target": "es5", 5 | "module": "esnext", 6 | "lib": [ 7 | "es2015", 8 | "es2016", 9 | "es2017", 10 | "dom" 11 | ], 12 | "strict": true, 13 | "sourceMap": true, 14 | "declaration": true, 15 | "allowSyntheticDefaultImports": true, 16 | "experimentalDecorators": true, 17 | "emitDecoratorMetadata": true, 18 | "noImplicitThis": false, 19 | "declarationDir": "./dist/types", 20 | "outDir": "./dist/lib", 21 | "typeRoots": [ 22 | "./node_modules/@types" 23 | ] 24 | }, 25 | "include": [ 26 | "./src", 27 | "../build" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Monkey 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Js-Monkey/datepicker/1199144b4e7d54f1893de5c1e8dcebb07571a9e2/README.md -------------------------------------------------------------------------------- /build/gulpfile.ts: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const {series, src, dest} = require('gulp') 4 | const sass = require('gulp-dart-sass') 5 | const cssmin = require('gulp-cssmin') 6 | const rename = require('gulp-rename') 7 | 8 | function compile() { 9 | return src('../src/assets/*.scss') 10 | .pipe(sass.sync()) 11 | .pipe(rename(function (path: any) { 12 | path.basename = "index" 13 | path.extname = ".css" 14 | })) 15 | .pipe(cssmin()) 16 | .pipe(dest('../dist')) 17 | } 18 | 19 | exports.build = series(compile) 20 | -------------------------------------------------------------------------------- /build/jest.config.ts: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | transform: { 3 | '.(ts|tsx)': 'ts-jest' 4 | }, 5 | testEnvironment: 'jsdom', 6 | testRegex: '/tests/.*\\.(test|spec)\\.(ts)$', 7 | moduleFileExtensions: ['ts', 'tsx', 'js'], 8 | coveragePathIgnorePatterns: ['/node_modules/', '/src/svg'], 9 | coverageThreshold: { 10 | global: { 11 | functions: 2, 12 | lines: 1, 13 | statements: 1 14 | } 15 | }, 16 | collectCoverageFrom: ['src/*.{ts}', 'src/**/*.{js,ts}'] 17 | } 18 | -------------------------------------------------------------------------------- /build/locales.ts: -------------------------------------------------------------------------------- 1 | const json = require("rollup-plugin-json") 2 | const typescript = require("rollup-plugin-typescript2") 3 | const commonjs = require("rollup-plugin-commonjs") 4 | const resolve = require("rollup-plugin-node-resolve") 5 | const sourceMaps = require("rollup-plugin-sourcemaps") 6 | 7 | const {rollup} = require('rollup') 8 | const fs = require('fs') 9 | const {terser} = require('rollup-plugin-terser') 10 | 11 | 12 | async function build(option: any) { 13 | const bundle = await rollup(option.input) 14 | await bundle.write(option.output_es) 15 | await bundle.write(option.output_umd) 16 | } 17 | 18 | const rollupConfig = (config: any) => { 19 | const {input, fileName, name} = config 20 | return { 21 | input: { 22 | input, 23 | plugins: [ 24 | json(), 25 | typescript({useTsconfigDeclarationDir: true}), 26 | commonjs(), 27 | resolve(), 28 | sourceMaps(), 29 | terser() 30 | ], 31 | }, 32 | output_es: { 33 | file: './dist/locale_es/' + fileName, 34 | format: 'es', 35 | name 36 | }, 37 | output_umd: { 38 | file: './dist/locale_umd/' + fileName, 39 | format: 'umd', 40 | name 41 | } 42 | } 43 | } 44 | 45 | (async () => { 46 | try { 47 | const locales = await fs.readdirSync('./locale') 48 | locales.forEach((l: string) => { 49 | build(rollupConfig({ 50 | input: `./locale/${l}`, 51 | fileName: l.replace('ts', 'js'), 52 | name: l.split('.ts').shift() 53 | })) 54 | }) 55 | await fs.readFile('./dist/types/index.d.ts', 'utf8', function (err: null, data: string) { 56 | if (err) { 57 | throw err; 58 | } 59 | const curData = data.replace(/\.\//g, './types/') 60 | fs.writeFile('./dist/index.d.ts', curData, 'utf8', function (error: null) { 61 | if (error) { 62 | throw error; 63 | } 64 | }); 65 | }) 66 | } catch (e) { 67 | console.error(e) 68 | } 69 | })() 70 | -------------------------------------------------------------------------------- /build/rollup.config.ts: -------------------------------------------------------------------------------- 1 | import resolve from 'rollup-plugin-node-resolve' 2 | import commonjs from 'rollup-plugin-commonjs' 3 | import sourceMaps from 'rollup-plugin-sourcemaps' 4 | import camelCase from 'lodash.camelcase' 5 | import typescript from 'rollup-plugin-typescript2' 6 | import json from 'rollup-plugin-json' 7 | 8 | const pkg = require('../package.json') 9 | import {terser} from 'rollup-plugin-terser' 10 | 11 | const libraryName = 'better-day-time-picker' 12 | const config = { 13 | input: ['src/index.ts'], 14 | output: [ 15 | {file: pkg.main, name: camelCase(libraryName), format: 'umd', sourcemap: false}, 16 | {file: pkg.module, format: 'es', sourcemap: false}, 17 | ], 18 | external: [], 19 | watch: { 20 | include: 'src/**', 21 | }, 22 | plugins: [ 23 | json(), 24 | typescript({useTsconfigDeclarationDir: true}), 25 | commonjs(), 26 | resolve(), 27 | sourceMaps(), 28 | terser() 29 | ], 30 | } 31 | 32 | export default config 33 | -------------------------------------------------------------------------------- /locale/af.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "af", 3 | weekStart: 1, 4 | months: ["Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Des"], 5 | weekdays: ["So", "Ma", "Di", "Wo", "Do", "Vr", "Sa"], 6 | weekFormat: 'yyyy-ww' 7 | }; 8 | -------------------------------------------------------------------------------- /locale/br.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "br", 3 | weekStart: 1, 4 | months: ["Gen", "Cʼhwe", "Meu", "Ebr", "Mae", "Eve", "Gou", "Eos", "Gwe", "Her", "Du", "Ker"], 5 | weekdays: ["Su", "Lu", "Me", "Mer", "Ya", "Gw", "Sa"], 6 | weekFormat: 'yyyy-ww' 7 | }; 8 | -------------------------------------------------------------------------------- /locale/en-au.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "en-au", 3 | weekStart: 1, 4 | months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 5 | weekdays: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 6 | weekFormat: 'yyyy-ww' 7 | }; 8 | -------------------------------------------------------------------------------- /locale/en-ca.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "en-ca", 3 | months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 4 | weekdays: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 5 | weekFormat: 'yyyy-ww' 6 | }; 7 | -------------------------------------------------------------------------------- /locale/en-gb.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "en-gb", 3 | months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 4 | weekdays: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 5 | weekFormat: 'yyyy-ww', 6 | weekStart: 1, 7 | yearStart: 4, 8 | }; 9 | -------------------------------------------------------------------------------- /locale/en-ie.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'en-ie', 3 | weekStart: 1, 4 | months: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'), 5 | weekdays: 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_'), 6 | } 7 | -------------------------------------------------------------------------------- /locale/en.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "en", 3 | weekStart: 0, 4 | weekdays: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 5 | months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 6 | yearFormat: "yyyy", 7 | weekFormat: 'yyyy-ww' 8 | }; 9 | -------------------------------------------------------------------------------- /locale/es.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "es", 3 | months: ["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"], 4 | weekdays: ["do", "lu", "ma", "mi", "ju", "vi", "sá"], 5 | weekStart: 1, 6 | weekFormat: 'yyyy-ww' 7 | }; 8 | -------------------------------------------------------------------------------- /locale/fi.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "fi", 3 | weekdays: ["su", "ma", "ti", "ke", "to", "pe", "la"], 4 | months: ["tammi", "helmi", "maalis", "huhti", "touko", "kesä", "heinä", "elo", "syys", "loka", "marras", "joulu"], 5 | weekStart: 1, 6 | weekFormat: 'yyyy-ww', 7 | yearStart: 4 8 | }; 9 | -------------------------------------------------------------------------------- /locale/fo.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "fo", 3 | weekStart: 1, 4 | months: ["jan", "feb", "mar", "apr", "mai", "jun", "jul", "aug", "sep", "okt", "nov", "des"], 5 | weekdays: ["su", "má", "tý", "mi", "hó", "fr", "le"], 6 | weekFormat: 'yyyy-ww' 7 | }; 8 | -------------------------------------------------------------------------------- /locale/fr.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "fr", 3 | weekdays: ["di", "lu", "ma", "me", "je", "ve", "sa"], 4 | months: ["janv.", "févr.", "mars", "avr.", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."], 5 | weekStart: 1, 6 | weekFormat: 'yyyy-ww', 7 | yearStart: 4, 8 | }; 9 | -------------------------------------------------------------------------------- /locale/hr.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "hr", 3 | weekdays: ["ne", "po", "ut", "sr", "če", "pe", "su"], 4 | months: ["sij.", "velj.", "ožu.", "tra.", "svi.", "lip.", "srp.", "kol.", "ruj.", "lis.", "stu.", "pro."], 5 | weekStart: 1, 6 | weekFormat: 'yyyy-ww' 7 | }; 8 | -------------------------------------------------------------------------------- /locale/ht.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "ht", 3 | months: ["jan.", "fev.", "mas", "avr.", "me", "jen", "jiyè.", "out", "sept.", "okt.", "nov.", "des."], 4 | weekdays: ["di", "le", "ma", "mè", "je", "va", "sa"], 5 | weekFormat: 'yyyy-ww' 6 | }; 7 | -------------------------------------------------------------------------------- /locale/it.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "it", 3 | weekdays: ["do", "lu", "ma", "me", "gi", "ve", "sa"], 4 | weekStart: 1, 5 | months: ["gen", "feb", "mar", "apr", "mag", "giu", "lug", "ago", "set", "ott", "nov", "dic"], 6 | weekFormat: 'yyyy-ww' 7 | }; 8 | -------------------------------------------------------------------------------- /locale/ja.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "ja", 3 | weekdays: "日_月_火_水_木_金_土".split("_"), 4 | months: "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"), 5 | weekFormat: 'yyyy-ww' 6 | }; 7 | -------------------------------------------------------------------------------- /locale/ko.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'ko', 3 | weekdays: ["일", "월", "화", "수", "목", "금", "토"], 4 | months: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"], 5 | weekFormat: 'yyyy-ww' 6 | } 7 | -------------------------------------------------------------------------------- /locale/ku.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'ku', 3 | weekStart: 6, 4 | months: ["کانونی دووەم", "شوبات", "ئازار", "نیسان", "ئایار", "حوزەیران", "تەمموز", "ئاب", "ئەیلوول", "تشرینی یەكەم", "تشرینی دووەم", "كانونی یەکەم"], 5 | weekdays: ["ی", "د", "س", "چ", "پ", "ه", "ش"], 6 | weekFormat: 'yyyy-ww' 7 | } 8 | -------------------------------------------------------------------------------- /locale/lb.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'lb', 3 | weekStart: 1, 4 | months: ["Jan.", "Febr.", "Mrz.", "Abr.", "Mee", "Jun.", "Jul.", "Aug.", "Sept.", "Okt.", "Nov.", "Dez."], 5 | weekdays: ["So", "Mé", "Dë", "Më", "Do", "Fr", "Sa"], 6 | weekFormat: 'yyyy-ww' 7 | } 8 | -------------------------------------------------------------------------------- /locale/lo.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'lo', 3 | months: ["ມັງກອນ", "ກຸມພາ", "ມີນາ", "ເມສາ", "ພຶດສະພາ", "ມິຖຸນາ", "ກໍລະກົດ", "ສິງຫາ", "ກັນຍາ", "ຕຸລາ", "ພະຈິກ", "ທັນວາ"], 4 | weekdays: ["ທ", "ຈ", "ອຄ", "ພ", "ພຫ", "ສກ", "ສ"], 5 | weekFormat: 'yyyy-ww' 6 | } 7 | -------------------------------------------------------------------------------- /locale/uk.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'uk', 3 | weekdays: 'нд_пн_вт_ср_чт_пт_сб'.split('_'), 4 | months: 'січ_лют_бер_квiт_трав_черв_лип_серп_вер_жовт_лист_груд'.split('_'), 5 | weekStart: 1, 6 | weekFormat: 'yyyy-ww' 7 | } 8 | -------------------------------------------------------------------------------- /locale/uz.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'uz', 3 | weekStart: 1, 4 | months: 'янв_фев_мар_апр_май_июн_июл_авг_сен_окт_ноя_дек'.split('_'), 5 | weekdays: 'Як_Ду_Се_Чо_Па_Жу_Ша'.split('_'), 6 | weekFormat: 'yyyy-ww' 7 | } 8 | -------------------------------------------------------------------------------- /locale/zh-cn.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'zh-cn', 3 | weekdays: '日_一_二_三_四_五_六'.split('_'), 4 | months: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'), 5 | weekStart: 1, 6 | yearFormat: 'yyyy年', 7 | weekFormat: 'yyyy-ww周', 8 | yearStart: 4, 9 | } 10 | -------------------------------------------------------------------------------- /locale/zh-hk.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'zh-hk', 3 | months: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'), 4 | weekdays: '日_一_二_三_四_五_六'.split('_'), 5 | yearFormat: 'yyyy年', 6 | weekFormat: 'yyyy-ww周' 7 | } 8 | -------------------------------------------------------------------------------- /locale/zh-tw.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'zh-tw', 3 | weekdays: '日_一_二_三_四_五_六'.split('_'), 4 | months: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'), 5 | } 6 | -------------------------------------------------------------------------------- /locale/zh.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'zh', 3 | weekdays: '日_一_二_三_四_五_六'.split('_'), 4 | months: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'), 5 | weekStart: 1, 6 | yearFormat: 'yyyy年', 7 | weekFormat: 'yyyy-ww周', 8 | yearStart: 4 9 | } 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "better-datepicker", 3 | "version": "0.2.0", 4 | "description": "better-datepicker", 5 | "main": "dist/betterDatePicker.umd.js", 6 | "module": "dist/betterDatePicker.es5.js", 7 | "scripts": { 8 | "dev": "vite", 9 | "build:demo": "vite build", 10 | "serve": "vite preview", 11 | "build:css": "tsc build/gulpfile.ts && gulp build --gulpfile build/gulpfile.js && rm -rf build/gulpfile.js", 12 | "prebp": "rimraf dist", 13 | "build": "tsc --module commonjs && rollup -c build/rollup.config.ts && npm run build:locale && npm run build:css && rm -rf .rpt2_cache", 14 | "build:locale": "tsc build/locales.ts && node build/locales.js && rm -rf build/locales.js", 15 | "test": "jest --coverage", 16 | "test:watch": "jest --coverage --watch", 17 | "test:prod": "npm run lint && npm run test -- --no-cache", 18 | "lint": "eslint src --fix --ext .ts,.tsx" 19 | }, 20 | "jest": { 21 | "preset": "./build/jest.config.ts" 22 | }, 23 | "lint-staged": { 24 | "{src,test}/**/*.ts": [ 25 | "eslint", 26 | "git add" 27 | ] 28 | }, 29 | "devDependencies": { 30 | "@types/gulp-dart-sass": "^1.0.0", 31 | "@types/gulp-rename": "^2.0.0", 32 | "@types/jest": "^25.2.1", 33 | "@types/markdown-it": "^12.0.1", 34 | "@typescript-eslint/eslint-plugin": "^3.7.1", 35 | "@typescript-eslint/parser": "^3.7.1", 36 | "@vitejs/plugin-vue": "^1.1.4", 37 | "@vue/compiler-sfc": "^3.0.5", 38 | "better-datepicker": "0.1.9", 39 | "dart-sass": "^1.25.0", 40 | "element-plus": "^1.0.2-beta.35", 41 | "eslint": "^7.5.0", 42 | "eslint-config-prettier": "^6.11.0", 43 | "eslint-plugin-prettier": "^3.1.4", 44 | "gulp": "^4.0.2", 45 | "gulp-cssmin": "^0.2.0", 46 | "gulp-dart-sass": "^1.0.2", 47 | "gulp-rename": "^2.0.0", 48 | "gulp-uglify": "^3.0.2", 49 | "highlight.js": "^9.16.2", 50 | "jest": "^25.0.0", 51 | "jest-config": "^25.0.0", 52 | "markdown-it": "^12.0.4", 53 | "markdown-it-anchor": "^7.0.2", 54 | "nprogress": "^0.2.0", 55 | "rollup": "^2.37.1", 56 | "rollup-plugin-commonjs": "^10.1.0", 57 | "rollup-plugin-json": "^3.1.0", 58 | "rollup-plugin-node-resolve": "^5.2.0", 59 | "rollup-plugin-sourcemaps": "^0.4.2", 60 | "rollup-plugin-terser": "^5.2.0", 61 | "rollup-plugin-typescript2": "^0.23.0", 62 | "ts-jest": "^25.4.0", 63 | "typescript": "^4.1.3", 64 | "vite": "^2.1.2", 65 | "vite-plugin-md": "^0.6.1", 66 | "vue": "^3.0.5", 67 | "vue-router": "4.0.4" 68 | }, 69 | "repository": { 70 | "type": "git", 71 | "url": "git+https://github.com/Js-Monkey/better-datepicker.git" 72 | }, 73 | "author": "jumodada", 74 | "license": "MIT", 75 | "bugs": { 76 | "url": "https://github.com/Js-Monkey/better-datepicker/issues" 77 | }, 78 | "homepage": "https://github.com/Js-Monkey/better-datepicker#readme" 79 | } 80 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "moduleResolution": "node", 4 | "target": "es6", 5 | "module":"es2015", 6 | "lib": ["es2015", "es2016", "es2017", "es2020","esnext","dom"], 7 | "strict": true, 8 | "sourceMap": true, 9 | "declaration": true, 10 | "allowSyntheticDefaultImports": true, 11 | "experimentalDecorators": true, 12 | "emitDecoratorMetadata": true, 13 | "noImplicitThis": false, 14 | "declarationDir": "./dist/types", 15 | "outDir": "./dist/lib", 16 | "typeRoots": [ 17 | "./node_modules/@types" 18 | ] 19 | }, 20 | "include": [ 21 | "./src" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import Vue from '@vitejs/plugin-vue' 2 | import md from './Doc/src/plugins/md-loader/index' 3 | 4 | export default { 5 | root: './Doc', 6 | server: { 7 | port: 8848 8 | }, 9 | build: { 10 | rollupOptions: { 11 | output:{ 12 | manualChunks(id: any) { 13 | if (id.includes('node_modules')) { 14 | return id.toString().split('node_modules/')[1].split('/')[0].toString(); 15 | } 16 | } 17 | } 18 | } 19 | }, 20 | plugins: [ 21 | Vue({ 22 | include: [/\.vue$/, /\.md$/] 23 | }), 24 | md() 25 | ], 26 | } 27 | 28 | --------------------------------------------------------------------------------