Skip to content

Commit e1fe6ec

Browse files
luventaluventa
committed
update: datepicker
Fix: dropdown container does not hide. refactor: add range mode demo. change layout
1 parent 9ac66e3 commit e1fe6ec

File tree

3 files changed

+51
-29
lines changed

3 files changed

+51
-29
lines changed

‎client/views/components/Datepicker.vue‎

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -30,68 +30,87 @@
3030
</p>
3131
</article>
3232
</div>
33-
<div class="tile is-parent">
33+
<div class="tile is-parent is-vertical">
3434
<article class="tile is-child box">
3535
<h1 class="title">Form addons</h1>
3636
<datepicker :inputClass="{ test: true }" :config="{ wrap: true }" readonly>
3737
<a class="button" data-toggle><i class="fa fa-calendar"></i></a>
3838
<a class="button" data-clear><i class="fa fa-close"></i></a>
3939
</datepicker>
40-
<h1 class="title">Inline or embedded calendar</h1>
41-
<p class="control">
42-
<datepicker placeholder="Pick date and time" :config="{ inline: true }"></datepicker>
43-
</p>
40+
</article>
41+
<article class="tile is-child box">
4442
<h1 class="title">Display week numbers</h1>
4543
<p class="control">
4644
<datepicker placeholder="Enabled week numbers" :config="{ weekNumbers: true }"></datepicker>
4745
</p>
4846
</article>
47+
<article class="tile is-child box">
48+
<h1 class="title">Date Range</h1>
49+
<p class="control">
50+
<datepicker placeholder="Select a range" :config="{ mode: 'range' }"></datepicker>
51+
</p>
52+
</article>
4953
</div>
5054
</div>
5155

5256
<div class="tile is-ancestor">
53-
<div class="tile is-parent">
57+
<div class="tile is-parent is-vertical">
5458
<article class="tile is-child box">
55-
<h1 class="title">DateTime or Time Picker</h1>
59+
<h1 class="title">Preload date and time</h1>
5660
<p class="control">
57-
<datepicker placeholder="Pick date and time" :config="{ enableTime: true }"></datepicker>
61+
<!-- TODO: click out side cannot handle hidden input yet. Will fix this later. -->
62+
<datepicker placeholder="The real input is hidden :^)" :config="{ altInput: false, altFormat: 'F j, Y' }"></datepicker>
63+
<!-- <datepicker placeholder="The real input is hidden :^)" :config="{ altInput: true, altFormat: 'F j, Y' }"></datepicker> -->
5864
</p>
5965
<p class="control">
60-
<datepicker placeholder="24 hour time" :config="{ enableTime: true, time_24hr: true, dateFormat: 'Y-m-d H:i' }"></datepicker>
66+
<datepicker :config="{ defaultDate: '2016-03-01 03:30:00 -0300', enableTime: true }"></datepicker>
6167
</p>
6268
<p class="control">
63-
<datepicker placeholder="Pick date and time" :config="{ enableTime: true, enableSeconds: true, dateFormat: 'Y-m-d h:i:S K' }"></datepicker>
69+
<datepicker :config="{ defaultDate: '2016-12-27T16:16:22.585Z', enableTime: true }"></datepicker>
70+
</p>
71+
</article>
72+
<article class="tile is-child box">
73+
<h1 class="title">UTC mode</h1>
74+
<p class="control">
75+
<datepicker :config="{ utc: true, defaultDate: '2016-03-01 03:30:00 -0300', enableTime: true }"></datepicker>
6476
</p>
6577
<p class="control">
66-
<datepicker placeholder="Pick date and time" :config="{ enableTime: true, enableSeconds: true, noCalendar: true }" value="09:00:00"></datepicker>
78+
<datepicker :config="{ utc: true, defaultDate: '2016-12-27T16:16:22.585Z', enableTime: true }"></datepicker>
6779
</p>
6880
</article>
6981
</div>
7082
<div class="tile is-parent">
7183
<article class="tile is-child box">
72-
<h1 class="title">Preload date and time</h1>
84+
<h1 class="title">Inline or embedded calendar</h1>
7385
<p class="control">
74-
<datepicker placeholder="The real input is hidden :^)" :config="{ altInput: true, altFormat: 'F j, Y' }"></datepicker>
86+
<datepicker placeholder="Pick date and time" :config="{ inline: true }"></datepicker>
7587
</p>
88+
</article>
89+
</div>
90+
</div>
91+
92+
<div class="tile is-ancestor">
93+
<div class="tile is-parent is-vertical">
94+
<article class="tile is-child box">
95+
<h1 class="title">DateTime Picker</h1>
7696
<p class="control">
77-
<datepicker :config="{ defaultDate: '2016-03-01 03:30:00 -0300', enableTime: true }"></datepicker>
97+
<datepicker placeholder="Pick date and time" :config="{ enableTime: true }"></datepicker>
7898
</p>
7999
<p class="control">
80-
<datepicker :config="{ defaultDate: '2016-12-27T16:16:22.585Z', enableTime: true }"></datepicker>
100+
<datepicker placeholder="24 hour time" :config="{ enableTime: true, time_24hr: true, dateFormat: 'Y-m-d H:i' }"></datepicker>
81101
</p>
82-
<h1 class="title">UTC mode</h1>
83102
<p class="control">
84-
<datepicker :config="{ utc: true, defaultDate: '2016-03-01 03:30:00 -0300', enableTime: true }"></datepicker>
103+
<datepicker placeholder="Pick date and time" :config="{ enableTime: true, enableSeconds: true, dateFormat: 'Y-m-d h:i:S K' }"></datepicker>
85104
</p>
105+
</article>
106+
<article class="tile is-child box">
107+
<h1 class="title">Time Picker</h1>
86108
<p class="control">
87-
<datepicker :config="{ utc: true, defaultDate: '2016-12-27T16:16:22.585Z', enableTime: true }"></datepicker>
109+
<datepicker placeholder="Pick time" :config="{ enableTime: true, enableSeconds: true, noCalendar: true }" value="09:00:00"></datepicker>
88110
</p>
89111
</article>
90112
</div>
91-
</div>
92-
93-
<div class="tile is-ancestor">
94-
<div class="tile is-parent">
113+
<div class="tile is-parent is-vertical">
95114
<article class="tile is-child box">
96115
<h1 class="title">Disable specific dates or date intervals</h1>
97116
<p class="control">
@@ -101,10 +120,8 @@
101120
<datepicker placeholder="disabled September 6-9 & August 25-31 2016" :config="{ disable: [ { from : '2016-09-06', to : '2016-09-09' }, { from : '2016-08-25', to : '2016-08-31' } ], minDate: 'today', dateFormat: 'Y-m-d' }"></datepicker>
102121
</p>
103122
</article>
104-
</div>
105-
<div class="tile is-parent">
106123
<article class="tile is-child box">
107-
<h1 class="title">Setting options on the fly</h1>
124+
<h1 class="title">Setting options dynamically</h1>
108125
<p class="control">
109126
<datepicker ref="checkIn" placeholder="Check-In Date" :config="{ minDate: new Date() }"></datepicker>
110127
</p>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
"vue-bulma-chartist": "github:vue-bulma/chartist",
4848
"vue-bulma-chartjs": "^1.0.1",
4949
"vue-bulma-collapse": "1.0.3",
50-
"vue-bulma-datepicker": "1.2.3",
50+
"vue-bulma-datepicker": "1.2.6",
5151
"vue-bulma-emoji": "github:vue-bulma/emoji",
5252
"vue-bulma-expanding": "github:vue-bulma/expanding",
5353
"vue-bulma-jump": "github:vue-bulma/jump",

‎yarn.lock‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6841,11 +6841,12 @@ vue-bulma-collapse@1.0.3:
68416841
dependencies:
68426842
animejs "1"
68436843

6844-
vue-bulma-datepicker@1.2.3:
6845-
version "1.2.3"
6846-
resolved "https://registry.yarnpkg.com/vue-bulma-datepicker/-/vue-bulma-datepicker-1.2.3.tgz#82564a04d532610853d6a03bbb780d5e42b527f7"
6844+
vue-bulma-datepicker@1.2.6:
6845+
version "1.2.6"
6846+
resolved "https://registry.yarnpkg.com/vue-bulma-datepicker/-/vue-bulma-datepicker-1.2.6.tgz#e7c92032413b55ac0ab8bcb77737dadc70b6f3db"
68476847
dependencies:
68486848
flatpickr "2.2.4"
6849+
vue-click-outside "1.0.1"
68496850

68506851
"vue-bulma-emoji@github:vue-bulma/emoji":
68516852
version "0.0.1"
@@ -6922,6 +6923,10 @@ vue-cleave@1.1.1:
69226923
dependencies:
69236924
cleave.js "0.7.14"
69246925

6926+
vue-click-outside@1.0.1:
6927+
version "1.0.1"
6928+
resolved "https://registry.yarnpkg.com/vue-click-outside/-/vue-click-outside-1.0.1.tgz#83ff0ad3912c53fe5d171a4127234edc38ff8b4e"
6929+
69256930
"vue-handsontable@github:vue-bulma/handsontable":
69266931
version "0.0.0"
69276932
resolved "https://codeload.github.com/vue-bulma/handsontable/tar.gz/da65afc8338e75516719ed3c59e9dfe2c155c4e7"

0 commit comments

Comments
 (0)