Skip to content

Commit 0d06013

Browse files
edisdevedisdev
authored
Merge pull request #31 from edisdev/bugfixes
Bugfix and new deployment/development source
2 parents 1a5dfa1 + e8d15e8 commit 0d06013

28 files changed

+428
-5636
lines changed

‎.npmignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
/resources
22
/docs
3+
/development
4+
/public
35

46
/yarn.lock
57

‎development/Example.vue‎

Lines changed: 344 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,344 @@
1+
<template>
2+
<div id="app">
3+
<div class="titles">
4+
<h1>VUE DATEPICKER COMPONENT</h1>
5+
<div class="using">
6+
<div class="package">
7+
<span class="install">npm install vue-datepicker-ui</span> or
8+
<span class="install">yarn add vue-datepicker-ui</span>
9+
</div>
10+
<code class="code" v-html="exampleCode"> </code>
11+
</div>
12+
<div class="viewCode">
13+
<a href="https://github.com/edisdev/vue-datepicker-ui" target="_blank">
14+
View Github Repository
15+
</a>
16+
<p>Thank you so much in advance for stars & supports. 😍👍</p>
17+
</div>
18+
</div>
19+
<div class="lights">
20+
<div class="examples">
21+
<div class="example" v-for="(example, index) in examples" :key="index">
22+
<h3>{{ example.title }}</h3>
23+
<Datepicker
24+
v-model="example.value"
25+
:range="example.range"
26+
:lang="example.lang"
27+
:firstDayOfWeek="example.firstDayOfWeek"
28+
:input-class="example.inputClass"
29+
:position="example.position"
30+
:disabled-start-date="example.disabledStartDate"
31+
:text-format="example.textFormat"
32+
:date-format="example.dateFormat"
33+
:disabled-end-date="example.disabledEndDate"
34+
:disabled="example.disabled || false"
35+
:circle="example.circle || false"
36+
/>
37+
<blockquote class="exam-props">
38+
<textarea :value="JSON.stringify(example, null, 2)" readonly>
39+
</textarea>
40+
</blockquote>
41+
</div>
42+
</div>
43+
</div>
44+
<div class="colorfulls">
45+
<h2 class="changeColors"></h2>
46+
<div class="examples colorfull">
47+
<div class="example" v-for="(example, index) in examples" :key="index">
48+
<h3>{{ example.title }}</h3>
49+
<Datepicker
50+
v-model="example.value"
51+
:range="example.range"
52+
:lang="example.lang"
53+
:firstDayOfWeek="example.firstDayOfWeek"
54+
:input-class="example.inputClass"
55+
:position="example.position"
56+
:disabled-start-date="example.disabledStartDate"
57+
:text-format="example.textFormat"
58+
:date-format="example.dateFormat"
59+
:disabled-end-date="example.disabledEndDate"
60+
:disabled="example.disabled || false"
61+
:circle="example.circle || false"
62+
/>
63+
<blockquote class="exam-props">
64+
<textarea :value="JSON.stringify(example, null, 2)" readonly>
65+
</textarea>
66+
</blockquote>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
</template>
72+
73+
<script>
74+
import Datepicker from "../src/components/datepicker.vue";
75+
export default {
76+
name: "app",
77+
components: {
78+
Datepicker,
79+
},
80+
data() {
81+
return {
82+
exampleCode:
83+
'< Datepicker <br> v-model="example.value" <br> :range="example.range" <br> :lang="example.lang" <br> :firstDayOfWeek="example.firstDayOfWeek" <br> :input-class="example.inputClass" <br> :position="example.position" <br> :disabled-start-date="example.disabledStartDate" <br> :text-format="example.textFormat" <br> :date-format="example.dateFormat" <br> :disabled-end-date="example.disabledEndDate"/>',
84+
examples: [
85+
{
86+
title: "Single",
87+
inputClass: "exampleDatePicker",
88+
lang: "tr",
89+
position: "bottom",
90+
range: false,
91+
value: null,
92+
firstDayOfWeek: "monday",
93+
},
94+
{
95+
title: "Range",
96+
inputClass: "exampleDatePicker",
97+
lang: "tr",
98+
position: "bottom",
99+
range: true,
100+
value: [null, null],
101+
firstDayOfWeek: "monday",
102+
},
103+
{
104+
title: "Custom lang",
105+
inputClass: "exampleDatePicker",
106+
lang: "en",
107+
position: "right",
108+
range: true,
109+
value: [
110+
new Date(),
111+
new Date(new Date().getTime() + 9 * 24 * 60 * 60 * 1000),
112+
],
113+
},
114+
{
115+
title: "First Day Of Week",
116+
inputClass: "exampleDatePicker",
117+
lang: "en",
118+
position: "left",
119+
range: true,
120+
value: [
121+
new Date(),
122+
new Date(new Date().getTime() + 9 * 24 * 60 * 60 * 1000),
123+
],
124+
firstDayOfWeek: "sunday",
125+
},
126+
{
127+
title: "Selected Circle",
128+
inputClass: "exampleDatePicker",
129+
lang: "en",
130+
position: "left",
131+
range: true,
132+
value: [
133+
new Date(),
134+
new Date(new Date().getTime() + 9 * 24 * 60 * 60 * 1000),
135+
],
136+
firstDayOfWeek: "sunday",
137+
circle: true,
138+
},
139+
{
140+
title: "Disabled Status",
141+
inputClass: "exampleDatePicker",
142+
lang: "tr",
143+
position: "top",
144+
disabledStartDate: {
145+
to: new Date('01.02.2021'),
146+
from: new Date('02.02.2021')
147+
},
148+
value: new Date(new Date().getTime() - 5 * 24 * 60 * 60 * 1000),
149+
},
150+
{
151+
title: "Date Options String",
152+
inputClass: "exampleDatePicker",
153+
lang: "en",
154+
position: "right",
155+
textFormat: "long",
156+
value: new Date(),
157+
},
158+
{
159+
title: "Showed Date Format",
160+
inputClass: "exampleDatePicker",
161+
lang: "en",
162+
position: "left",
163+
value: new Date(),
164+
dateFormat: { day: "2-digit", month: "2-digit", year: "numeric" },
165+
},
166+
{
167+
title: "Disabled Open Picker",
168+
inputClass: "exampleDatePicker",
169+
lang: "en",
170+
position: "left",
171+
value: new Date(),
172+
disabled: true,
173+
dateFormat: { day: "2-digit", month: "2-digit", year: "numeric" },
174+
},
175+
],
176+
};
177+
}
178+
};
179+
</script>
180+
181+
<style>
182+
* {
183+
box-sizing: border-box;
184+
padding: 0;
185+
margin: 0;
186+
}
187+
#app {
188+
font-family: "Avenir", Helvetica, Arial, sans-serif;
189+
-webkit-font-smoothing: antialiased;
190+
-moz-osx-font-smoothing: grayscale;
191+
}
192+
.titles {
193+
width: 98vw;
194+
border-bottom: 1px solid #dedeee;
195+
padding-bottom: 20px;
196+
text-align: center;
197+
height: 100%;
198+
}
199+
.titles .viewCode {
200+
margin-top: 10px;
201+
}
202+
.titles .viewCode a {
203+
color: #1bba67;
204+
font-weight: bold;
205+
}
206+
.titles .viewCode p {
207+
margin-top: 5px;
208+
font-weight: bold;
209+
}
210+
.titles .using {
211+
display: flex;
212+
flex-direction: column;
213+
align-items: center;
214+
margin-top: 20px;
215+
}
216+
.titles .using .package {
217+
display: flex;
218+
flex-wrap: wrap;
219+
align-items: baseline;
220+
}
221+
.titles .using .install {
222+
font-size: 16px;
223+
background: #000;
224+
border-radius: 4px;
225+
color: #ffb00f;
226+
padding: 10px;
227+
margin-left: 5px;
228+
margin-right: 5px;
229+
margin-bottom: 30px;
230+
}
231+
.titles .using .code {
232+
background: #000;
233+
display: block;
234+
align-self: center;
235+
color: #1bba67;
236+
padding: 20px;
237+
font-size: 16px;
238+
border-radius: 4px;
239+
text-align: left;
240+
max-width: 94vw;
241+
word-break: break-all;
242+
margin-left: auto;
243+
margin-right: auto;
244+
}
245+
.examples {
246+
display: grid;
247+
width: 100%;
248+
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
249+
}
250+
.changeColors {
251+
margin-top: 30px;
252+
margin-bottom: 30px;
253+
}
254+
.lights,
255+
.colorfulls {
256+
padding: 30px
257+
}
258+
.lights {
259+
background: #e4e4e4;
260+
}
261+
.colorfulls {
262+
background: #3a7c96;
263+
color: #fff;
264+
}
265+
.examples.colorfull {
266+
--v-calendar-picker-color: #E7F8FE;
267+
--v-calendar-input-bg-color:#E7F8FE;
268+
--v-calendar-select-bg-color: #E7F8FE;
269+
--v-calendar-border-color: #6ea9c43d;
270+
--v-calendar-triangle-color:#6ea9c43d;
271+
--v-calendar-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.2);
272+
--v-calendar-top-shadow: 3px -14px 30px 0px rgba(0, 0, 0, 0.2);
273+
--v-calendar-text-color:#6EA9C4;
274+
--v-calendar-action-color: #6EA9C4;
275+
--v-calendar-text-disabled-color: #6ea9c47c;
276+
--v-calendar-view-button-color:#6EA9C4;
277+
--v-calendar-datepicker-icon-color: transparent;
278+
--v-calendar-datepicker-icon-size: 1.1rem;
279+
--v-calendar-active-bg-color: #fff;
280+
--v-calendar-active-text-color:#323B43;
281+
--v-calendar-range-bg-color: #a1dbf5;
282+
--v-calendar-view-button-font-weight: 500;
283+
--v-calendar-view-button-font-size: 1.1rem;
284+
--v-calendar-range-text-color: #020202;
285+
--v-calendar-range-radius: 100%;
286+
--v-calendar-day-hover-bg-color:#6ea9c43d;
287+
--v-calendar-day-width: 45px;
288+
--v-calendar-day-height: 45px;
289+
--v-calendar-day-font-size: 0.9rem;
290+
--v-calendar-day-font-weight: 500;
291+
--v-calendar-input-border: 1px solid #6ea9c43d;
292+
--v-calendar-input-text-color: #323B43;
293+
--v-calendar-input-font-size: 0.9rem;
294+
--v-calendar-input-font-weight: 500;
295+
--v-calendar-content-radius: 6px;
296+
--v-calendar-day-name-font-size: 0.9rem;
297+
--v-calendar-day-name-font-weight: 600;
298+
--v-calendar-day-name-color:#323B43;
299+
--v-calendar-year-font-size: 1.1rem;
300+
--v-calendar-year-color: #6EA9C4;
301+
--v-calendar-year-font-weight: 500;
302+
--v-calendar-input-bg-disable-color:rgb(245, 245, 245);
303+
--v-calendar-input-text-disable-color:#b8b8b9;
304+
--v-calendar-year-disabled-color: #b8b8b9;
305+
--v-calendar-year-disabled-bg-color: transparent;
306+
--v-calendar-year-padding: 10px;
307+
--v-calendar-year-border: none;
308+
--v-calendar-year-border-radius: none;
309+
--v-calendar-month-font-size: 1.1rem;
310+
--v-calendar-month-color: #6EA9C4;
311+
--v-calendar-month-font-weight: 500;
312+
--v-calendar-month-disabled-color: #b8b8b9;
313+
--v-calendar-month-disabled-bg-color: transparent;
314+
--v-calendar-month-padding: 8px;
315+
--v-calendar-month-border: none;
316+
--v-calendar-month-border-radius: none;
317+
}
318+
.example {
319+
padding: 3vw;
320+
border-bottom: 1px solid #eaeaeb;
321+
max-width: 100%;
322+
}
323+
.example:nth-child(3n-1),
324+
.example:nth-child(3n + 1) {
325+
border-right: 1px solid #eaeaeb;
326+
}
327+
.example h3 {
328+
margin-bottom: 20px;
329+
}
330+
.example .exam-props {
331+
height: 250px;
332+
margin-top: 20px;
333+
}
334+
.example .exam-props textarea {
335+
margin-top: 20px;
336+
height: 220px;
337+
padding: 7px;
338+
border-radius: 6px;
339+
border-color: #eaeaeb;
340+
resize: none;
341+
width: 95%;
342+
font-size: 13px;
343+
}
344+
</style>

‎development/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but vue-datepicker-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎development/main.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Vue from 'vue'
2+
import App from './Example.vue'
3+
4+
Vue.config.productionTip = false
5+
6+
new Vue({
7+
render: h => h(App),
8+
}).$mount('#app')

0 commit comments

Comments
 (0)