Skip to content

Commit 847fb19

Browse files
linmasahirolinmasahiro
committed
added show-bottom-button option and years-range option
1 parent 2c16edb commit 847fb19

File tree

9 files changed

+49
-25
lines changed

9 files changed

+49
-25
lines changed

‎README.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,14 @@ A simple datepicker component support Vue3.0!!
2222
:placeholder-attr="datepickerSetting.placeholder"
2323
:is-button-type="datepickerSetting.isButtonType"
2424
:year-minus="datepickerSetting.yearMinus"
25+
:years-range="100"
2526
:from="datepickerSetting.fromDate"
2627
:to="datepickerSetting.toDate"
2728
:disabled-date="datepickerSetting.disabledDate"
2829
:locale="datepickerSetting.locale"
2930
@value-changed="datepickerSetting.changeEvent"
30-
:disableInput="datepickerSetting.disableInput"
31+
:disable-input="datepickerSetting.disableInput"
32+
:show-bottom-button="true"
3133
></datepicker-lite>
3234

3335
### sample data
@@ -64,6 +66,7 @@ A simple datepicker component support Vue3.0!!
6466
}
6567

6668
### release
69+
ver 1.9.0 : added show-bottom-button option and years-range option
6770
ver 1.8.9 : added months-option on locale-options
6871
ver 1.8.8 : added switch to button-type option
6972
ver 1.8.7 : added autocomplated off option

‎dist/index.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
background-color: #f7f7f9;
100100
border: 1px solid #e1e1e8;
101101
white-space: nowrap;
102-
}</style><link href="./js/app.8f701ebd.js" rel="preload" as="script"><link href="./js/chunk-vendors.44f16b0b.js" rel="preload" as="script"></head><body><div class="container"><div class="hero-unit"><h1 id="home">vue3-datepicker-lite</h1><p>A very simple datepicker component for vue3.0!</p><hr><p><a href="https://github.com/linmasahiro/vue3-datepicker-lite">Github</a></p><p><iframe src="https://ghbtns.com/github-btn.html?user=linmasahiro&repo=vue3-datepicker-lite&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe></p></div><h2 id="demo">Demo</h2><p>Example Sample Demo</p><div><div id="app"></div></div><br><h2 id="info">Get Start</h2><div><ol><li>Use NPM<ol><li><pre><code>npm install vue3-datepicker-lite --save</code></pre></li><li><p>add to your project</p><pre><code>import DatepickerLite from 'vue3-datepicker-lite'</code></pre></li><li><p>set component attribuite</p><pre>
102+
}</style><link href="./js/app.c3c611c6.js" rel="preload" as="script"><link href="./js/chunk-vendors.44f16b0b.js" rel="preload" as="script"></head><body><div class="container"><div class="hero-unit"><h1 id="home">vue3-datepicker-lite</h1><p>A very simple datepicker component for vue3.0!</p><hr><p><a href="https://github.com/linmasahiro/vue3-datepicker-lite">Github</a></p><p><iframe src="https://ghbtns.com/github-btn.html?user=linmasahiro&repo=vue3-datepicker-lite&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe></p></div><h2 id="demo">Demo</h2><p>Example Sample Demo</p><div><div id="app"></div></div><br><h2 id="info">Get Start</h2><div><ol><li>Use NPM<ol><li><pre><code>npm install vue3-datepicker-lite --save</code></pre></li><li><p>add to your project</p><pre><code>import DatepickerLite from 'vue3-datepicker-lite'</code></pre></li><li><p>set component attribuite</p><pre>
103103
<code>
104104
&lt;datepicker-lite
105105
:id-attr=&quot;datepickerSetting.id&quot;
@@ -109,12 +109,14 @@
109109
:placeholder-attr=&quot;datepickerSetting.placeholder&quot;
110110
:is-button-type=&quot;datepickerSetting.isButtonType&quot;
111111
:year-minus=&quot;datepickerSetting.yearMinus&quot;
112+
:years-range=&quot;10&quot;
112113
:from=&quot;datepickerSetting.fromDate&quot;
113114
:to=&quot;datepickerSetting.toDate&quot;
114115
:disabled-date=&quot;datepickerSetting.disabledDate&quot;
115116
:locale=&quot;datepickerSetting.locale&quot;
116117
@value-changed=&quot;datepickerSetting.changeEvent&quot;
117-
:disableInput=&quot;datepickerSetting.disableInput&quot;
118+
:disable-input=&quot;datepickerSetting.disableInput&quot;
119+
:show-bottom-button=&quot;true&quot;
118120
/&gt;
119121
</code>
120122
</pre></li><li><p>sample setting data:</p><pre>
@@ -184,4 +186,4 @@
184186
disableInput: false,
185187
}
186188
</code>
187-
</pre></li></ol></li></ol></div></div><div id="footer"><div class="container"><p class="muted credit">Copyright © 2020 <a href="https://github.com/linmasahiro" target="_blank">Lin</a> All Rights Reserved.</p></div></div><script src="./js/chunk-vendors.44f16b0b.js"></script><script src="./js/app.8f701ebd.js"></script></body></html>
189+
</pre></li></ol></li></ol></div></div><div id="footer"><div class="container"><p class="muted credit">Copyright © 2020 <a href="https://github.com/linmasahiro" target="_blank">Lin</a> All Rights Reserved.</p></div></div><script src="./js/chunk-vendors.44f16b0b.js"></script><script src="./js/app.c3c611c6.js"></script></body></html>

‎dist/js/app.8f701ebd.js

-1
This file was deleted.

‎dist/js/app.c3c611c6.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue3-datepicker-lite",
3-
"version": "1.8.9",
3+
"version": "1.9.0",
44
"description": "A simple datepicker component for vue3.0",
55
"repository": {
66
"type": "git",

‎public/index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -153,12 +153,14 @@ <h2 id="info">Get Start</h2>
153153
:placeholder-attr=&quot;datepickerSetting.placeholder&quot;
154154
:is-button-type=&quot;datepickerSetting.isButtonType&quot;
155155
:year-minus=&quot;datepickerSetting.yearMinus&quot;
156+
:years-range=&quot;10&quot;
156157
:from=&quot;datepickerSetting.fromDate&quot;
157158
:to=&quot;datepickerSetting.toDate&quot;
158159
:disabled-date=&quot;datepickerSetting.disabledDate&quot;
159160
:locale=&quot;datepickerSetting.locale&quot;
160161
@value-changed=&quot;datepickerSetting.changeEvent&quot;
161-
:disableInput=&quot;datepickerSetting.disableInput&quot;
162+
:disable-input=&quot;datepickerSetting.disableInput&quot;
163+
:show-bottom-button=&quot;true&quot;
162164
/&gt;
163165
</code>
164166
</pre>

‎src/App.vue

+16-15
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@
88
:is-button-type="datepickerSetting.isButtonType"
99
:locale="datepickerSetting.locale"
1010
:year-minus="datepickerSetting.yearMinus"
11+
:years-range="datepickerSetting.yearsRange"
1112
:from="datepickerSetting.fromDate"
1213
:to="datepickerSetting.toDate"
1314
:disabled-date="datepickerSetting.disabledDate"
1415
@value-changed="datepickerSetting.changeEvent"
15-
:disableInput="datepickerSetting.disableInput"
16+
:disable-input="datepickerSetting.disableInput"
1617
></datepicker-lite>
1718
<datepicker-lite
1819
:id-attr="datepickerSetting2.id"
@@ -23,11 +24,12 @@
2324
:is-button-type="datepickerSetting2.isButtonType"
2425
:locale="datepickerSetting2.locale"
2526
:year-minus="datepickerSetting2.yearMinus"
27+
:years-range="datepickerSetting2.yearsRange"
2628
:from="datepickerSetting2.fromDate"
2729
:to="datepickerSetting2.toDate"
2830
:disabled-date="datepickerSetting2.disabledDate"
2931
@value-changed="datepickerSetting2.changeEvent"
30-
:disableInput="datepickerSetting2.disableInput"
32+
:disable-input="datepickerSetting2.disableInput"
3133
></datepicker-lite>
3234
<datepicker-lite
3335
:id-attr="datepickerSetting3.id"
@@ -38,11 +40,13 @@
3840
:is-button-type="datepickerSetting3.isButtonType"
3941
:locale="datepickerSetting3.locale"
4042
:year-minus="datepickerSetting3.yearMinus"
43+
:years-range="datepickerSetting3.yearsRange"
4144
:from="datepickerSetting3.fromDate"
4245
:to="datepickerSetting3.toDate"
4346
:disabled-date="datepickerSetting3.disabledDate"
4447
@value-changed="datepickerSetting3.changeEvent"
45-
:disableInput="datepickerSetting3.disableInput"
48+
:disable-input="datepickerSetting3.disableInput"
49+
:show-bottom-button="false"
4650
></datepicker-lite>
4751
</template>
4852

@@ -64,6 +68,7 @@ export default defineComponent({
6468
placeholder: "Select",
6569
isButtonType: false,
6670
yearMinus: 0,
71+
yearsRange: 100,
6772
fromDate: "2020/02/10",
6873
toDate: "2021/02/10",
6974
disabledDate: [
@@ -86,7 +91,7 @@ export default defineComponent({
8691
console.log(value + " selected!");
8792
},
8893
disableInput: false,
89-
}
94+
};
9095
9196
const datepickerSetting2 = {
9297
id: "birthday",
@@ -96,6 +101,7 @@ export default defineComponent({
96101
placeholder: "Select",
97102
isButtonType: false,
98103
yearMinus: 0,
104+
yearsRange: 10,
99105
fromDate: "10/02/2020",
100106
toDate: "10/02/2021",
101107
disabledDate: [
@@ -118,7 +124,7 @@ export default defineComponent({
118124
console.log(value + " selected!");
119125
},
120126
disableInput: false,
121-
}
127+
};
122128
123129
const datepickerSetting3 = {
124130
id: "birthday",
@@ -128,15 +134,10 @@ export default defineComponent({
128134
placeholder: "Select",
129135
isButtonType: true,
130136
yearMinus: 0,
137+
yearsRange: 10,
131138
fromDate: "2020/02/10",
132-
toDate: "2021/02/10",
133-
disabledDate: [
134-
"2020/10/02",
135-
"2020/10/03",
136-
"2020/10/04",
137-
"2020/10/05",
138-
"2020/10/06",
139-
],
139+
toDate: "",
140+
disabledDate: [],
140141
locale: {
141142
format: "YYYY/MM/DD",
142143
weekday: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
@@ -150,12 +151,12 @@ export default defineComponent({
150151
console.log(value + " selected!");
151152
},
152153
disableInput: false,
153-
}
154+
};
154155
155156
return {
156157
datepickerSetting,
157158
datepickerSetting2,
158-
datepickerSetting3
159+
datepickerSetting3,
159160
};
160161
},
161162
});

‎src/components/DatepickerLite.vue

+18-2
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989
</tr>
9090
</tbody>
9191
</table>
92-
<div class="picker__footer">
92+
<div v-if="showBottomButton" class="picker__footer">
9393
<button class="picker__button--today" type="button" @click="selectToday">
9494
{{ modifiedLocale.todayBtn }}
9595
</button>
@@ -153,6 +153,10 @@ export default defineComponent({
153153
type: String,
154154
default: "",
155155
},
156+
startValueAttr: {
157+
type: String,
158+
default: "",
159+
},
156160
placeholderAttr: {
157161
type: String,
158162
default: "",
@@ -171,6 +175,10 @@ export default defineComponent({
171175
type: Number,
172176
default: 0,
173177
},
178+
yearsRange: {
179+
type: Number,
180+
default: 10,
181+
},
174182
from: {
175183
type: String,
176184
default: "",
@@ -203,6 +211,10 @@ export default defineComponent({
203211
type: Boolean,
204212
default: false,
205213
},
214+
showBottomButton: {
215+
type: Boolean,
216+
default: true,
217+
},
206218
},
207219
setup(props, { emit }) {
208220
let modifiedLocale: LocaleObject = Object.assign(
@@ -302,7 +314,11 @@ export default defineComponent({
302314
year: 2020,
303315
years: computed(() => {
304316
let yearList = [];
305-
for (let i: number = datepicker.year - 10; i < datepicker.year + 10; i++) {
317+
for (
318+
let i: number = datepicker.year - props.yearsRange;
319+
i < datepicker.year + props.yearsRange;
320+
i++
321+
) {
306322
if (datepicker.hasRange) {
307323
let fromDate: Array<string> | null = props.from.match(
308324
formatSetting.formatRegexp

0 commit comments

Comments
 (0)