diff --git a/README.md b/README.md index 533ab726..556653e4 100644 --- a/README.md +++ b/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) \ No newline at end of file +Open source time proudly sponsored by [Chronotruck](https://www.chronotruck.com) diff --git a/src/VueCtkDateTimePicker/_subs/CustomButton.vue b/src/VueCtkDateTimePicker/_subs/CustomButton.vue index 38ed7f72..2e26c116 100644 --- a/src/VueCtkDateTimePicker/_subs/CustomButton.vue +++ b/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')" diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/ButtonValidate.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/ButtonValidate.vue index abf6a8b1..89011e18 100644 --- a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/ButtonValidate.vue +++ b/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')" >
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 diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue index e37f83d1..a4a8dcfb 100644 --- a/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue +++ b/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 >
@@ -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 { diff --git a/src/VueCtkDateTimePicker/modules/month.js b/src/VueCtkDateTimePicker/modules/month.js index 4e13e248..54e609fa 100644 --- a/src/VueCtkDateTimePicker/modules/month.js +++ b/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 () { diff --git a/src/assets/scss/helpers/_flex.scss b/src/assets/scss/helpers/_flex.scss index 895928d9..9dacce31 100644 --- a/src/assets/scss/helpers/_flex.scss +++ b/src/assets/scss/helpers/_flex.scss @@ -146,3 +146,6 @@ .flex-grow { flex-grow: 1; } +.flex-direction-reversed { + flex-direction: row-reverse; +}