💬 Adds option for clock to have `customCityName` (#402)

This commit is contained in:
Alicia Sykes 2022-01-03 09:39:51 +00:00
parent 1c8021964b
commit d516bb02fa
2 changed files with 6 additions and 6 deletions

View File

@ -69,6 +69,7 @@ A simple, live-updating time and date widget with time-zone support. All fields
--- | --- | --- | ---
**`timeZone`** | `string` | _Optional_ | The time zone to display date and time in.<br> Specified as Region/City, for example: `Australia/Melbourne`. See the [Time Zone DB](https://timezonedb.com/time-zones) for a full list of supported TZs. Defaults to the browser / device's local time
**`format`** | `string` | _Optional_ | A country code for displaying the date and time in local format.<br>Specified as `[ISO-3166]-[ISO-639]`, for example: `en-AU`. See [here](https://www.fincher.org/Utilities/CountryLanguageList.shtml) for a full list of locales. Defaults to the browser / device's region
**`customCityName`** | `string` | _Optional_ | By default the city from the time-zone is shown, but setting this value will override that text
**`hideDate`** | `boolean` | _Optional_ | If set to `true`, the date and city will not be shown. Defaults to `false`
##### Example

View File

@ -1,7 +1,7 @@
<template>
<div class="clock">
<div class="upper" v-if="!options.hideDate">
<p class="city">{{ timeZone | getCity }}</p>
<p class="city">{{ cityName }}</p>
<p class="date">{{ date }}</p>
</div>
<p class="time">{{ time }}</p>
@ -31,11 +31,10 @@ export default {
if (this.options.format) return this.options.format;
return navigator.language;
},
},
filters: {
/* For a given time zone, return just the city name */
getCity(timeZone) {
return timeZone.split('/')[1].replaceAll('_', ' ');
/* Get city name from time-zone, or return users custom city name */
cityName() {
if (this.options.customCityName) return this.options.customCityName;
return this.timeZone.split('/')[1].replaceAll('_', ' ');
},
},
methods: {