follow PullRequest chronotruck#167 from Original Repo.

Author: mag-chang

src/VueCtkDateTimePicker/_subs/CustomButton/index.vue

@@ -10,7 +10,7 @@
     }"
     tabindex="-1"
     type="button"
-    @click.stop="$emit('click')"
+    @click.prevent="$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="$emit('validate')"
     >
       <span
         class="datepicker-button-effect"

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

@@ -33,7 +33,8 @@
         >
           <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]"
@@ -49,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]"
@@ -185,7 +187,8 @@
       noShortcuts: { type: Boolean, default: null },
       firstDayOfWeek: { type: Number, default: null },
       customShortcuts: { type: Array, default: () => ([]) },
-      visible: { type: Boolean, default: null }
+      visible: { type: Boolean, default: null },
+      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',
@@ -139,10 +140,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"
@@ -52,6 +53,7 @@
             :custom-shortcuts="customShortcuts"
             :no-keyboard="noKeyboard"
             :locale="locale"
+            :reverse-y-m-order="reverseYMOrder"
             @change-month="changeMonth"
             @change-year-month="changeYearMonth"
             @close="$emit('close')"
@@ -141,7 +143,8 @@
       customShortcuts: { type: Array, default: null },
       noKeyboard: { type: Boolean, default: false },
       right: { type: Boolean, default: false },
-      behaviour: { type: Object, default: () => ({}) }
+      behaviour: { type: Object, default: () => ({}) },
+      reverseYMOrder: { type: Boolean, default: false }
     },
     data () {
       return {

src/VueCtkDateTimePicker/index.vue

@@ -31,7 +31,7 @@
     <div
       v-if="hasPickerOpen && overlay"
       class="time-picker-overlay"
-      @click.stop="closePicker"
+      @click.prevent.stop="closePicker"
     />
 
     <!-- Date picker container -->
@@ -71,6 +71,7 @@
       :no-keyboard="noKeyboard"
       :right="right"
       :behaviour="_behaviour"
+      :reverse-y-m-order="reverseYMOrder"
       @validate="validate"
       @close="closePicker"
     />

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/VueCtkDateTimePicker/props.js

@@ -56,5 +56,6 @@ export default {
   behaviour: { type: Object, default: () => ({}) },
   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 }
 }

src/assets/scss/helpers/_flex.scss

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