├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
├── favicon.ico
└── index.html
└── src
├── App.vue
├── assets
├── css
│ └── reset.min.css
├── img
│ ├── left.png
│ └── right.png
└── js
│ └── utils.js
├── components
├── canlendar-head.vue
└── date-picker.vue
└── main.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 |
5 | # local env files
6 | .env.local
7 | .env.*.local
8 |
9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 |
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # date-picker
2 |
3 | ## Project setup
4 | ```
5 | npm install
6 | ```
7 |
8 | ### Compiles and hot-reloads for development
9 | ```
10 | npm run serve
11 | ```
12 |
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 |
18 | ### Run your tests
19 | ```
20 | npm run test
21 | ```
22 |
23 | ### Lints and fixes files
24 | ```
25 | npm run lint
26 | ```
27 |
28 | ### Customize configuration
29 | See [Configuration Reference](https://cli.vuejs.org/config/).
30 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@vue/app'
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "date-picker",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "core-js": "^2.6.5",
12 | "less": "^3.9.0",
13 | "less-loader": "^5.0.0",
14 | "vue": "^2.6.10"
15 | },
16 | "devDependencies": {
17 | "@vue/cli-plugin-babel": "^3.7.0",
18 | "@vue/cli-plugin-eslint": "^3.7.0",
19 | "@vue/cli-service": "^3.7.0",
20 | "babel-eslint": "^10.0.1",
21 | "eslint": "^5.16.0",
22 | "eslint-plugin-vue": "^5.0.0",
23 | "vue-template-compiler": "^2.5.21"
24 | },
25 | "eslintConfig": {
26 | "root": true,
27 | "env": {
28 | "node": true
29 | },
30 | "extends": [
31 | "plugin:vue/essential",
32 | "eslint:recommended"
33 | ],
34 | "rules": {},
35 | "parserOptions": {
36 | "parser": "babel-eslint"
37 | }
38 | },
39 | "postcss": {
40 | "plugins": {
41 | "autoprefixer": {}
42 | }
43 | },
44 | "browserslist": [
45 | "> 1%",
46 | "last 2 versions"
47 | ]
48 | }
49 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiangnideye/vue-date-picker/7cdd3ed725df249876501ee38b5d819fa54b0875/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | date-picker
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
12 |
48 |
49 |
52 |
--------------------------------------------------------------------------------
/src/assets/css/reset.min.css:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, button, input, textarea, th, td, span {
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | }
7 | html,body{
8 | height: 100%;
9 | }
10 | body {
11 | font-size: 12px;
12 | font-style: normal;
13 | font-family: 微软雅黑, Helvetica, sans-serif;
14 | }
15 |
16 | small {
17 | font-size: 12px
18 | }
19 |
20 | h1 {
21 | font-size: 18px
22 | }
23 |
24 | h2 {
25 | font-size: 16px
26 | }
27 |
28 | h3 {
29 | font-size: 14px
30 | }
31 |
32 | h4, h5, h6 {
33 | font-size: 100%
34 | }
35 |
36 | ul, ol {
37 | list-style: none
38 | }
39 |
40 | a {
41 | text-decoration: none;
42 | background-color: transparent
43 | }
44 |
45 | a:hover, a:active {
46 | outline-width: 0;
47 | text-decoration: none
48 | }
49 |
50 | table {
51 | border-collapse: collapse;
52 | border-spacing: 0
53 | }
54 |
55 | hr {
56 | border: 0;
57 | height: 1px
58 | }
59 |
60 | img {
61 | border-style: none
62 | }
63 |
64 | img:not([src]) {
65 | display: none
66 | }
67 |
68 | svg:not(:root) {
69 | overflow: hidden
70 | }
71 |
72 | html {
73 | -webkit-touch-callout: none;
74 | -webkit-text-size-adjust: 100%
75 | }
76 |
77 | input, textarea, button, a {
78 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
79 | }
80 |
81 | article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
82 | display: block
83 | }
84 |
85 | audio, canvas, progress, video {
86 | display: inline-block
87 | }
88 |
89 | /*audio:not([controls]), video:not([controls]) {
90 | display: none;
91 | height: 0
92 | }*/
93 |
94 | progress {
95 | vertical-align: baseline
96 | }
97 |
98 | mark {
99 | background-color: #ff0;
100 | color: #000
101 | }
102 |
103 | sub, sup {
104 | position: relative;
105 | font-size: 75%;
106 | line-height: 0;
107 | vertical-align: baseline
108 | }
109 |
110 | sub {
111 | bottom: -0.25em
112 | }
113 |
114 | sup {
115 | top: -0.5em
116 | }
117 |
118 | input, select, textarea {
119 | font-size: 100%;
120 | outline: 0;
121 | }
122 |
123 | button, input {
124 | overflow: visible
125 | }
126 |
127 | button, select {
128 | text-transform: none
129 | }
130 |
131 | textarea {
132 | overflow: auto
133 | }
134 |
135 | button, html [type="button"], [type="reset"], [type="submit"] {
136 | -webkit-appearance: button
137 | }
138 |
139 | button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
140 | border-style: none;
141 | padding: 0
142 | }
143 |
144 | button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
145 | outline: 1px dotted ButtonText
146 | }
147 |
148 | [type="checkbox"], [type="radio"] {
149 | box-sizing: border-box;
150 | padding: 0
151 | }
152 |
153 | [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
154 | height: auto
155 | }
156 |
157 | [type="search"] {
158 | -webkit-appearance: textfield;
159 | outline-offset: -2px
160 | }
161 |
162 | [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
163 | -webkit-appearance: none
164 | }
165 |
166 | ::-webkit-input-placeholder {
167 | color: inherit;
168 | opacity: .54
169 | }
170 |
171 | ::-webkit-file-upload-button {
172 | -webkit-appearance: button;
173 | font: inherit
174 | }
175 |
176 | .clear:after {
177 | display: block;
178 | height: 0;
179 | content: "";
180 | clear: both
181 | }
182 | @media (min-width: 1200px) {
183 | body{
184 | min-width: 1200px;
185 | }
186 | }
187 | @media (max-width: 991px){
188 | body, html{
189 | overflow-x: initial!important;
190 | }
191 | }
192 | button {
193 | outline:none
194 | }
195 |
--------------------------------------------------------------------------------
/src/assets/img/left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiangnideye/vue-date-picker/7cdd3ed725df249876501ee38b5d819fa54b0875/src/assets/img/left.png
--------------------------------------------------------------------------------
/src/assets/img/right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiangnideye/vue-date-picker/7cdd3ed725df249876501ee38b5d819fa54b0875/src/assets/img/right.png
--------------------------------------------------------------------------------
/src/assets/js/utils.js:
--------------------------------------------------------------------------------
1 | const englishMonthList = [
2 | 'Jan',
3 | 'Feb',
4 | 'Mar',
5 | 'Apr',
6 | 'May',
7 | 'Jun',
8 | 'Jul',
9 | 'Aug',
10 | 'Sept',
11 | 'Oct',
12 | 'Nov',
13 | 'Dec'
14 | ];
15 |
16 | const getNewDate = (date) => {
17 | let year = date.getFullYear();
18 | let month = date.getMonth();
19 | let day = date.getDate();
20 | return {year, month, day};
21 | }
22 |
23 | const getDate = (year, month, day) => {
24 | return new Date(year, month, day);
25 | }
26 |
27 | const englishMonth = (month) => {
28 | let engMonth;
29 |
30 | englishMonthList.map(() => {
31 | engMonth = englishMonthList[month]
32 | });
33 |
34 | return engMonth
35 | }
36 |
37 | const formatDate = (date) => {
38 | date = Number(date);
39 | return date < 10? `0${date}`:date;
40 | }
41 | export {
42 | getNewDate,
43 | getDate,
44 | englishMonth,
45 | formatDate
46 | }
--------------------------------------------------------------------------------
/src/components/canlendar-head.vue:
--------------------------------------------------------------------------------
1 |
2 |
21 |
22 |
23 |
53 |
54 |
--------------------------------------------------------------------------------
/src/components/date-picker.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
12 |
13 | -
23 |
27 | {{item.day}}
28 |
29 |
30 | {{item.calendarNum}}
31 |
32 |
33 |
34 |
35 |
36 |
37 |
160 |
161 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 |
4 | Vue.config.productionTip = false
5 |
6 | new Vue({
7 | render: h => h(App),
8 | }).$mount('#app')
9 |
--------------------------------------------------------------------------------