Change format in header to be more configurable

README.md

@@ -129,6 +129,7 @@ Here is an example of UMD implementation: https://codepen.io/louismazel/pen/jQWN
 | no-keyboard (12) | Boolean | no | false |
 | right (13) | Boolean | no | false |
 | noClearButton | Boolean | no | false |
+| reverseYMOrder | Boolean | no | false |
 
 (1) hint : Is a text that replaces the label/placeholder (Ex : Error designation)
 
@@ -240,4 +241,4 @@ This project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_Li
 
 # Credit
 
-Open source time proudly sponsored by [Chronotruck](https://www.chronotruck.com)
+Open source time proudly sponsored by [Chronotruck](https://www.chronotruck.com)

src/VueCtkDateTimePicker/_subs/CustomButton.vue

@@ -10,7 +10,7 @@
     }"
     tabindex="-1"
     type="button"
-    @click.stop="$emit('click')"
+    @click.prevent.stop="$emit('click')"
     @focus="$emit('focus')"
     @blur="$emit('blur')"
     @mouseover="$emit('mouseover')"

src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/ButtonValidate.vue

@@ -27,7 +27,7 @@
       type="button"
       tabindex="-1"
       class="datepicker-button validate flex align-center justify-content-center"
-      @click.stop="$emit('validate')"
+      @click.prevent.stop="$emit('validate')"
     >
       <span
         class="datepicker-button-effect"

src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue

@@ -29,10 +29,12 @@
         </div>
         <div
           class="datepicker-container-label flex-1 flex justify-content-center"
+          :class="reverseYMOrder ? 'flex-direction-reversed' : ''"
         >
           <TransitionGroup
             :name="transitionLabelName"
-            class="h-100 flex align-center flex-1 flex justify-content-right"
+            class="h-100 flex align-center flex-1 flex"
+            :class="reverseYMOrder ? 'justify-content-left' : 'justify-content-right'"
           >
             <CustomButton
               v-for="m in [month]"
@@ -48,6 +50,7 @@
           <TransitionGroup
             :name="transitionLabelName"
             class="h-100 flex align-center flex-1 flex"
+            :class="reverseYMOrder ? 'justify-content-right' : 'justify-content-left'"
           >
             <CustomButton
               v-for="y in [year]"
@@ -183,7 +186,8 @@
       noShortcuts: { type: Boolean, default: Boolean },
       firstDayOfWeek: { type: Number, default: Number },
       customShortcuts: { type: Array, default: Array },
-      visible: { type: Boolean, default: Boolean }
+      visible: { type: Boolean, default: Boolean },
+      reverseYMOrder: { type: Boolean, default: false }
     },
     data () {
       return {

src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/HeaderPicker.vue

@@ -107,6 +107,7 @@
 
 <script>
   import moment from 'moment'
+  const YEAR_REGEX = new RegExp('([/, -]+)?(YYYYY?|YY|Yr)[年년年]?([/, -]+)?')
 
   export default {
     name: 'HeaderPicker',
@@ -116,6 +117,7 @@
       onlyTime: { type: Boolean, default: Boolean },
       transitionName: { type: String, default: String },
       format: { type: String, default: String },
+      locale: { type: String, default: String },
       timeFormat: { type: String, default: String },
       noTime: { type: Boolean, default: Boolean },
       range: { type: Boolean, default: Boolean },
@@ -139,10 +141,10 @@
         return date
       },
       year () {
-        return this.dateTime.format('YYYY')
+        return this.dateTime.year()
       },
       getDateFormatted () {
-        return this.dateTime.format('ddd D MMM')
+        return this.dateTime.format(moment.localeData(this.locale).longDateFormat('LL').replace(YEAR_REGEX, ''))
       },
       isFormatTwelve () {
         return this.format ? (this.format.indexOf('a') > -1) || (this.format.indexOf('A') > -1) : false

src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue

@@ -7,7 +7,7 @@
       :class="{'inline': inline, 'is-dark': dark, 'visible': visible}"
       :style="responsivePosition"
       class="datetimepicker flex"
-      @click.stop
+      @click.prevent.stop
     >
       <div
         :style="[responsivePosition, width]"
@@ -22,6 +22,7 @@
           :only-time="onlyTime"
           :format="format"
           :time-format="timeFormat"
+          :locale="locale"
           :transition-name="transitionName"
           :no-time="onlyDate"
           :dark="dark"
@@ -51,6 +52,7 @@
             :custom-shortcuts="customShortcuts"
             :no-keyboard="noKeyboard"
             :locale="locale"
+            :reverse-y-m-order="reverseYMOrder"
             @change-month="changeMonth"
             @change-year-month="changeYearMonth"
             @close="$emit('close')"
@@ -137,7 +139,8 @@
       firstDayOfWeek: { type: Number, default: Number },
       customShortcuts: { type: Array, default: Array },
       noKeyboard: { type: Boolean, default: false },
-      right: { type: Boolean, default: false }
+      right: { type: Boolean, default: false },
+      reverseYMOrder: { type: Boolean, default: false }
     },
     data () {
       return {

src/VueCtkDateTimePicker/index.vue

@@ -27,7 +27,7 @@
     <div
       v-if="hasPickerOpen && overlay"
       class="time-picker-overlay"
-      @click.stop="toggleDatePicker(false)"
+      @click.prevent.stop="toggleDatePicker(false)"
     />
     <PickersContainer
       v-if="!disabled && isMounted"
@@ -63,6 +63,7 @@
       :custom-shortcuts="customShortcuts"
       :no-keyboard="noKeyboard"
       :right="right"
+      :reverse-y-m-order="reverseYMOrder"
       @validate="validate"
       @close="toggleDatePicker(false)"
     />
@@ -154,7 +155,8 @@
       noValueToCustomElem: { type: Boolean, default: false },
       noKeyboard: { type: Boolean, default: false },
       right: { type: Boolean, default: false },
-      noClearButton: { type: Boolean, default: false }
+      noClearButton: { type: Boolean, default: false },
+      reverseYMOrder: { type: Boolean, default: false }
     },
     data () {
       return {

src/VueCtkDateTimePicker/modules/month.js

@@ -16,7 +16,7 @@ export default class Month {
   }
 
   getFormatted () {
-    return this.start.format('MMMM')
+    return this.start.format('MMM')
   }
 
   getYear () {

src/assets/scss/helpers/_flex.scss

@@ -146,3 +146,6 @@
 .flex-grow {
   flex-grow: 1;
 }
+.flex-direction-reversed {
+  flex-direction: row-reverse;
+}