Added time picker functionality for date picker.

Author: ManukMinasyan

README.md

@@ -125,6 +125,7 @@ ___
 | dateFormat                   | String         | 'dd/mm/yyyy'       | 'yyyy/mm/dd'        | Date formatting string                       |
 | isDatePicker                   | Boolean         | false       | true        | Enable or disable date picker                     |
 | isDateRange                   | Boolean         | false       | true        | Enable or disable date range                     |
+| withTimePicker                   | Boolean         | false       | true        | Enable or disable time picker, working only with isDatePicker                     |
 | isMultiple                   | Boolean         | false       | true        | Enable multiple calendar function                     |
 | calendarsCount                   | Number         | 1       | 3        | Count of calendars, working only is prop isMultiple                    |
 | isModal                   | Boolean         | false       | true        | Enable modal calendar function                    |

package.json

@@ -6,7 +6,7 @@
   },
   "name": "vue-functional-calendar",
   "description": "A style-uninstallable datepicker component for Vue.js",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "license": "MIT",
   "repository": {
     "type": "git",

src/Demo.vue

@@ -4,13 +4,14 @@
                              ref="Calendar"
                              v-model="calendarData2"
                              :sunday-start="false"
-                             :is-modal="false"
-                             :date-format="'dd.mm.yyyy'"
+                             :is-modal="true"
+                             :date-format="'yyyy-mm-dd'"
                              :change-month-function="true"
                              :is-typeable="true"
                              :change-year-function="true"
-                             :is-date-picker="false"
-                             :is-date-range="true"
+                             :is-date-picker="true"
+                             :is-date-range="false"
+                             :with-time-picker="true"
                              :is-multiple="false"
                              :calendars-count="2"
                              :marked-date-range="{start: '22.4.2019', end: '24.4.2019'}"
@@ -109,7 +110,7 @@
     }
 
     .demo-calendar {
-        width: 30%
+        width: 20%
     }
 
     .demo-calendar2 {

src/assets/icons/angle-down-solid.svg

@@ -70,7 +70,7 @@ input.vfc-single-input {
     }
 
     .vfc-months {
-      flex:1 1 75%;
+      flex: 1 1 75%;
       padding: 0;
       display: flex;
       flex-wrap: wrap;
@@ -111,6 +111,101 @@ input.vfc-single-input {
     }
   }
 
+  .vfc-time-picker-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .vfc-close {
+      position: absolute;
+      right: 32px;
+      top: 32px;
+      width: 32px;
+      height: 32px;
+      opacity: 0.3;
+    }
+    .vfc-close:hover {
+      opacity: 1;
+    }
+    .vfc-close:before, .vfc-close:after {
+      position: absolute;
+      left: 15px;
+      content: ' ';
+      height: 33px;
+      width: 2px;
+      background-color: #333;
+    }
+    .vfc-close:before {
+      transform: rotate(45deg);
+    }
+    .vfc-close:after {
+      transform: rotate(-45deg);
+    }
+
+    .vfc-modal-time-mechanic {
+      position: relative;
+      width: 40%;
+      margin: 0 auto;
+      .vfc-modal-time-line {
+        text-align: center;
+        color: #7d7d7d;
+        font-size: 20px;
+        padding-top: 15px;
+        padding-bottom: 15px;
+      }
+    }
+
+    .vfc-modal-append {
+      color: #7d7d7d;
+      font-weight: normal;
+      display: flex;
+      justify-content: space-between;
+      .vfc-arrow {
+        opacity: 0.3;
+        transition: 0.2s;
+      }
+      .vfc-arrow:hover {
+        opacity: 1;
+      }
+      .vfc-arrow-up {
+        width: 0;
+        height: 0;
+        border-left: 20px solid transparent;
+        border-right: 20px solid transparent;
+        border-bottom: 20px solid #333333;
+      }
+      .vfc-arrow-down {
+        width: 0;
+        height: 0;
+        border-left: 20px solid transparent;
+        border-right: 20px solid transparent;
+        border-top: 20px solid #333333;
+      }
+    }
+
+    .vfc-modal-midle {
+      display: inline-block;
+    }
+
+    .vfc-modal-midle-dig {
+      display: inline-block;
+      text-align: center;
+    }
+
+    .vfc-modal-digits {
+      display: flex;
+      justify-content: space-between;
+      font-size: 50px;
+      select {
+        margin: 5px 0;
+        width: 100%;
+        text-align: center;
+        text-align-last:center;
+      }
+    }
+  }
+
   .vfc-navigation-buttons {
     flex: 0 1 15%;
     margin-top: -10px;
@@ -171,7 +266,7 @@ input.vfc-single-input {
     }
 
     .vfc-calendars {
-      flex:1 1 75%;
+      flex: 1 1 75%;
       display: flex;
 
       .vfc-calendar {
@@ -185,6 +280,7 @@ input.vfc-single-input {
           &.vfc-content {
             margin: 0 20px;
             z-index: 100;
+
             h2 {
               &.vfc-top-date {
                 text-align: center;