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

Eugeny Galkovskiy
1 parent 6afa0829
Showing 3 changed files with 47 additions and 28 deletions Show diff stats
frontend/views/site/appment.php
frontend/web/css/datepicker.css
frontend/web/js/script.js
@@ -37,15 +37,15 @@ $this-&gt;params[ &#39;breadcrumbs&#39; ][] = $this-&gt;title;
                                 <p class="help-block help-block-error"></p>
                             </div>
-                            <div class="form-group field-appointment-date required has-datepicker">
+                            <div class="form-group field-appointment-date required has-datepicker2">
                                 <div class="on_input_"></div>
                                 <label class="control-label" for="appointment-date">Дата</label>
                                 <input type="text" id="appointment-date" class="form-control" name="Appointment[date]">
                                 <p class="help-block help-block-error"></p>
                             </div>
-                            <div class="datepicker-wr">
-                                <div id="datepicker"></div>
+                            <div class="datepicker-wr2">
+                                <div id="datepicker2"></div>
                             </div>
                             <div class="form-group field-appointment-time">
                                 <div class="on_input_"></div>
-.datepicker-wr
+.datepicker-wr, .datepicker-wr2
 {
     position: absolute;
     z-index: 1000010;
@@ -12,7 +12,7 @@
     border-radius: 0;
     width: 100%;
 }
-.datepicker-wr .ui-datepicker-title select,.form-question-wr input,.form-question-wr select,.form-question-wr textarea
+.datepicker-wr .ui-datepicker-title select,.datepicker-wr2 .ui-datepicker-title select,.form-question-wr input,.form-question-wr select,.form-question-wr textarea
 {
     width:100%;
     float:left;
@@ -26,7 +26,7 @@
     font-size:18px
 }
-.datepicker-wr .ui-datepicker-title select
+.datepicker-wr .ui-datepicker-title select,.datepicker-wr2 .ui-datepicker-title select
 {
     width:auto;
     padding-left:8px;
@@ -162,7 +162,7 @@
     background:url(../img/ico-all/calendar-ico.png) 99% 50% no-repeat
 }
-.datepicker-wr
+.datepicker-wr,.datepicker-wr2
 {
     background-color:#fff;
     margin-left:0;
@@ -170,7 +170,7 @@
     z-index: 1000010;
 }
-.datepicker-wr .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all
+.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
 {
     text-align:center;
     max-width: 280px;
@@ -183,20 +183,20 @@
     border:none
 }
-.datepicker-wr .ui-datepicker-calendar tr,.ui-datepicker-calendar td
+.datepicker-wr .ui-datepicker-calendar tr,.datepicker-wr2 .ui-datepicker-calendar tr,.ui-datepicker-calendar td
 {
     margin:0;
     padding:0
 }
-.datepicker-wr table.ui-datepicker-calendar th
+.datepicker-wr table.ui-datepicker-calendar th,.datepicker-wr2 table.ui-datepicker-calendar th
 {
     color:#000;
     text-transform:uppercase;
     font-size:10px
 }
-.datepicker-wr table.ui-datepicker-calendar
+.datepicker-wr table.ui-datepicker-calendar,.datepicker-wr2 table.ui-datepicker-calendar
 {
     max-width: 280px;
     width: 100%;
@@ -204,7 +204,7 @@
     margin:0 auto 23px
 }
-.datepicker-wr .ui-datepicker-calendar a
+.datepicker-wr .ui-datepicker-calendar a,.datepicker-wr2 .ui-datepicker-calendar a
 {
     font-size:18px;
     color:#103b4e;
@@ -217,12 +217,12 @@
     padding:1px 0
 }
-.datepicker-wr table thead span
+.datepicker-wr table thead span,.datepicker-wr2 table thead span
 {
     color:#103b4e
 }
-.datepicker-wr .ui-datepicker-unselectable.ui-state-disabled span
+.datepicker-wr .ui-datepicker-unselectable.ui-state-disabled span,.datepicker-wr2 .ui-datepicker-unselectable.ui-state-disabled span
 {
     color:#7499bd;
     font-size:17px;
@@ -233,7 +233,7 @@
     position:relative
 }
-.datepicker-wr .ui-datepicker-calendar a,.datepicker-wr .ui-datepicker-unselectable.ui-state-disabled span
+.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
 {
     width:23px;
     height:23px;
@@ -242,7 +242,7 @@
     background-color:#fff
 }
-.datepicker-wr .ui-datepicker-next.ui-corner-all,.datepicker-wr .ui-datepicker-prev.ui-corner-all
+.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
 {
     width:20px;
     height:20px;
@@ -255,7 +255,7 @@
     position:absolute
 }
-.datepicker-wr .ui-datepicker-next.ui-corner-all
+.datepicker-wr .ui-datepicker-next.ui-corner-all,.datepicker-wr2 .ui-datepicker-next.ui-corner-all
 {
     background-position:0 -36px;
     right:1px;
@@ -269,19 +269,19 @@
     outline:0!important
 }
-.datepicker-wr .ui-datepicker-prev.ui-corner-all
+.datepicker-wr .ui-datepicker-prev.ui-corner-all,.datepicker-wr2 .ui-datepicker-prev.ui-corner-all
 {
     background-position:0 -66px;
     left:2px
 }
-.datepicker-wr .ui-datepicker-prev.ui-corner-all.ui-state-disabled
+.datepicker-wr .ui-datepicker-prev.ui-corner-all.ui-state-disabled,.datepicker-wr2 .ui-datepicker-prev.ui-corner-all.ui-state-disabled
 {
     background-position:0 -6px;
     cursor:default
 }
-.datepicker-wr .datepicker-wr:after
+.datepicker-wr .datepicker-wr:after,.datepicker-wr2 .datepicker-wr2:after
 {
     content:'';
     width:302px;
@@ -292,18 +292,18 @@
     top:68px
 }
-.datepicker-wr .ui-datepicker-calendar td
+.datepicker-wr .ui-datepicker-calendar td,.datepicker-wr2 .ui-datepicker-calendar td
 {
     height:26px
 }
-.datepicker-wr .ui-state-active
+.datepicker-wr .ui-state-active, .datepicker-wr2 .ui-state-active
 {
     background:#fff200!important;
     box-shadow:0 -1px 0 3px #fff200
 }
-.datepicker-wr
+.datepicker-wr,.datepicker-wr2
 {
     color:#103b4e;
     width:100%;
@@ -316,12 +316,12 @@
     box-sizing:border-box
 }
-.datepicker-wr.opened
+.datepicker-wr.opened,.datepicker-wr2.opened
 {
     display:block
 }
-.datepicker-wr .ui-datepicker-next,.datepicker-wr .ui-datepicker-prev
+.datepicker-wr .ui-datepicker-next,.datepicker-wr .ui-datepicker-prev,.datepicker-wr2 .ui-datepicker-next,.datepicker-wr2 .ui-datepicker-prev
 {
     background-color:inherit;
     margin-left:0;
@@ -329,13 +329,13 @@
     margin-top:6px
 }
-.datepicker-wr .ui-datepicker-title
+.datepicker-wr .ui-datepicker-title,.datepicker-wr2 .ui-datepicker-title
 {
     display:table;
     margin:0 auto
 }
-.datepicker-wr .ui-datepicker-year
+.datepicker-wr .ui-datepicker-year,.datepicker-wr2 .ui-datepicker-year
 {
     margin-left:10px
 }
@@ -351,7 +351,7 @@
         position: absolute;
         right: 15px;
     }
-    .datepicker-wr{
+    .datepicker-wr,.datepicker-wr2{
         left:0;
     }
 }
 \ No newline at end of file
@@ -124,9 +124,21 @@ $(
             minDate: new Date(),
             maxDate: "+1Y"
         }).val('');
+        $("#datepicker2").datepicker({
+            changeMonth: true,
+            changeYear: true,
+            altField: ".has-datepicker2 input",
+            onSelect: function(date) {
+                $("#datepicker2").parent().toggleClass("opened");
+                $(".on_input_.actived").removeClass("actived");
+            },
+            minDate: new Date(),
+            maxDate: "+1Y"
+        }).val('');
         // Set initial value of inputs
         $(".has-datepicker input").val('');
+        $(".has-datepicker2 input").val('');
         $(".has-datepicker input").on("focus",function(){$("#datepicker").parent().addClass("opened");});
         $(document).mouseup(function (e) {
@@ -135,6 +147,13 @@ $(
                 $("#datepicker").parent().removeClass("opened");
             }
         });
+        $(".has-datepicker2 input").on("focus",function(){$("#datepicker2").parent().addClass("opened");});
+        $(document).mouseup(function (e) {
+            var container = $("#datepicker2");
+            if (container.has(e.target).length === 0){
+                $("#datepicker2").parent().removeClass("opened");
+            }
+        });
         $(".modal-link")