Merge pull request #22 from edisdev/new-version-1.0.0

New version 1.0.0

Author: edisdev

README.md

@@ -1,12 +1,13 @@
 # Vue Datepicker Component
   >A Datepicker Component For VueJs
 (https://edisdev.github.io/vue-datepicker-ui)
-<img src="./resources/rangePicker.gif" width="70%">
+<img src="./resources/datepicker.gif" width="70%">
 <hr>
 <img src="./resources/rangepicker.png" width="100%"/>
 <hr>
 <img src="./resources/singlepicker.png" width="50%">
 
+
 ### Props
 ``` html
    <Calendar 
@@ -19,7 +20,10 @@
     :disabled-start-date="" 
     :disabled-end-date=""
     :text-format="" 
-    :date-format=""/>
+    :date-format=""
+    :disabled=""
+    :placeholder=""
+    :circle=""/>
 ```
 
 Prop | Value
@@ -34,10 +38,73 @@ disabled-start-date | Object . This object consists of the start and end informa
 disabled-end-date | Object . It has the same with disabled-start-end. (For range status of end Date. Ignored in single status.)
 text-format | String / Short And Long / Short and long formats of month and day names
 date-format | Object / This is the format in which the selected date will be displayed to the user. / default: { day: '2-digit', month: 'long', year: 'numeric' }
+disabled | Boolean / This parameter is the datepicker prevents opening / default: false
+placeholder | String / Input placeholder / default: 'Select Date'
+circle | Boolean / This is selected are circle or area
 
 
-DEMO (https://edisdev.github.io/vue-datepicker-ui)
+and customize style with css variables
 
+<img src="./resources/customize.png">
+
+```css
+element {
+  --v-calendar-picker-color: #fff;
+  --v-calendar-input-bg-color: #fff;
+  --v-calendar-input-bg-disable-color:rgb(245, 245, 245);
+  --v-calendar-input-text-disable-color:#b8b8b9;
+  --v-calendar-select-bg-color: #fff;
+  --v-calendar-border-color: #eaeaeb;
+  --v-calendar-triangle-color: #eaeaeb;
+  --v-calendar-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.2);
+  --v-calendar-top-shadow: 3px -14px 30px 0px rgba(0, 0, 0, 0.2);
+  --v-calendar-text-color: #7b8187;
+  --v-calendar-action-color: #7b8187;
+  --v-calendar-text-disabled-color: #b8b8b9;
+  --v-calendar-view-button-color: #7b8187;
+  --v-calendar-view-button-font-weight: 400;
+  --v-calendar-view-button-font-size: 1rem;
+  --v-calendar-datepicker-icon-color: #1bba67;
+  --v-calendar-datepicker-icon-size: 1.1rem;
+  --v-calendar-active-bg-color: #1bba67;
+  --v-calendar-active-text-color: #fff;
+  --v-calendar-range-bg-color: #edfff9;
+  --v-calendar-range-text-color: #7b8187;
+  --v-calendar-range-radius: 100%;
+  --v-calendar-day-hover-bg-color: #eaeaeb;
+  --v-calendar-day-width: 40px;
+  --v-calendar-day-height: 40px;
+  --v-calendar-day-font-size: 0.9rem;
+  --v-calendar-day-font-weight: 400;
+  --v-calendar-day-name-font-size: 0.9rem;
+  --v-calendar-day-name-font-weight: 500;
+  --v-calendar-day-name-color: #7b8187;
+  --v-calendar-input-border: 1px solid #eaeaeb;
+  --v-calendar-input-text-color: #7b8187;
+  --v-calendar-input-font-size: 0.9rem;
+  --v-calendar-input-font-weight: 400;
+  --v-calendar-content-radius: 0px;
+  --v-calendar-year-font-size: 1.1rem;
+  --v-calendar-year-color: #7b8187;
+  --v-calendar-year-font-weight: 400;
+  --v-calendar-year-disabled-color: #b8b8b9;
+  --v-calendar-year-disabled-bg-color: transparent;
+  --v-calendar-year-padding: 10px;
+  --v-calendar-year-border: none;
+  --v-calendar-year-border-radius: none;
+  --v-calendar-month-font-size: 1.1rem;
+  --v-calendar-month-color: #7b8187;
+  --v-calendar-month-font-weight: 400;
+  --v-calendar-month-disabled-color: #b8b8b9;
+  --v-calendar-month-disabled-bg-color: transparent;
+  --v-calendar-month-padding: 8px;
+  --v-calendar-month-border: none;
+  --v-calendar-month-border-radius: none;
+  }
+```
+
+
+DEMO (https://edisdev.github.io/vue-datepicker-ui)
 
 #### note:
  **date-format** object values is consists to toLocaleString in js. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString).

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>vue-datepicker-ui</title>
+    <title>VUE DATEPICKER UI - EXAMPLES</title>
   </head>
   <body>
     <noscript>