Skip to content
This repository was archived by the owner on Mar 14, 2025. It is now read-only.

Commit a5cea18

Browse files
ankurk91ankurk91
committed
Allow updating locale dynamicaly, #77 
1 parent 93c4d91 commit a5cea18

File tree

2 files changed

+75
-40
lines changed

2 files changed

+75
-40
lines changed

‎examples/App.vue

+65-40
Original file line numberDiff line numberDiff line change
@@ -20,38 +20,33 @@
2020
</div>
2121
</nav>
2222
<p class="mb-2"></p>
23+
2324
<div class="row">
2425
<div class="col-md-8">
2526

26-
<div class="row">
27-
<div class="col-md-4">
28-
<div class="form-group">
29-
<button type="button" class="btn btn-secondary" @click.prevent="setNewDate()">
30-
Set new date
31-
</button>
32-
</div>
33-
</div>
34-
<div class="col-md-4">
35-
<div class="form-group">
36-
<button type="button" class="btn btn-secondary" @click.prevent="updateConfig()">
37-
Reactive configs
38-
</button>
39-
</div>
40-
</div>
41-
<div class="col-md-4">
42-
<div class="form-group">
43-
<button type="button" class="btn btn-secondary" @click.prevent="changeTheme()">
44-
Change theme
45-
</button>
46-
</div>
47-
</div>
48-
</div>
27+
<form class="mb-2 form-inline">
28+
<button type="button" class="btn btn-secondary mr-2" @click.prevent="setNewDate">
29+
Set new date
30+
</button>
31+
<button type="button" class="btn btn-secondary mx-2" @click.prevent="updateConfig">
32+
Reactive configs
33+
</button>
34+
<button type="button" class="btn btn-secondary mx-2" @click.prevent="changeTheme">
35+
Change theme
36+
</button>
37+
<button type="button" class="btn btn-secondary mx-2" @click.prevent="changeLocale">
38+
Change locale
39+
</button>
40+
</form>
4941

5042
<form class="card card-body" method="post" action="/" @submit.prevent="submit()">
5143

5244
<div class="form-group">
5345
<label>Select date (basic)</label>
54-
<flat-pickr v-model="form.dateBasic" class="form-control" :config="configs.basic"></flat-pickr>
46+
<flat-pickr v-model="form.dateBasic"
47+
class="form-control"
48+
:config="configs.basic">
49+
</flat-pickr>
5550
</div>
5651

5752
<div class="form-group">
@@ -64,8 +59,7 @@
6459
@on-change="listenToOnChangeEvent"
6560
class="form-control"
6661
name="date-name"
67-
ref="datePickerWrap"
68-
>
62+
ref="datePickerWrap">
6963
</flat-pickr>
7064
<div class="input-group-append">
7165
<button class="btn btn-success" type="button" title="Toggle" data-toggle>
@@ -80,16 +74,22 @@
8074

8175
<div class="form-group">
8276
<label for="datetime-input">Select datetime</label>
83-
<flat-pickr :config="configs.dateTimePicker" id="datetime-input" class="form-control"
77+
<flat-pickr :config="configs.dateTimePicker"
78+
id="datetime-input"
79+
class="form-control"
8480
v-model="form.dateTime"
85-
placeholder="Date Time"></flat-pickr>
81+
placeholder="Date Time">
82+
</flat-pickr>
8683
</div>
8784

8885
<div class="form-group">
8986
<label>Select time</label>
9087
<div class="input-group">
91-
<flat-pickr :config="configs.timePicker" class="form-control" v-model="form.time"
92-
placeholder="Time"></flat-pickr>
88+
<flat-pickr :config="configs.timePicker"
89+
class="form-control"
90+
v-model="form.time"
91+
placeholder="Time">
92+
</flat-pickr>
9393
<div class="input-group-append">
9494
<button class="btn btn-secondary" type="button" title="Toggle" data-toggle>
9595
Clock
@@ -100,7 +100,11 @@
100100

101101
<div class="form-group">
102102
<label>Select date (localization)</label>
103-
<flat-pickr class="form-control" :config="configs.locale" v-model="form.dateLocale"></flat-pickr>
103+
<flat-pickr
104+
class="form-control"
105+
:config="configs.locale"
106+
v-model="form.dateLocale">
107+
</flat-pickr>
104108
</div>
105109

106110
<div class="form-group">
@@ -112,7 +116,10 @@
112116

113117
<div class="form-group">
114118
<label>Select date (inline)</label>
115-
<flat-pickr class="form-control" :config="configs.inline" v-model="form.dateInline"></flat-pickr>
119+
<flat-pickr class="form-control"
120+
:config="configs.inline"
121+
v-model="form.dateInline">
122+
</flat-pickr>
116123
</div>
117124

118125
<div class="form-group">
@@ -130,27 +137,40 @@
130137

131138
<div class="form-group">
132139
<label>Select date (confirm plugin)</label>
133-
<flat-pickr class="form-control" :config="configs.confirmPlugin" v-model="form.dateConfirm"></flat-pickr>
140+
<flat-pickr class="form-control"
141+
:config="configs.confirmPlugin"
142+
v-model="form.dateConfirm">
143+
</flat-pickr>
134144
</div>
135145

136146
<div class="form-group">
137147
<label>Select date (allow input <code>{{ configs.allowInput.dateFormat }}</code>)</label>
138-
<flat-pickr class="form-control" :config="configs.allowInput" v-model="form.allowInput"></flat-pickr>
148+
<flat-pickr class="form-control"
149+
:config="configs.allowInput"
150+
v-model="form.allowInput">
151+
152+
</flat-pickr>
139153
</div>
140154

141155
<div class="row">
142156
<div class="col-md-6">
143157
<div class="form-group">
144158
<label>Start date </label>
145-
<flat-pickr class="form-control" :config="configs.start" v-model="form.dateStart"
146-
@on-change="onStartChange"></flat-pickr>
159+
<flat-pickr class="form-control"
160+
:config="configs.start"
161+
v-model="form.dateStart"
162+
@on-change="onStartChange">
163+
</flat-pickr>
147164
</div>
148165
</div>
149166
<div class="col-md-6">
150167
<div class="form-group">
151168
<label>End date </label>
152-
<flat-pickr class="form-control" :config="configs.end" v-model="form.dateEnd"
153-
@on-change="onEndChange"></flat-pickr>
169+
<flat-pickr class="form-control"
170+
:config="configs.end"
171+
v-model="form.dateEnd"
172+
@on-change="onEndChange">
173+
</flat-pickr>
154174
</div>
155175
</div>
156176
</div>
@@ -221,7 +241,8 @@
221241
// Need to add base css for flatpickr
222242
import 'flatpickr/dist/flatpickr.css';
223243
// l10n is optional
224-
import {Hindi} from 'flatpickr/dist/l10n/hi';
244+
import {Hindi as HindiLocale} from 'flatpickr/dist/l10n/hi';
245+
import {english as EnglishLocale} from 'flatpickr/dist/l10n/default.js'
225246
226247
// Plugins are optional
227248
// https://chmln.github.io/flatpickr/plugins/
@@ -267,7 +288,7 @@
267288
},
268289
locale: {
269290
// https://chmln.github.io/flatpickr/localization/
270-
locale: Hindi,
291+
locale: HindiLocale,
271292
// https://chmln.github.io/flatpickr/events/
272293
onChange: this.onChange
273294
},
@@ -310,6 +331,10 @@
310331
changeTheme() {
311332
require('flatpickr/dist/themes/material_red.css');
312333
},
334+
changeLocale() {
335+
console.log('Changing locale to english');
336+
this.$set(this.configs.locale, 'locale', EnglishLocale);
337+
},
313338
onChange(selectedDates, dateStr, instance) {
314339
console.log('Date change hook was called', dateStr);
315340
},

‎src/component.vue

+10
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@
3333
// Keep a copy of all events for later use
3434
const allEvents = includedEvents.concat(excludedEvents);
3535
36+
// Passing these properties in `set()` method will cause flatpickr to trigger some callbacks
37+
const configCallbacks = ['locale', 'showMonths'];
38+
3639
const camelToKebab = (string) => {
3740
return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
3841
};
@@ -133,6 +136,13 @@
133136
delete safeConfig[hook];
134137
});
135138
this.fp.set(safeConfig);
139+
140+
// Workaround: Allow to change locale dynamically
141+
configCallbacks.forEach((name) => {
142+
if (typeof safeConfig[name] !== 'undefined') {
143+
this.fp.set(name, safeConfig[name])
144+
}
145+
});
136146
}
137147
},
138148
/**

0 commit comments

Comments
 (0)