Added filter to format Date to string inside of templates

This commit is contained in:
Ferdinand Thiessen 2020-11-05 03:55:44 +01:00
parent 4061d84ace
commit 27b34e36e2
4 changed files with 30 additions and 3 deletions

View File

@ -24,7 +24,7 @@ module.exports = configure(function(ctx) {
// app boot file (/src/boot) // app boot file (/src/boot)
// --> boot files are part of "main.js" // --> boot files are part of "main.js"
// https://quasar.dev/quasar-cli/boot-files // https://quasar.dev/quasar-cli/boot-files
boot: ['composition-api', 'axios', 'login', 'plugins', 'loading'], boot: ['composition-api', 'axios', 'filter', 'login', 'plugins', 'loading'],
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
css: ['app.scss'], css: ['app.scss'],

25
src/boot/filter.ts Normal file
View File

@ -0,0 +1,25 @@
import { boot } from 'quasar/wrappers';
export default boot(({ Vue }) => {
function formatDate(date: Date) {
let d = date.getDate().toString();
if (d.length == 1) d = '0' + d;
let m = date.getMonth().toString();
if (m.length == 1) m = '0' + m;
return `${d}.${m}.${date.getFullYear().toString()}`;
}
Vue.filter('date', formatDate);
Vue.filter('dateTime', function(date: Date, seconds = false) {
let H = date.getHours().toString();
if (H.length == 1) H = `0${H}`;
let M = date.getMinutes().toString();
if (M.length == 1) M = `0${M}`;
let S = ''
if (seconds) {
S = ':' + (date.getSeconds() > 9 ? date.getSeconds().toString() : `0${date.getSeconds().toString()}`);
}
return `${H}:${M}${S} ${formatDate(date)}`;
});
});

View File

@ -21,7 +21,9 @@
Lebenszeit: Lebenszeit:
{{ session.lifetime }} {{ session.lifetime }}
</div> </div>
<div class="col-xs-12 col-sm-6">Läuft aus: {{ session.expires }}</div> <div class="col-xs-12 col-sm-6">
Läuft aus: {{ session.expires | dateTime(true) }}
</div>
</div> </div>
</q-card-section> </q-card-section>
<q-card-actions align="right"> <q-card-actions align="right">

View File

@ -10,7 +10,7 @@
<li>{{ role }}</li> <li>{{ role }}</li>
</ul> </ul>
<br /> <br />
Token expires: {{ sessionObj.expires }} Token expires: {{ sessionObj.expires | dateTime }}
</q-card-section> </q-card-section>
</q-card> </q-card>
</q-page> </q-page>