🔀 Merge pull request #934 from rtm516/feature/12h-clock

Add 12 hour option to clock widget

docs/widgets.md

@@ -110,6 +110,7 @@ A simple, live-updating time and date widget with time-zone support. All fields
 **`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`
 **`hideSeconds`** | `boolean` |  _Optional_ | If set to `true`, seconds will not be shown. Defaults to `false`
+**`use12Hour`** | `boolean` |  _Optional_ | If set to `true`, 12 hour time will be displayed. Defaults to `false`
 
 #### Example
 

src/components/Widgets/Clock.vue

@@ -39,6 +39,9 @@ export default {
     showSeconds() {
       return !this.options.hideSeconds;
     },
+    use12Hour() {
+      return !this.options.use12Hour;
+    },
   },
   methods: {
     update() {
@@ -52,6 +55,7 @@ export default {
         hour: 'numeric',
         minute: 'numeric',
         ...(this.showSeconds && { second: 'numeric' }),
+        ...(this.use12Hour && { hourCycle: 'h12' }),
       }).format();
     },
     /* Get and format the date */