💬 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 **`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 **`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` **`hideDate`** | `boolean` | _Optional_ | If set to `true`, the date and city will not be shown. Defaults to `false`
##### Example ##### Example

View File

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