- <
{{ getYear() }}
@@ -38,7 +38,7 @@
class="next"
v-bind:class="{ 'disabled' : nextYearDisabled(currDate) }">>
- >
-
import DateUtils from '../utils/DateUtils.js'
+import DateLanguages from '../utils/DateLanguages.js';
/**
* TODO
@@ -87,7 +88,10 @@ export default {
value: String,
default: 'dd MMM yyyy'
},
-
+ language: {
+ value: String,
+ default: 'en'
+ },
disabled: {
type: Object
}
@@ -95,12 +99,12 @@ export default {
data() {
return {
- /*
+ /*
* Vue cannot observe changes to a Date Object so date must be stored as a timestamp
* {Number}
*/
currDate: new Date().getTime(),
- /*
+ /*
* Selected Date
* {Date}
*/
@@ -115,7 +119,7 @@ export default {
/**
* Helper arrays for names
*/
- dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+ translation: DateLanguages.translations[this.language],
formattedValue: null,
/**
* Positioning
@@ -131,7 +135,7 @@ export default {
computed: {
currMonthName() {
const d = new Date(this.currDate);
- return DateUtils.getMonthNameAbbr(d.getMonth())
+ return DateUtils.getMonthNameAbbr(d.getMonth(), this.translation.months.abbr)
},
currYear() {
const d = new Date(this.currDate);
@@ -166,7 +170,7 @@ export default {
let dObj = new Date(d.getFullYear(), 0, d.getDate(), d.getHours(), d.getMinutes());
for (let i = 0; i < 12; i++) {
months.push({
- month: DateUtils.getMonthName(i),
+ month: DateUtils.getMonthName(i, this.translation.months.original),
timestamp: dObj.getTime(),
isSelected: this.isSelectedMonth(dObj),
isDisabled: this.isDisabledMonth(dObj),
@@ -235,7 +239,7 @@ export default {
this.currDate = timestamp;
let d = new Date(timestamp);
- this.formattedValue = DateUtils.formatDate(d, this.format);
+ this.formattedValue = DateUtils.formatDate(d, this.format, this.translation);
this.dispatchEvent(timestamp);
},
@@ -281,7 +285,7 @@ export default {
let sD = Math.floor(d.getFullYear() / 10) * 10;
return sD + '\'s'
},
-
+
previousMonth() {
if (this.previousMonthDisabled()) {
return false;
@@ -360,7 +364,7 @@ export default {
}
return false
},
-
+
previousDecade() {
if (this.previousDecadeDisabled()) {
return false;
@@ -397,8 +401,8 @@ export default {
}
return false
},
-
- /**
+
+ /**
* Whether a day is selected
* @param {Date}
* @return {Boolean}
@@ -412,9 +416,9 @@ export default {
* @param {Date}
* @return {Boolean}
*/
- isDisabledDate(date) {
+ isDisabledDate(date) {
let disabled = false;
-
+
if (typeof this.disabled === 'undefined') {
return false;
}
@@ -439,7 +443,7 @@ export default {
return disabled;
},
- /**
+ /**
* Whether the selected date is in this month
* @param {Date}
* @return {Boolean}
@@ -457,7 +461,7 @@ export default {
*/
isDisabledMonth(date) {
let disabled = false;
-
+
if (typeof this.disabled === 'undefined') {
return false;
}
@@ -516,25 +520,25 @@ export default {
return disabled;
},
- /**
+ /**
* Set the datepicker value
* @param {Date|null} date
*/
setValue(date) {
if (!date) {
const d = new Date()
- this.currDate = new Date(d.getFullYear(), d.getMonth(), 1).getTime();
+ this.currDate = new Date(d.getFullYear(), d.getMonth(), 1).getTime();
return this.selectedDate = this.formattedValue = null;
}
this.selectedDate = date;
- this.currDate = new Date(date.getFullYear(), date.getMonth(), 1).getTime();
- this.formattedValue = DateUtils.formatDate(date, this.format);
+ this.currDate = new Date(date.getFullYear(), date.getMonth(), 1).getTime();
+ this.formattedValue = DateUtils.formatDate(date, this.format, this.translation);
}
},
compiled() {
- if (this.value) {
+ if (this.value) {
this.setValue(this.value)
}
},
@@ -552,13 +556,13 @@ export default {
$width = 300px;
-*
+*
box-sizing border-box
.datepicker
position relative
-.calendar
+.calendar
position absolute
z-index 100
background white
@@ -572,7 +576,7 @@ $width = 300px;
text-align center
width (100 - (100/7)*2)%
float left
-
+
.prev
.next
width (100/7)%
@@ -602,16 +606,16 @@ $width = 300px;
.prev:not(.disabled)
.next:not(.disabled)
- .up:not(.disabled)
+ .up:not(.disabled)
cursor pointer
&:hover
background #eee
-
+
.disabled
color #ddd
cursor default
- .cell
+ .cell
display inline-block
padding 0 5px
width (100/7)%
@@ -632,10 +636,10 @@ $width = 300px;
background #4bd
&.grey
color #888
-
+
&:hover
background inherit
-
+
&.day-header
font-size 75%
@@ -646,6 +650,6 @@ $width = 300px;
.month,
.year
width 33.333%
-
-
\ No newline at end of file
+
+
diff --git a/src/utils/DateLanguages.js b/src/utils/DateLanguages.js
new file mode 100644
index 00000000..ca6fdf6a
--- /dev/null
+++ b/src/utils/DateLanguages.js
@@ -0,0 +1,27 @@
+export default {
+ translations: {
+ 'en': {
+ 'months': {
+ 'original': ['January', 'Febrary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+ 'abbr': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+ },
+ 'days': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+
+ 'es': {
+ 'months': {
+ 'original': ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
+ 'abbr': ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic']
+ },
+ 'days': ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sab', 'Dom']
+ },
+
+ 'fr': {
+ 'months': {
+ 'original': ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
+ 'abbr': ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jui', 'Juil', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc']
+ },
+ 'days': ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']
+ }
+ }
+};
diff --git a/src/utils/DateUtils.js b/src/utils/DateUtils.js
index ed827167..80360eed 100644
--- a/src/utils/DateUtils.js
+++ b/src/utils/DateUtils.js
@@ -14,28 +14,28 @@ module.exports = {
/**
* Return abbreviated week day name
* @param {Date}
+ * @param {Array}
* @return {String}
*/
- getDayNameAbbr(date) {
+ getDayNameAbbr(date, days) {
if (typeof date !== 'object') {
throw TypeError('Invalid Type');
}
- let dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
- return dayNames[date.getDay()];
+ return days[date.getDay()];
},
/**
* Return name of the month
* @param {Number|Date}
+ * @param {Array}
* @return {String}
*/
- getMonthName(month) {
- let monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+ getMonthName(month, months) {
if (typeof month === 'object') {
- return monthNames[month.getMonth()];
+ return months[month.getMonth()];
}
if (typeof month === 'number') {
- return monthNames[month];
+ return months[month];
}
throw TypeError('Invalid type');
},
@@ -45,13 +45,12 @@ module.exports = {
* @param {Number|Date}
* @return {String}
*/
- getMonthNameAbbr(month) {
- let monthAbbr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+ getMonthNameAbbr(month, monthsAbbr) {
if (typeof month === 'object') {
- return monthAbbr[month.getMonth()];
+ return monthsAbbr[month.getMonth()];
}
if (typeof month === 'number') {
- return monthAbbr[month];
+ return monthsAbbr[month];
}
throw TypeError('Invalid type');
},
@@ -129,24 +128,26 @@ module.exports = {
/**
* Formats date object
* @param {Date}
+ * @param {String}
+ * @param {Object}
* @return {String}
*/
- formatDate(date, format) {
+ formatDate(date, format, translation) {
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
- let monthName = this.getMonthName(date.getMonth())
+ let monthName = this.getMonthName(date.getMonth(), translation.months.original)
let str = format
+ .replace(/S/, this.getNthSuffix(date.getDate()))
+ .replace(/D/, this.getDayNameAbbr(date, translation.days))
.replace(/yyyy/, year)
.replace(/yy/, String(year).slice(2))
- .replace(/MMMM/, this.getMonthName(date.getMonth()))
- .replace(/MMM/, this.getMonthNameAbbr(date.getMonth()))
+ .replace(/MMMM/, this.getMonthName(date.getMonth(), translation.months.original))
+ .replace(/MMM/, this.getMonthNameAbbr(date.getMonth(), translation.months.abbr))
.replace(/MM/, ('0' + month).slice(-2))
.replace(/M(?!a)/, month)
.replace(/dd/, ('0' + day).slice(-2))
- .replace(/d/, day)
- .replace(/S/, this.getNthSuffix(date.getDate()))
- .replace(/D/, this.getDayNameAbbr(date))
+ .replace(/d/, day);
return str;
},