Skip to content

Commit 26de7c5

Browse files
mst101mst101
committed
docs(style): Minor readability tweaks
1 parent 94cdc85 commit 26de7c5

File tree

12 files changed

+102
-64
lines changed

12 files changed

+102
-64
lines changed

‎docs/.vuepress/client.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import * as lang from '../../dist/locale/index.mjs'
44
import DatePicker from '../../dist/vue-datepicker.mjs'
55
import AppendToBody from './components/DatePicker/AppendToBody.vue'
66
import OpenDate from './components/DatePicker/OpenDate.vue'
7-
import RtlLanguage from './components/DatePicker/RtlLanguage.vue'
87
import UseUtc from './components/DatePicker/UseUtc.vue'
98
import VModel from './components/DatePicker/VModel.vue'
109
import YearPickerRange from './components/DatePicker/YearPickerRange.vue'
@@ -23,7 +22,6 @@ export default defineClientConfig({
2322
app.component('DatePicker', DatePicker)
2423
app.component('DatePickerAppendToBody', AppendToBody)
2524
app.component('DatePickerOpenDate', OpenDate)
26-
app.component('DatePickerRtlLanguage', RtlLanguage)
2725
app.component('DatePickerUseUtc', UseUtc)
2826
app.component('DatePickerVModel', VModel)
2927
app.component('DatePickerYearPickerRange', YearPickerRange)

‎docs/.vuepress/components/DateDisabled.vue

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,47 @@
22
<div>
33
<div class="example">
44
<h3>With minimum and maximum date range</h3>
5-
<DatePicker :disabled-dates="disabledDates" placeholder="Datepicker based on settings below..." />
6-
<code>
7-
&lt;datepicker :disabled-dates="disabledDates"&gt;&lt;/datepicker&gt;
8-
</code>
5+
<DatePicker
6+
:disabled-dates="disabledDates"
7+
placeholder="Datepicker based on settings below..."
8+
/>
9+
<code>&lt;DatePicker :disabled-dates="disabledDates" /&gt;</code>
910
<div class="settings">
1011
<h5>Settings</h5>
1112
<div class="form-group">
1213
<label>Disabled to:</label>
13-
<DatePicker @selected="disableTo" />
14+
<DatePicker
15+
placeholder="Select date"
16+
@selected="disableTo"
17+
/>
1418
</div>
1519
<div class="form-group">
1620
<label>Disabled from:</label>
17-
<DatePicker @selected="disableFrom" />
21+
<DatePicker
22+
placeholder="Select date"
23+
@selected="disableFrom"
24+
/>
1825
</div>
1926
<div class="form-group">
2027
<label>Disabled Days of Month:</label>
21-
<input type="text" value="" placeholder="5,6,12,13" @change="setDisabledDays" />
28+
<input
29+
type="text"
30+
value=""
31+
placeholder="e.g. 5, 6, 12, 13"
32+
@change="setDisabledDays"
33+
/>
2234
</div>
2335
<pre>disabled: {{ disabledDates }}</pre>
2436
</div>
2537
</div>
2638

2739
<div class="example">
2840
<h3>Disabled dates</h3>
29-
<DatePicker :disabled-dates="disabledFn" placeholder="Datepicker based on settings below..." />
30-
<code>
31-
&lt;datepicker :disabled-dates="disabledFn"&gt;&lt;/datepicker&gt;
32-
</code>
41+
<DatePicker
42+
:disabled-dates="disabledFn"
43+
placeholder="Datepicker based on settings below..."
44+
/>
45+
<code>&lt;DatePicker :disabled-dates="disabledFn" /&gt;</code>
3346
<div class="settings">
3447
<h5>Settings</h5>
3548
<pre>

‎docs/.vuepress/components/DateFormatting.vue

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
<template>
22
<div class="example">
3+
<h3>Default formatter</h3>
4+
<DatePicker
5+
:format="format"
6+
placeholder="Datepicker based on settings below..."
7+
/>
8+
<code>&lt;DatePicker :format="format"/&gt;</code>
9+
310
<div class="settings">
411
<h5>Settings</h5>
512
<DateFormats
613
:format-init="format"
714
@selected="selected"
815
/>
916
</div>
10-
<h3>Default formatter</h3>
11-
<DatePicker
12-
:format="format"
13-
placeholder="Datepicker based on settings above..."
14-
/>
15-
<code>&lt;DatePicker :format="format"/&gt;</code>
17+
</div>
18+
19+
<div class="example">
1620
<h3>Custom formatter</h3>
1721
<DatePicker
1822
:format="customFormatter"
@@ -24,7 +28,9 @@
2428
&lt;DatePicker :format="customFormatter" :parser="customParser"/&gt;
2529
</code>
2630

27-
<pre>
31+
<div class="settings">
32+
<h5>Settings</h5>
33+
<pre>
2834
import { format, parse } from 'date-fns'
2935

3036
export default {
@@ -42,7 +48,8 @@ export default {
4248
},
4349
},
4450
}
45-
</pre>
51+
</pre>
52+
</div>
4653
</div>
4754
</template>
4855

‎docs/.vuepress/components/DateHighlighted.vue

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
<div>
33
<div class="example">
44
<h3>Highlighting Dates</h3>
5-
<DatePicker :highlighted="highlighted" placeholder="Datepicker based on settings below..." />
5+
<DatePicker
6+
:highlighted="highlighted"
7+
placeholder="Datepicker based on settings below..."
8+
/>
69

7-
<code>
8-
&lt;datepicker :highlighted="highlighted"&gt;&lt;/datepicker&gt;
9-
</code>
10+
<code>&lt;DatePicker :highlighted="highlighted" /&gt;</code>
1011
<div class="settings">
1112
<h5>Settings</h5>
1213
<div class="form-group">
@@ -19,18 +20,24 @@
1920
</div>
2021
<div class="form-group">
2122
<label>Highlight Days of Month:</label>
22-
<input type="text" value="" @change="setHighlightedDays" />
23+
<input
24+
placeholder="e.g. 5, 6, 12, 13"
25+
type="text"
26+
value=""
27+
@change="setHighlightedDays"
28+
/>
2329
</div>
2430
<pre>highlighted: {{ highlighted }}</pre>
2531
</div>
2632
</div>
2733

2834
<div class="example">
2935
<h3>Highlighting Dates Matching Given Function</h3>
30-
<DatePicker :highlighted="highlightedFn" placeholder="Datepicker based on settings below..." />
31-
<code>
32-
&lt;datepicker :highlighted="highlightedFn"&gt;&lt;/datepicker&gt;
33-
</code>
36+
<DatePicker
37+
:highlighted="highlightedFn"
38+
placeholder="Datepicker based on settings below..."
39+
/>
40+
<code>&lt;DatePicker :highlighted="highlightedFn" /&gt;</code>
3441
<div class="settings">
3542
<h5>Settings</h5>
3643
<pre>

‎docs/.vuepress/components/DateLanguage.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@
88
placeholder="Datepicker based on settings below..."
99
/>
1010
<code>
11-
&lt;datepicker :language="$datepickerLocales.{{ language }}"&gt;
12-
&lt;/datepicker&gt;
11+
&lt;DatePicker :language="$datepickerLocales.{{ language }}" /&gt;
1312
</code>
1413
<div class="settings">
1514
<h5>Settings</h5>

‎docs/.vuepress/components/DatePicker/AppendToBody.vue

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
<template>
2-
<div class="overflow-scroll">
2+
<div class="example overflow-scroll">
33
<h3>Don't append datepicker to body</h3>
4-
<DatePicker />
4+
<DatePicker placeholder="Select date" />
55
<h3>Append to body</h3>
6-
<DatePicker :append-to-body="true" />
6+
<DatePicker
7+
:append-to-body="true"
8+
placeholder="Select date"
9+
/>
710
</div>
811
</template>
912

@@ -21,5 +24,6 @@ export default {
2124
<style>
2225
.overflow-scroll {
2326
overflow: scroll;
27+
padding-bottom: 3em;
2428
}
2529
</style>

‎docs/.vuepress/components/DatePicker/OpenDate.vue

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
placeholder="Select open Date"
1515
/>
1616
</div>
17-
<pre>openDate: {{ openDate }}</pre>
17+
<pre>openDate="{{ openDateFormatted }}"</pre>
1818
</div>
1919
</div>
2020
</template>
@@ -27,5 +27,11 @@ export default {
2727
openDate: null,
2828
}
2929
},
30+
computed: {
31+
openDateFormatted() {
32+
if (!this.openDate) return ''
33+
return `new Date(${this.openDate.getFullYear()}, ${this.openDate.getMonth()}, ${this.openDate.getDate()})`
34+
},
35+
},
3036
}
3137
</script>

‎docs/.vuepress/components/DatePicker/RtlLanguage.vue

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎docs/.vuepress/components/DatePicker/UseUtc.vue

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
11
<template>
2+
<div class="example">
3+
<h3>Browser Timezone</h3>
4+
<DatePicker
5+
v-model="normalDate"
6+
placeholder="Select browser timezone date"
7+
/>
8+
<pre>
9+
Browser timezone date:
10+
{{ normalDate }}
11+
</pre>
12+
</div>
13+
214
<div class="example">
315
<h3>UTC</h3>
416
<DatePicker
517
v-model="utcDate"
618
:use-utc="true"
719
placeholder="Select utc date"
820
/>
9-
<pre>UTC date: {{ utcDate }}</pre>
10-
<h3>Browser Timezone</h3>
11-
<DatePicker
12-
v-model="normalDate"
13-
placeholder="Select browser timezone date"
14-
/>
15-
<pre>Browser timezone date: {{ normalDate }}</pre>
21+
<pre>
22+
UTC date:
23+
{{ utcDate }}</pre>
1624
</div>
1725
</template>
1826

‎docs/.vuepress/components/DatePicker/YearPickerRange.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@
1111
</div>
1212
<pre>yearPickerRange: {{ yearPickerRange }}</pre>
1313
</div>
14-
<DatePicker :year-picker-range="yearPickerRange" />
14+
<DatePicker
15+
:year-picker-range="yearPickerRange"
16+
placeholder="Select date"
17+
initial-view="year"
18+
/>
1519
</div>
1620
</template>
1721

0 commit comments

Comments
 (0)