Alexey Boroda / kristal-estet

Commit 8528ff71ab301f98a64421d9ddad89f9007dbae8

Authored by Eugeny Galkovskiy
1 parent 6afa0829

Запись на приём, датапикер

Showing 3 changed files with 47 additions and 28 deletions   Show diff stats
Inline Side-by-side
frontend/views/site/appment.php
  Show/Hide comments   View file @8528ff7
... ... @@ -37,15 +37,15 @@ $this->params[ 'breadcrumbs' ][] = $this->title;
37 37  
38 38 <p class="help-block help-block-error"></p>
39 39 </div>
40   - <div class="form-group field-appointment-date required has-datepicker">
  40 + <div class="form-group field-appointment-date required has-datepicker2">
41 41 <div class="on_input_"></div>
42 42 <label class="control-label" for="appointment-date">Дата</label>
43 43 <input type="text" id="appointment-date" class="form-control" name="Appointment[date]">
44 44  
45 45 <p class="help-block help-block-error"></p>
46 46 </div>
47   - <div class="datepicker-wr">
48   - <div id="datepicker"></div>
  47 + <div class="datepicker-wr2">
  48 + <div id="datepicker2"></div>
49 49 </div>
50 50 <div class="form-group field-appointment-time">
51 51 <div class="on_input_"></div>
... ...
frontend/web/css/datepicker.css
  Show/Hide comments   View file @8528ff7
1 1  
2   -.datepicker-wr
  2 +.datepicker-wr, .datepicker-wr2
3 3 {
4 4 position: absolute;
5 5 z-index: 1000010;
... ... @@ -12,7 +12,7 @@
12 12 border-radius: 0;
13 13 width: 100%;
14 14 }
15   -.datepicker-wr .ui-datepicker-title select,.form-question-wr input,.form-question-wr select,.form-question-wr textarea
  15 +.datepicker-wr .ui-datepicker-title select,.datepicker-wr2 .ui-datepicker-title select,.form-question-wr input,.form-question-wr select,.form-question-wr textarea
16 16 {
17 17 width:100%;
18 18 float:left;
... ... @@ -26,7 +26,7 @@
26 26 font-size:18px
27 27 }
28 28  
29   -.datepicker-wr .ui-datepicker-title select
  29 +.datepicker-wr .ui-datepicker-title select,.datepicker-wr2 .ui-datepicker-title select
30 30 {
31 31 width:auto;
32 32 padding-left:8px;
... ... @@ -162,7 +162,7 @@
162 162 background:url(../img/ico-all/calendar-ico.png) 99% 50% no-repeat
163 163 }
164 164  
165   -.datepicker-wr
  165 +.datepicker-wr,.datepicker-wr2
166 166 {
167 167 background-color:#fff;
168 168 margin-left:0;
... ... @@ -170,7 +170,7 @@
170 170 z-index: 1000010;
171 171 }
172 172  
173   -.datepicker-wr .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all
  173 +.datepicker-wr .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all,.datepicker-wr2 .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all
174 174 {
175 175 text-align:center;
176 176 max-width: 280px;
... ... @@ -183,20 +183,20 @@
183 183 border:none
184 184 }
185 185  
186   -.datepicker-wr .ui-datepicker-calendar tr,.ui-datepicker-calendar td
  186 +.datepicker-wr .ui-datepicker-calendar tr,.datepicker-wr2 .ui-datepicker-calendar tr,.ui-datepicker-calendar td
187 187 {
188 188 margin:0;
189 189 padding:0
190 190 }
191 191  
192   -.datepicker-wr table.ui-datepicker-calendar th
  192 +.datepicker-wr table.ui-datepicker-calendar th,.datepicker-wr2 table.ui-datepicker-calendar th
193 193 {
194 194 color:#000;
195 195 text-transform:uppercase;
196 196 font-size:10px
197 197 }
198 198  
199   -.datepicker-wr table.ui-datepicker-calendar
  199 +.datepicker-wr table.ui-datepicker-calendar,.datepicker-wr2 table.ui-datepicker-calendar
200 200 {
201 201 max-width: 280px;
202 202 width: 100%;
... ... @@ -204,7 +204,7 @@
204 204 margin:0 auto 23px
205 205 }
206 206  
207   -.datepicker-wr .ui-datepicker-calendar a
  207 +.datepicker-wr .ui-datepicker-calendar a,.datepicker-wr2 .ui-datepicker-calendar a
208 208 {
209 209 font-size:18px;
210 210 color:#103b4e;
... ... @@ -217,12 +217,12 @@
217 217 padding:1px 0
218 218 }
219 219  
220   -.datepicker-wr table thead span
  220 +.datepicker-wr table thead span,.datepicker-wr2 table thead span
221 221 {
222 222 color:#103b4e
223 223 }
224 224  
225   -.datepicker-wr .ui-datepicker-unselectable.ui-state-disabled span
  225 +.datepicker-wr .ui-datepicker-unselectable.ui-state-disabled span,.datepicker-wr2 .ui-datepicker-unselectable.ui-state-disabled span
226 226 {
227 227 color:#7499bd;
228 228 font-size:17px;
... ... @@ -233,7 +233,7 @@
233 233 position:relative
234 234 }
235 235  
236   -.datepicker-wr .ui-datepicker-calendar a,.datepicker-wr .ui-datepicker-unselectable.ui-state-disabled span
  236 +.datepicker-wr .ui-datepicker-calendar a,.datepicker-wr .ui-datepicker-unselectable.ui-state-disabled span,.datepicker-wr2 .ui-datepicker-calendar a,.datepicker-wr2 .ui-datepicker-unselectable.ui-state-disabled span
237 237 {
238 238 width:23px;
239 239 height:23px;
... ... @@ -242,7 +242,7 @@
242 242 background-color:#fff
243 243 }
244 244  
245   -.datepicker-wr .ui-datepicker-next.ui-corner-all,.datepicker-wr .ui-datepicker-prev.ui-corner-all
  245 +.datepicker-wr .ui-datepicker-next.ui-corner-all,.datepicker-wr .ui-datepicker-prev.ui-corner-all,.datepicker-wr2 .ui-datepicker-next.ui-corner-all,.datepicker-wr2 .ui-datepicker-prev.ui-corner-all
246 246 {
247 247 width:20px;
248 248 height:20px;
... ... @@ -255,7 +255,7 @@
255 255 position:absolute
256 256 }
257 257  
258   -.datepicker-wr .ui-datepicker-next.ui-corner-all
  258 +.datepicker-wr .ui-datepicker-next.ui-corner-all,.datepicker-wr2 .ui-datepicker-next.ui-corner-all
259 259 {
260 260 background-position:0 -36px;
261 261 right:1px;
... ... @@ -269,19 +269,19 @@
269 269 outline:0!important
270 270 }
271 271  
272   -.datepicker-wr .ui-datepicker-prev.ui-corner-all
  272 +.datepicker-wr .ui-datepicker-prev.ui-corner-all,.datepicker-wr2 .ui-datepicker-prev.ui-corner-all
273 273 {
274 274 background-position:0 -66px;
275 275 left:2px
276 276 }
277 277  
278   -.datepicker-wr .ui-datepicker-prev.ui-corner-all.ui-state-disabled
  278 +.datepicker-wr .ui-datepicker-prev.ui-corner-all.ui-state-disabled,.datepicker-wr2 .ui-datepicker-prev.ui-corner-all.ui-state-disabled
279 279 {
280 280 background-position:0 -6px;
281 281 cursor:default
282 282 }
283 283  
284   -.datepicker-wr .datepicker-wr:after
  284 +.datepicker-wr .datepicker-wr:after,.datepicker-wr2 .datepicker-wr2:after
285 285 {
286 286 content:'';
287 287 width:302px;
... ... @@ -292,18 +292,18 @@
292 292 top:68px
293 293 }
294 294  
295   -.datepicker-wr .ui-datepicker-calendar td
  295 +.datepicker-wr .ui-datepicker-calendar td,.datepicker-wr2 .ui-datepicker-calendar td
296 296 {
297 297 height:26px
298 298 }
299 299  
300   -.datepicker-wr .ui-state-active
  300 +.datepicker-wr .ui-state-active, .datepicker-wr2 .ui-state-active
301 301 {
302 302 background:#fff200!important;
303 303 box-shadow:0 -1px 0 3px #fff200
304 304 }
305 305  
306   -.datepicker-wr
  306 +.datepicker-wr,.datepicker-wr2
307 307 {
308 308 color:#103b4e;
309 309 width:100%;
... ... @@ -316,12 +316,12 @@
316 316 box-sizing:border-box
317 317 }
318 318  
319   -.datepicker-wr.opened
  319 +.datepicker-wr.opened,.datepicker-wr2.opened
320 320 {
321 321 display:block
322 322 }
323 323  
324   -.datepicker-wr .ui-datepicker-next,.datepicker-wr .ui-datepicker-prev
  324 +.datepicker-wr .ui-datepicker-next,.datepicker-wr .ui-datepicker-prev,.datepicker-wr2 .ui-datepicker-next,.datepicker-wr2 .ui-datepicker-prev
325 325 {
326 326 background-color:inherit;
327 327 margin-left:0;
... ... @@ -329,13 +329,13 @@
329 329 margin-top:6px
330 330 }
331 331  
332   -.datepicker-wr .ui-datepicker-title
  332 +.datepicker-wr .ui-datepicker-title,.datepicker-wr2 .ui-datepicker-title
333 333 {
334 334 display:table;
335 335 margin:0 auto
336 336 }
337 337  
338   -.datepicker-wr .ui-datepicker-year
  338 +.datepicker-wr .ui-datepicker-year,.datepicker-wr2 .ui-datepicker-year
339 339 {
340 340 margin-left:10px
341 341 }
... ... @@ -351,7 +351,7 @@
351 351 position: absolute;
352 352 right: 15px;
353 353 }
354   - .datepicker-wr{
  354 + .datepicker-wr,.datepicker-wr2{
355 355 left:0;
356 356 }
357 357 }
358 358 \ No newline at end of file
... ...
frontend/web/js/script.js
  Show/Hide comments   View file @8528ff7
... ... @@ -124,9 +124,21 @@ $(
124 124 minDate: new Date(),
125 125 maxDate: "+1Y"
126 126 }).val('');
  127 + $("#datepicker2").datepicker({
  128 + changeMonth: true,
  129 + changeYear: true,
  130 + altField: ".has-datepicker2 input",
  131 + onSelect: function(date) {
  132 + $("#datepicker2").parent().toggleClass("opened");
  133 + $(".on_input_.actived").removeClass("actived");
  134 + },
  135 + minDate: new Date(),
  136 + maxDate: "+1Y"
  137 + }).val('');
127 138  
128 139 // Set initial value of inputs
129 140 $(".has-datepicker input").val('');
  141 + $(".has-datepicker2 input").val('');
130 142  
131 143 $(".has-datepicker input").on("focus",function(){$("#datepicker").parent().addClass("opened");});
132 144 $(document).mouseup(function (e) {
... ... @@ -135,6 +147,13 @@ $(
135 147 $("#datepicker").parent().removeClass("opened");
136 148 }
137 149 });
  150 + $(".has-datepicker2 input").on("focus",function(){$("#datepicker2").parent().addClass("opened");});
  151 + $(document).mouseup(function (e) {
  152 + var container = $("#datepicker2");
  153 + if (container.has(e.target).length === 0){
  154 + $("#datepicker2").parent().removeClass("opened");
  155 + }
  156 + });
138 157  
139 158  
140 159 $(".modal-link")
... ...