8000 add the vue-i18n-plugin support · javaDev3228/vue-datetime-picker@218bd84 · GitHub
[go: up one dir, main page]
Skip to content

Commit 218bd84

Browse files
Haixing-HuHaixing-Hu
committed
add the vue-i18n-plugin support
1 parent c2d264f commit 218bd84

File tree

3 files changed

+126
-14
lines changed

3 files changed

+126
-14
lines changed

‎README.md

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ The demo page is [HERE](http://haixing-hu.github.io/vue-datetime-picker/demo.htm
2222
- [moment](https://github.com/moment/moment/) `>=2.9.0`
2323
- [moment-timezone](https://github.com/moment/moment-timezone/) `>=0.4.0`
2424
- [Eonasdan's bootstrap datetime picker](https://github.com/Eonasdan/bootstrap-datetimepicker) `>=4.17.37`
25+
- [vue-i18n-plugin](https://github.com/Haixing-Hu/vue-i18n) `>=0..3` This is optional.
2526

2627
# Instllation
2728

@@ -224,7 +225,12 @@ The default value of this property is `"datetime"`.
224225
## `language`
225226

226227
The optional code of language used by the [moment](https://github.com/moment/moment/)
227-
library. Default value is `"en-US"`.
228+
library.
229+
230+
If it is not set, and the [vue-i18n](https://github.com/Haixing-Hu/vue-i18n)
231+
plugin is used, the component will use the language code `$language` provided
232+
by the [vue-i18n](https://github.com/Haixing-Hu/vue-i18n) plugin; otherwise, the
233+
component will use the default value `"en-US"`.
228234

229235
The supported languages are exactly the same as the supported languages of the
230236
[moment](https://github.com/moment/moment/) library. In order to use the
@@ -285,6 +291,51 @@ For example, `picker.control.minDate(val)` will set the minimum allowed datetime
285291
of the picker to the specified value, where `picker` is the reference to the
286292
`vue-datetime-picker` component.
287293

294+
# Localization
295+
296+
This component could use the [vue-i18n](https://github.com/Haixing-Hu/vue-i18n)
297+
plugin to localize the tooltips of the datetime picker control.
298+
299+
In order to localize this component, the localization files provided to the
300+
[vue-i18n](https://github.com/Haixing-Hu/vue-i18n) plugin must provide the
301+
following localization messages:
302+
303+
```json
304+
{
305+
datetime_picker: {
306+
today: 'Go to today',
307+
clear: 'Clear selection',
308+
close: 'Close the picker',
309+
selectMonth: 'Select Month',
310+
prevMonth: 'Previous Month',
311+
nextMonth: 'Next Month',
312+
selectYear: 'Select Year',
313+
prevYear: 'Previous Year',
314+
nextYear: 'Next Year',
315+
selectDecade: 'Select Decade',
316+
prevDecade: 'Previous Decade',
317+
nextDecade: 'Next Decade',
318+
prevCentury: 'Previous Century',
319+
nextCentury: 'Next Century',
320+
pickHour: 'Pick Hour',
321+
incrementHour: 'Increment Hour',
322+
decrementHour: 'Decrement Hour',
323+
pickMinute: 'Pick Minute',
324+
incrementMinute: 'Increment Minute',
325+
decrementMinute: 'Decrement Minute',
326+
pickSecond: 'Pick Second',
327+
incrementSecond: 'Increment Second',
328+
decrementSecond: 'Decrement Second',
329+
togglePeriod: 'Toggle Period',
330+
selectTime: 'Select Time'
331+
}
332+
}
333+
```
334+
335+
If no [vue-i18n](https://github.com/Haixing-Hu/vue-i18n)] is used, or the
336+
localization file of the plugin does not provide the above localization messages,
337+
the default English messages will be used.
338+
288339
# Contributing
289340

290341
- Fork it !

‎demo/demo.all.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10434,7 +10434,8 @@
1043410434
$(this.$el).datetimepicker({
1043510435
locale: this.getLanguageCode(this.language),
1043610436
format: format,
10437-
useCurrent: false
10437+
useCurrent: false,
10438+
showClear: true
1043810439
});
1043910440
this.control = $(this.$el).data("DateTimePicker");
1044010441
this.control.date(this.model);

‎src/vue-datetime-picker.js

Lines changed: 72 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,26 @@
1+
2+
/**
3+
* The array of names of the tooltip messages of the datetime picker.
4+
*
5+
* This is a constant and should not be modified.
6+
*/
7+
var DATETIME_PICKER_TOOLTIPS = [
8+
"today", "clear", "close",
9+
"selectMonth", "prevMonth", "nextMonth",
10+
"selectYear", "prevYear", "nextYear",
11+
"selectDecade", "prevDecade", "nextDecade",
12+
"prevCentury", "nextCentury",
13+
"pickHour", "incrementHour", "decrementHour",
14+
"pickMinute", "incrementMinute", "decrementMinute",
15+
"pickSecond", "incrementSecond", "decrementSecond",
16+
"togglePeriod", "selectTime"
17+
];
18+
19+
/**
20+
* The default language used by this component.
21+
*/
22+
var DEFAULT_LANGUAGE = "en-US";
23+
124
/**
225
* A datetime picker control.
326
*
@@ -11,8 +34,11 @@
1134
* Default value is "datetime".
1235
* @param language
1336
* the optional language code used to localize the control, which must be
14-
* a valid language code supported by the moment.js library. Default value
15-
* is "en-US".
37+
* a valid language code supported by the moment.js library. If it is not set,
38+
* and the [vue-i18n](https://github.com/Haixing-Hu/vue-i18n) plugin is used,
39+
* the component will use the language code `$language` provided by the
40+
* [vue-i18n](https://github.com/Haixing-Hu/vue-i18n) plugin; otherwise, the
41+
* component will use the default value "en-US".
1642
* @param datetimeFormat
1743
* the optional format of the datetime this component should display, which
1844
* must be a valid datetime format of the moment.js library. This property
@@ -56,7 +82,7 @@ module.exports = {
5682
language: {
5783
type: String,
5884
required: false,
59-
default: "en-US"
85+
default: ""
6086
},
6187
datetimeFormat: {
6288
type: String,
@@ -84,25 +110,59 @@ module.exports = {
84110
},
85111
ready: function() {
86112
// console.debug("datetime-picker.ready");
87-
var format = null;
113+
var options = {
114+
useCurrent: false,
115+
showClear: true,
116+
icons: {
117+
time: 'fa fa-clock-o',
118+
date: 'fa fa-calendar',
119+
up: 'fa fa-chevron-up',
120+
down: 'fa fa-chevron-down',
121+
previous: 'fa fa-chevron-left',
122+
next: 'fa fa-chevron-right',
123+
today: 'glyphicon glyphicon-screenshot',
124+
clear: 'fa fa-trash',
125+
close: 'fa fa-times'
126+
}
127+
};
128+
// set the locale
129+
if (this.language === null || this.language === "") {
130+
if (this.$language) {
131+
this.language = this.$language;
132+
} else {
133+
this.langauge = DEFAULT_LANGUAGE;
134+
}
135+
}
136+
options.locale = this.getLanguageCode(this.language),
137+
// set the format
88138
switch (this.type) {
89139
case "date":
90-
format = this.dateFormat;
140+
options.format = this.dateFormat;
91141
break;
92142
case "time":
93-
format = this.timeFormat;
143+
options.format = this.timeFormat;
94144
break;
95145
case "datetime":
96146
default:
97-
format = this.datetimeFormat;
147+
options.format = this.datetimeFormat;
98148
break;
99149
}
100-
$(this.$el).datetimepicker({
101-
locale: this.getLanguageCode(this.language),
102-
format: format,
103-
useCurrent: false
104-
});
150+
// use the vue-i18n plugin for localize the tooltips
151+
if (this.$i18n && this.$i18n.datetime_picker) {
152+
var messages = this.$i18n.datetime_picker;
153+
var tooltips = $.fn.datetimepicker.defaults.tooltips;
154+
for (var i = 0; i < DATETIME_PICKER_TOOLTIPS.length; ++i) {
155+
var name = DATETIME_PICKER_TOOLTIPS[i];
156+
if (messages[name]) {
157+
tooltips[name] = messages[name]; // localize
158+
}
159+
}
160+
options.tooltips = tooltips;
161+
}
162+
// create the control
163+
$(this.$el).datetimepicker(options);
105164
this.control = $(this.$el).data("DateTimePicker");
165+
// set the date to the current value of the model
106166
this.control.date(this.model);
107167
var me = this;
108168
$(this.$el).on("dp.change", function (e) {

0 commit comments

Comments
 (0)
0