Merge branch 'release/2.4.0'

README.md

@@ -131,12 +131,14 @@ Here is an example of [UMD implementation](https://codepen.io/louismazel/pen/jQW
 | first-day-of-week           | Int (0 to 7)      | no       | -                           |
 | disabled-dates (8)          | Array`<string>`   | no       | []                          |
 | disabled-hours (9)          | Array`<string>`   | no       | -                           |
+| shortcut                    | String            | no       | -                           |
 | custom-shortcuts (10)       | Array`<object>`   | no       | -                           |
 | disabled-weekly (11)        | Array`<integer>`  | no       | []                          |
 | no-keyboard (12)            | Boolean           | no       | false                       |
 | right (13)                  | Boolean           | no       | false                       |
 | noClearButton               | Boolean           | no       | false                       |
 | behaviour                   | Object            | no       | [See behaviour](#Behaviour) |
+| id (14)                     | String            | no       | undefined                   |
 
 (1) hint : Is a text that replaces the label/placeholder (Ex : Error designation)
 
@@ -156,38 +158,61 @@ Here is an example of [UMD implementation](https://codepen.io/louismazel/pen/jQW
 
 (9) disabled-hours : Must be an Array of hours in 24h format ('00' to '23') : `['00','01','02','03','04','05','06','07','19','20','21','22','23']`
 
-(10) custom-shortcuts - It's an Array of Objects like this :
+(10) custom-shortcuts - It's an array of objects. Each object represents a single shortcut.
 
 ```js
 [
-  { label: `Aujourd'hui`, value: 'day', isSelected: false },
-  { label: 'Yesterday', value: '-day', isSelected: false },
-  { label: 'This Week', value: 'week', isSelected: true },
-  { label: 'Last Week', value: '-week', isSelected: false },
-  { label: 'This iso Week', value: 'isoWeek', isSelected: true },
-  { label: 'Last iso Week', value: '-isoWeek', isSelected: false },
-  { label: 'This Month', value: 'month', isSelected: false },
-  { label: 'Last Month', value: '-month', isSelected: false },
-  { label: 'This Year', value: 'year', isSelected: false },
-  { label: 'Last Year', value: '-year', isSelected: false },
-  { label: 'Last 5 days', value: 5, isSelected: false }
+  { key: 'thisWeek', label: 'This week', value: 'isoWeek' },
+  { key: 'lastWeek', label: 'Last week', value: '-isoWeek' },
+  { key: 'last7Days', label: 'Last 7 days', value: 7 },
+  { key: 'last30Days', label: 'Last 30 days', value: 30 },
+  { key: 'thisMonth', label: 'This month', value: 'month' },
+  { key: 'lastMonth', label: 'Last month', value: '-month' },
+  { key: 'thisYear', label: 'This year', value: 'year' },
+  { key: 'lastYear', label: 'Last year', value: '-year' }
 ];
 ```
 
-Shortcut types allowed : `['day', '-day', 'isoWeek', '-isoWeek', 'month', '-month', 'year', '-year', 'week', '-week']`
+Shortcut types allowed are : `['day', '-day', 'isoWeek', '-isoWeek', 'quarter', 'month', '-month', 'year', '-year', 'week', '-week']`
+For each shortcut, a `key`, `label` and `value` must be specified. The `key` is a unique key for that specific shortcut.
+Additional values can be passed as a `callback` function that will be called whenever the user clicks on the shortcut. The callback receives an object as first argument with the `start` and `end` values, with the `shortcut` object itself.
+You can use this feature for translate existings shortcuts.
+If the **value of shortcut is a number** (Integer), this number correspond to number of day (for 5 --> Last 5 days).
 
-If the value of shortcut is a number (Integer), this number correspond to number of day (for 5 --> Last 5 days)
+If the **value of shortcut is a function**, we'll use it to generate the `start` and `end` values. This function should return an object with the start & end values. Both values **must be a moment object**. The function is called when the user clicks on the shortcut button.
 
-You can use this feature for translate the shortcuts
+```js
+[
+  {
+    key: 'customValue',
+    label: 'My custom thing',
+    value: () => {
+      return {
+        start: moment(),
+        end: moment().add(2, 'days')
+      }
+    },
+    callback: ({ start, end }) => {
+      console.log('My shortcut was clicked with values: ', start, end)
+    }
+  },
+];
+```
 
-When you set `isSelected` to true, the shortcut is selected by default
+With the `shortcut` property, you can specify a shortcut that's selected by default by passing it's `key` value.
+
+```js
+  :shortcut="'thisMonth'"
+```
 
 (11) disabled-weekly : Days of the week which are disabled every week, in Array format with day index, Sunday as 0 and Saturday as 6: `[0,4,6]`
 
 (12) no-keyboard : Disable keyboard accessibility & navigation
 
 (13) right : add this attribute to align the picker on right
 
+(14) id : it assign id such as 'passedstring-input' to input help diffrentiate between two date-time-picker on same component.
+
 > Any additionnal attribute passed to the component will be automatically be binded to the input component. (eg. if you passes a `type` attribute, the `<input>` will receive it).
 
 ## Behaviour

docs/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link rel=icon href=favicon.ico><title>vue-ctk-date-time-picker</title><link href=css/app.916963e2.css rel=preload as=style><link href=js/app.f4fb2928.js rel=preload as=script><link href=js/chunk-vendors.c0d9cd47.js rel=preload as=script><link href=css/app.916963e2.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-ctk-date-time-picker doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.c0d9cd47.js></script><script src=js/app.f4fb2928.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link rel=icon href=favicon.ico><title>vue-ctk-date-time-picker</title><link href=css/app.bb77194d.css rel=preload as=style><link href=js/app.cb3df652.js rel=preload as=script><link href=js/chunk-vendors.5c79952b.js rel=preload as=script><link href=css/app.bb77194d.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-ctk-date-time-picker doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.5c79952b.js></script><script src=js/app.cb3df652.js></script></body></html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-ctk-date-time-picker",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "A vue component for select date & time (by Chronotruck)",
   "author": "Louis Mazel <[email protected]>",
   "scripts": {

src/App.vue

@@ -464,17 +464,14 @@
           })
         ),
         customShortcuts: [
-          { label: `Aujourd'hui`, value: 'day', isSelected: false },
-          { label: 'Yesterday', value: '-day', isSelected: false },
-          { label: 'This Week', value: 'week', isSelected: true },
-          { label: 'Last Week', value: '-week', isSelected: false },
-          { label: 'This iso Week', value: 'isoWeek', isSelected: true },
-          { label: 'Last iso Week', value: '-isoWeek', isSelected: false },
-          { label: 'This Month', value: 'month', isSelected: false },
-          { label: 'Last Month', value: '-month', isSelected: false },
-          { label: 'This Month', value: 'year', isSelected: false },
-          { label: 'Last Month', value: '-year', isSelected: false },
-          { label: 'Last 5 days', value: 5, isSelected: false }
+          { key: 'thisWeek', label: 'This week', value: 'isoWeek' },
+          { key: 'lastWeek', label: 'Last week', value: '-isoWeek' },
+          { key: 'last7Days', label: 'Last 7 days', value: 7 },
+          { key: 'last30Days', label: 'Last 30 days', value: 30 },
+          { key: 'thisMonth', label: 'This month', value: 'month' },
+          { key: 'lastMonth', label: 'Last month', value: '-month' },
+          { key: 'thisYear', label: 'This year', value: 'year' },
+          { key: 'lastYear', label: 'Last year', value: '-year' }
         ]
       }
     }

src/VueCtkDateTimePicker/_subs/CustomInput/index.vue

@@ -167,7 +167,7 @@
     }
     &.has-error {
       .field-input {
-        border-color: orangered !important;
+        border-color: orangered;
       }
       .field-label{
         opacity: 1;
@@ -210,7 +210,7 @@
       }
     }
     .text-danger {
-      color: orangered !important;
+      color: orangered;
     }
     &.is-dark {
       ::-webkit-input-placeholder { /* WebKit, Blink, Edge */