volt-datepicker 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.gitignore +17 -0
- data/.rspec +2 -0
- data/Gemfile +4 -0
- data/README.md +25 -0
- data/Rakefile +1 -0
- data/app/datepicker/assets/css/pikaday.css +220 -0
- data/app/datepicker/assets/js/pikaday.js +1080 -0
- data/app/datepicker/config/dependencies.rb +2 -0
- data/app/datepicker/config/initializers/boot.rb +10 -0
- data/app/datepicker/config/routes.rb +1 -0
- data/app/datepicker/controllers/main_controller.rb +42 -0
- data/app/datepicker/views/main/index.html +13 -0
- data/lib/volt/datepicker/version.rb +5 -0
- data/lib/volt/datepicker.rb +18 -0
- data/spec/spec_helper.rb +14 -0
- data/spec/volt/datepicker_spec.rb +11 -0
- data/volt-datepicker.gemspec +24 -0
- metadata +105 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 6444efeb77d31d35eeb96b84b92e929b4e3080ce
|
4
|
+
data.tar.gz: b19acf0976949c9fd91bf35f844ea06531924b62
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: d4e646561591b737dde88966e8ef5fc9e454a531d3f841916bea76c7d974a97b63dceaef38dd87d8cc5f5504ac53f224bb6986aa050560364b90fffeba5df26d
|
7
|
+
data.tar.gz: ccb7665a63a586a2e32b202be4b030cd926045e5458fb8a1741104d1b1124fee6779fcebf135fef835ce04c8e9b4c54685cf899ae81419fc94ea471da82e2d9d
|
data/.gitignore
ADDED
data/.rspec
ADDED
data/Gemfile
ADDED
data/README.md
ADDED
@@ -0,0 +1,25 @@
|
|
1
|
+
# Volt::Datepicker
|
2
|
+
|
3
|
+
volt-datepicker provides a text field like in volt-fields that shows a datepicker below the fiend when clicked in.
|
4
|
+
|
5
|
+
## Usage
|
6
|
+
|
7
|
+
First include the gem in the projects Gemfile:
|
8
|
+
|
9
|
+
```gem 'volt-datepicker'```
|
10
|
+
|
11
|
+
Next add volt-datepicker to a componentes dependencies.rb file:
|
12
|
+
|
13
|
+
```component 'datepicker'```
|
14
|
+
|
15
|
+
Pass a value to bind the field to.
|
16
|
+
|
17
|
+
```html
|
18
|
+
<:datepicker value="{{ page._date }}" />
|
19
|
+
```
|
20
|
+
|
21
|
+
You can also pass a date-format attribute that will be passed to Time.strftime(..) when setting the date into the field.
|
22
|
+
|
23
|
+
```html
|
24
|
+
<:datepicker value="{{ page._date }}" date-format="%Y-%m-%d" />
|
25
|
+
```
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,220 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/*!
|
4
|
+
* Pikaday
|
5
|
+
* Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
|
6
|
+
*/
|
7
|
+
|
8
|
+
.pika-single {
|
9
|
+
z-index: 9999;
|
10
|
+
display: block;
|
11
|
+
position: relative;
|
12
|
+
color: #333;
|
13
|
+
background: #fff;
|
14
|
+
border: 1px solid #ccc;
|
15
|
+
border-bottom-color: #bbb;
|
16
|
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
17
|
+
}
|
18
|
+
|
19
|
+
/*
|
20
|
+
clear child float (pika-lendar), using the famous micro clearfix hack
|
21
|
+
http://nicolasgallagher.com/micro-clearfix-hack/
|
22
|
+
*/
|
23
|
+
.pika-single:before,
|
24
|
+
.pika-single:after {
|
25
|
+
content: " ";
|
26
|
+
display: table;
|
27
|
+
}
|
28
|
+
.pika-single:after { clear: both }
|
29
|
+
.pika-single { *zoom: 1 }
|
30
|
+
|
31
|
+
.pika-single.is-hidden {
|
32
|
+
display: none;
|
33
|
+
}
|
34
|
+
|
35
|
+
.pika-single.is-bound {
|
36
|
+
position: absolute;
|
37
|
+
box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
|
38
|
+
}
|
39
|
+
|
40
|
+
.pika-lendar {
|
41
|
+
float: left;
|
42
|
+
width: 240px;
|
43
|
+
margin: 8px;
|
44
|
+
}
|
45
|
+
|
46
|
+
.pika-title {
|
47
|
+
position: relative;
|
48
|
+
text-align: center;
|
49
|
+
}
|
50
|
+
|
51
|
+
.pika-label {
|
52
|
+
display: inline-block;
|
53
|
+
*display: inline;
|
54
|
+
position: relative;
|
55
|
+
z-index: 9999;
|
56
|
+
overflow: hidden;
|
57
|
+
margin: 0;
|
58
|
+
padding: 5px 3px;
|
59
|
+
font-size: 14px;
|
60
|
+
line-height: 20px;
|
61
|
+
font-weight: bold;
|
62
|
+
background-color: #fff;
|
63
|
+
}
|
64
|
+
.pika-title select {
|
65
|
+
cursor: pointer;
|
66
|
+
position: absolute;
|
67
|
+
z-index: 9998;
|
68
|
+
margin: 0;
|
69
|
+
left: 0;
|
70
|
+
top: 5px;
|
71
|
+
filter: alpha(opacity=0);
|
72
|
+
opacity: 0;
|
73
|
+
}
|
74
|
+
|
75
|
+
.pika-prev,
|
76
|
+
.pika-next {
|
77
|
+
display: block;
|
78
|
+
cursor: pointer;
|
79
|
+
position: relative;
|
80
|
+
outline: none;
|
81
|
+
border: 0;
|
82
|
+
padding: 0;
|
83
|
+
width: 20px;
|
84
|
+
height: 30px;
|
85
|
+
/* hide text using text-indent trick, using width value (it's enough) */
|
86
|
+
text-indent: 20px;
|
87
|
+
white-space: nowrap;
|
88
|
+
overflow: hidden;
|
89
|
+
background-color: transparent;
|
90
|
+
background-position: center center;
|
91
|
+
background-repeat: no-repeat;
|
92
|
+
background-size: 75% 75%;
|
93
|
+
opacity: .5;
|
94
|
+
*position: absolute;
|
95
|
+
*top: 0;
|
96
|
+
}
|
97
|
+
|
98
|
+
.pika-prev:hover,
|
99
|
+
.pika-next:hover {
|
100
|
+
opacity: 1;
|
101
|
+
}
|
102
|
+
|
103
|
+
.pika-prev,
|
104
|
+
.is-rtl .pika-next {
|
105
|
+
float: left;
|
106
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
|
107
|
+
*left: 0;
|
108
|
+
}
|
109
|
+
|
110
|
+
.pika-next,
|
111
|
+
.is-rtl .pika-prev {
|
112
|
+
float: right;
|
113
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
|
114
|
+
*right: 0;
|
115
|
+
}
|
116
|
+
|
117
|
+
.pika-prev.is-disabled,
|
118
|
+
.pika-next.is-disabled {
|
119
|
+
cursor: default;
|
120
|
+
opacity: .2;
|
121
|
+
}
|
122
|
+
|
123
|
+
.pika-select {
|
124
|
+
display: inline-block;
|
125
|
+
*display: inline;
|
126
|
+
}
|
127
|
+
|
128
|
+
.pika-table {
|
129
|
+
width: 100%;
|
130
|
+
border-collapse: collapse;
|
131
|
+
border-spacing: 0;
|
132
|
+
border: 0;
|
133
|
+
}
|
134
|
+
|
135
|
+
.pika-table th,
|
136
|
+
.pika-table td {
|
137
|
+
width: 14.285714285714286%;
|
138
|
+
padding: 0;
|
139
|
+
}
|
140
|
+
|
141
|
+
.pika-table th {
|
142
|
+
color: #999;
|
143
|
+
font-size: 12px;
|
144
|
+
line-height: 25px;
|
145
|
+
font-weight: bold;
|
146
|
+
text-align: center;
|
147
|
+
}
|
148
|
+
|
149
|
+
.pika-button {
|
150
|
+
cursor: pointer;
|
151
|
+
display: block;
|
152
|
+
box-sizing: border-box;
|
153
|
+
-moz-box-sizing: border-box;
|
154
|
+
outline: none;
|
155
|
+
border: 0;
|
156
|
+
margin: 0;
|
157
|
+
width: 100%;
|
158
|
+
padding: 5px;
|
159
|
+
color: #666;
|
160
|
+
font-size: 12px;
|
161
|
+
line-height: 15px;
|
162
|
+
text-align: right;
|
163
|
+
background: #f5f5f5;
|
164
|
+
}
|
165
|
+
|
166
|
+
.pika-week {
|
167
|
+
font-size: 11px;
|
168
|
+
color: #999;
|
169
|
+
}
|
170
|
+
|
171
|
+
.is-today .pika-button {
|
172
|
+
color: #33aaff;
|
173
|
+
font-weight: bold;
|
174
|
+
}
|
175
|
+
|
176
|
+
.is-selected .pika-button {
|
177
|
+
color: #fff;
|
178
|
+
font-weight: bold;
|
179
|
+
background: #33aaff;
|
180
|
+
box-shadow: inset 0 1px 3px #178fe5;
|
181
|
+
border-radius: 3px;
|
182
|
+
}
|
183
|
+
|
184
|
+
.is-inrange .pika-button {
|
185
|
+
background: #D5E9F7;
|
186
|
+
}
|
187
|
+
|
188
|
+
.is-startrange .pika-button {
|
189
|
+
color: #fff;
|
190
|
+
background: #6CB31D;
|
191
|
+
box-shadow: none;
|
192
|
+
border-radius: 3px;
|
193
|
+
}
|
194
|
+
|
195
|
+
.is-endrange .pika-button {
|
196
|
+
color: #fff;
|
197
|
+
background: #33aaff;
|
198
|
+
box-shadow: none;
|
199
|
+
border-radius: 3px;
|
200
|
+
}
|
201
|
+
|
202
|
+
.is-disabled .pika-button {
|
203
|
+
pointer-events: none;
|
204
|
+
cursor: default;
|
205
|
+
color: #999;
|
206
|
+
opacity: .3;
|
207
|
+
}
|
208
|
+
|
209
|
+
.pika-button:hover {
|
210
|
+
color: #fff;
|
211
|
+
background: #ff8000;
|
212
|
+
box-shadow: none;
|
213
|
+
border-radius: 3px;
|
214
|
+
}
|
215
|
+
|
216
|
+
/* styling for abbr */
|
217
|
+
.pika-table abbr {
|
218
|
+
border-bottom: none;
|
219
|
+
cursor: help;
|
220
|
+
}
|