Igor Kulikov
3 years ago
22 changed files with 780 additions and 31 deletions
@ -0,0 +1,22 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<mat-form-field appearance="outline" subscriptSizing="dynamic" style="width: 100%;"> |
|||
<mat-select [formControl]="cssUnitFormControl"> |
|||
<mat-option *ngFor="let cssUnit of cssUnitsList" [value]="cssUnit">{{ cssUnit }}</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
@ -0,0 +1,82 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, forwardRef, Input, OnInit } from '@angular/core'; |
|||
import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormControl } from '@angular/forms'; |
|||
import { cssUnit, cssUnits } from '@home/components/widget/config/widget-settings.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-css-unit-select', |
|||
templateUrl: './css-unit-select.component.html', |
|||
styleUrls: [], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => CssUnitSelectComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
export class CssUnitSelectComponent implements OnInit, ControlValueAccessor { |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
cssUnitsList = cssUnits; |
|||
|
|||
cssUnitFormControl: UntypedFormControl; |
|||
|
|||
modelValue: cssUnit; |
|||
|
|||
private propagateChange = null; |
|||
|
|||
constructor() {} |
|||
|
|||
ngOnInit(): void { |
|||
this.cssUnitFormControl = new UntypedFormControl(); |
|||
this.cssUnitFormControl.valueChanges.subscribe((value: cssUnit) => { |
|||
this.updateModel(value); |
|||
}); |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
if (this.disabled) { |
|||
this.cssUnitFormControl.disable(); |
|||
} else { |
|||
this.cssUnitFormControl.enable(); |
|||
} |
|||
} |
|||
|
|||
writeValue(value: cssUnit): void { |
|||
this.modelValue = value; |
|||
this.cssUnitFormControl.patchValue(this.modelValue, {emitEvent: false}); |
|||
} |
|||
|
|||
updateModel(value: cssUnit): void { |
|||
if (this.modelValue !== value) { |
|||
this.modelValue = value; |
|||
this.propagateChange(this.modelValue); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<mat-form-field appearance="outline" subscriptSizing="dynamic" style="width: 100%;"> |
|||
<mat-select [formControl]="dateFormatFormControl" [compareWith]="dateFormatsCompare" > |
|||
<mat-option *ngFor="let dateFormat of dateFormatList" [value]="dateFormat">{{ dateFormatDisplayValue(dateFormat) }}</mat-option> |
|||
</mat-select> |
|||
<button #customFormatButton |
|||
*ngIf="dateFormatFormControl.value?.custom" matSuffix mat-icon-button (click)="openDateFormatSettingsPopup($event, customFormatButton)"> |
|||
<tb-icon>edit</tb-icon> |
|||
</button> |
|||
</mat-form-field> |
|||
@ -0,0 +1,148 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, forwardRef, Input, OnInit, Renderer2, ViewChild, ViewContainerRef } from '@angular/core'; |
|||
import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormControl } from '@angular/forms'; |
|||
import { |
|||
compareDateFormats, |
|||
dateFormats, |
|||
DateFormatSettings |
|||
} from '@home/components/widget/config/widget-settings.models'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { DatePipe } from '@angular/common'; |
|||
import { MatButton } from '@angular/material/button'; |
|||
import { TbPopoverService } from '@shared/components/popover.service'; |
|||
import { deepClone } from '@core/utils'; |
|||
import { |
|||
DateFormatSettingsPanelComponent |
|||
} from '@home/components/widget/lib/settings/common/date-format-settings-panel.component'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-date-format-select', |
|||
templateUrl: './date-format-select.component.html', |
|||
styleUrls: [], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => DateFormatSelectComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
export class DateFormatSelectComponent implements OnInit, ControlValueAccessor { |
|||
|
|||
@ViewChild('customFormatButton', {static: false}) |
|||
customFormatButton: MatButton; |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
dateFormatList = dateFormats; |
|||
|
|||
dateFormatsCompare = compareDateFormats; |
|||
|
|||
dateFormatFormControl: UntypedFormControl; |
|||
|
|||
modelValue: DateFormatSettings; |
|||
|
|||
private propagateChange = null; |
|||
|
|||
private formatCache: {[format: string]: string} = {}; |
|||
|
|||
constructor(private translate: TranslateService, |
|||
private date: DatePipe, |
|||
private popoverService: TbPopoverService, |
|||
private renderer: Renderer2, |
|||
private viewContainerRef: ViewContainerRef) {} |
|||
|
|||
ngOnInit(): void { |
|||
this.dateFormatFormControl = new UntypedFormControl(); |
|||
this.dateFormatFormControl.valueChanges.subscribe((value: DateFormatSettings) => { |
|||
this.updateModel(value); |
|||
if (value?.custom) { |
|||
setTimeout(() => { |
|||
this.openDateFormatSettingsPopup(null, this.customFormatButton); |
|||
}, 0); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
if (this.disabled) { |
|||
this.dateFormatFormControl.disable(); |
|||
} else { |
|||
this.dateFormatFormControl.enable(); |
|||
} |
|||
} |
|||
|
|||
writeValue(value: DateFormatSettings): void { |
|||
this.modelValue = value; |
|||
this.dateFormatFormControl.patchValue(this.modelValue, {emitEvent: false}); |
|||
} |
|||
|
|||
updateModel(value: DateFormatSettings): void { |
|||
if (!compareDateFormats(this.modelValue, value)) { |
|||
this.modelValue = value; |
|||
this.propagateChange(this.modelValue); |
|||
} |
|||
} |
|||
|
|||
dateFormatDisplayValue(value: DateFormatSettings): string { |
|||
if (value.custom) { |
|||
return this.translate.instant('date.custom-date'); |
|||
} else if (value.lastUpdateAgo) { |
|||
return this.translate.instant('date.last-update-n-ago'); |
|||
} else { |
|||
if (!this.formatCache[value.format]) { |
|||
this.formatCache[value.format] = this.date.transform(Date.now(), value.format); |
|||
} |
|||
return this.formatCache[value.format]; |
|||
} |
|||
} |
|||
|
|||
openDateFormatSettingsPopup($event: Event, matButton: MatButton) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
const trigger = matButton._elementRef.nativeElement; |
|||
if (this.popoverService.hasPopover(trigger)) { |
|||
this.popoverService.hidePopover(trigger); |
|||
} else { |
|||
const ctx: any = { |
|||
dateFormat: deepClone(this.modelValue) |
|||
}; |
|||
const dateFormatSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, |
|||
this.viewContainerRef, DateFormatSettingsPanelComponent, 'top', true, null, |
|||
ctx, |
|||
{}, |
|||
{}, {}, true); |
|||
dateFormatSettingsPanelPopover.tbComponentRef.instance.popover = dateFormatSettingsPanelPopover; |
|||
dateFormatSettingsPanelPopover.tbComponentRef.instance.dateFormatApplied.subscribe((dateFormat) => { |
|||
dateFormatSettingsPanelPopover.hide(); |
|||
this.modelValue = dateFormat; |
|||
this.propagateChange(this.modelValue); |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,47 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div class="tb-date-format-settings-panel"> |
|||
<div class="tb-date-format-settings-title" translate>date.custom-date</div> |
|||
<div class="tb-form-row no-border no-padding"> |
|||
<div class="fixed-title-width" translate>date.format</div> |
|||
<mat-form-field class="tb-date-format-input" required fxFlex appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput [formControl]="dateFormatFormControl" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
<div matSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div> |
|||
</mat-form-field> |
|||
</div> |
|||
<mat-divider></mat-divider> |
|||
<div class="tb-form-row no-border no-padding date-format-preview"> |
|||
<div class="fixed-title-width" translate>date.preview</div> |
|||
<div class="preview-text" fxFlex>{{ previewText }}</div> |
|||
</div> |
|||
<div class="tb-date-format-settings-panel-buttons"> |
|||
<button mat-button |
|||
color="primary" |
|||
type="button" |
|||
(click)="cancel()"> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
<button mat-raised-button |
|||
color="primary" |
|||
type="button" |
|||
(click)="applyDateFormat()" |
|||
[disabled]="dateFormatFormControl.invalid || !dateFormatFormControl.dirty"> |
|||
{{ 'action.apply' | translate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,67 @@ |
|||
/** |
|||
* Copyright © 2016-2023 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
|
|||
@import '../../../../../../../../scss/constants'; |
|||
|
|||
.tb-date-format-settings-panel { |
|||
width: 500px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
@media #{$mat-xs} { |
|||
width: 90vw; |
|||
} |
|||
.tb-date-format-settings-title { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
line-height: 24px; |
|||
letter-spacing: 0.25px; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
} |
|||
.tb-form-row { |
|||
.fixed-title-width { |
|||
min-width: 120px; |
|||
} |
|||
&.date-format-preview { |
|||
align-items: flex-start; |
|||
.preview-text { |
|||
font-size: 14px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 20px; |
|||
letter-spacing: 0.2px; |
|||
color: rgba(0, 0, 0, 0.38); |
|||
} |
|||
} |
|||
.mat-mdc-form-field.tb-date-format-input { |
|||
.mat-mdc-text-field-wrapper.mdc-text-field--outlined { |
|||
.mat-mdc-form-field-icon-suffix { |
|||
display: flex; |
|||
align-items: center; |
|||
line-height: normal; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.tb-date-format-settings-panel-buttons { |
|||
height: 60px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
gap: 16px; |
|||
justify-content: flex-end; |
|||
align-items: flex-end; |
|||
} |
|||
} |
|||
@ -0,0 +1,70 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { DateFormatSettings } from '@home/components/widget/config/widget-settings.models'; |
|||
import { TbPopoverComponent } from '@shared/components/popover.component'; |
|||
import { UntypedFormControl, Validators } from '@angular/forms'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { DatePipe } from '@angular/common'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-date-format-settings-panel', |
|||
templateUrl: './date-format-settings-panel.component.html', |
|||
providers: [], |
|||
styleUrls: ['./date-format-settings-panel.component.scss'], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class DateFormatSettingsPanelComponent extends PageComponent implements OnInit { |
|||
|
|||
@Input() |
|||
dateFormat: DateFormatSettings; |
|||
|
|||
@Input() |
|||
popover: TbPopoverComponent<DateFormatSettingsPanelComponent>; |
|||
|
|||
@Output() |
|||
dateFormatApplied = new EventEmitter<DateFormatSettings>(); |
|||
|
|||
dateFormatFormControl: UntypedFormControl; |
|||
|
|||
previewText = ''; |
|||
|
|||
constructor(private date: DatePipe, |
|||
protected store: Store<AppState>) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.dateFormatFormControl = new UntypedFormControl(this.dateFormat.format, [Validators.required]); |
|||
this.dateFormatFormControl.valueChanges.subscribe((value: string) => { |
|||
this.previewText = this.date.transform(Date.now(), value); |
|||
}); |
|||
this.previewText = this.date.transform(Date.now(), this.dateFormat.format); |
|||
} |
|||
|
|||
cancel() { |
|||
this.popover?.hide(); |
|||
} |
|||
|
|||
applyDateFormat() { |
|||
this.dateFormat.format = this.dateFormatFormControl.value; |
|||
this.dateFormatApplied.emit(this.dateFormat); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,88 @@ |
|||
#### Pre-defined format options |
|||
|
|||
| Option | Equivalent to | Examples (given in `en-US` locale) | |
|||
|------------|---------------------------------|-----------------------------------------------| |
|||
| short | M/d/yy, h:mm a | 6/15/15, 9:03 AM | |
|||
| medium | MMM d, y, h:mm:ss a | Jun 15, 2015, 9:03:01 AM | |
|||
| long | MMMM d, y, h:mm:ss a z | June 15, 2015 at 9:03:01 AM GMT+1 | |
|||
| full | EEEE, MMMM d, y, h:mm:ss a zzzz | Monday, June 15, 2015 at 9:03:01 AM GMT+01:00 | |
|||
| shortDate | M/d/yy | 6/15/15 | |
|||
| mediumDate | MMM d, y | Jun 15, 2015 | |
|||
| longDate | MMMM d, y | June 15, 2015 | |
|||
| fullDate | EEEE, MMMM d, y | Monday, June 15, 2015 | |
|||
| shortTime | h:mm a | 9:03 AM | |
|||
| mediumTime | h:mm:ss a | 9:03:01 AM | |
|||
| longTime | h:mm:ss a z | 9:03:01 AM GMT+1 | |
|||
| fullTime | h:mm:ss a zzzz | 9:03:01 AM GMT+01:00 | |
|||
|
|||
#### Custom format options |
|||
|
|||
You can construct a format string using symbols to specify the components |
|||
of a date-time value, as described in the following table. |
|||
Format details depend on the locale. |
|||
Fields marked with (*) are only available in the extra data set for the given locale. |
|||
|
|||
| Field type | Format | Description | Example Value | |
|||
|---------------------|-------------|--------------------------------------------------------------|------------------------------------------------------------| |
|||
| Era | G, GG & GGG | Abbreviated | AD | |
|||
| | GGGG | Wide | Anno Domini | |
|||
| | GGGGG | Narrow | A | |
|||
| Year | y | Numeric: minimum digits | 2, 20, 201, 2017, 20173 | |
|||
| | yy | Numeric: 2 digits + zero padded | 02, 20, 01, 17, 73 | |
|||
| | yyy | Numeric: 3 digits + zero padded | 002, 020, 201, 2017, 20173 | |
|||
| | yyyy | Numeric: 4 digits or more + zero padded | 0002, 0020, 0201, 2017, 20173 | |
|||
| Week-numbering year | Y | Numeric: minimum digits | 2, 20, 201, 2017, 20173 | |
|||
| | YY | Numeric: 2 digits + zero padded | 02, 20, 01, 17, 73 | |
|||
| | YYY | Numeric: 3 digits + zero padded | 002, 020, 201, 2017, 20173 | |
|||
| | YYYY | Numeric: 4 digits or more + zero padded | 0002, 0020, 0201, 2017, 20173 | |
|||
| Month | M | Numeric: 1 digit | 9, 12 | |
|||
| | MM | Numeric: 2 digits + zero padded | 09, 12 | |
|||
| | MMM | Abbreviated | Sep | |
|||
| | MMMM | Wide | September | |
|||
| | MMMMM | Narrow | S | |
|||
| Month standalone | L | Numeric: 1 digit | 9, 12 | |
|||
| | LL | Numeric: 2 digits + zero padded | 09, 12 | |
|||
| | LLL | Abbreviated | Sep | |
|||
| | LLLL | Wide | September | |
|||
| | LLLLL | Narrow | S | |
|||
| Week of year | w | Numeric: minimum digits | 1... 53 | |
|||
| | ww | Numeric: 2 digits + zero padded | 01... 53 | |
|||
| Week of month | W | Numeric: 1 digit | 1... 5 | |
|||
| Day of month | d | Numeric: minimum digits | 1 | |
|||
| | dd | Numeric: 2 digits + zero padded | 01 | |
|||
| Week day | E, EE & EEE | Abbreviated | Tue | |
|||
| | EEEE | Wide | Tuesday | |
|||
| | EEEEE | Narrow | T | |
|||
| | EEEEEE | Short | Tu | |
|||
| Week day standalone | c, cc | Numeric: 1 digit | 2 | |
|||
| | ccc | Abbreviated | Tue | |
|||
| | cccc | Wide | Tuesday | |
|||
| | ccccc | Narrow | T | |
|||
| | cccccc | Short | Tu | |
|||
| Period | a, aa & aaa | Abbreviated | am/pm or AM/PM | |
|||
| | aaaa | Wide (fallback to `a` when missing) | ante meridiem/post meridiem | |
|||
| | aaaaa | Narrow | a/p | |
|||
| Period* | B, BB & BBB | Abbreviated | mid. | |
|||
| | BBBB | Wide | am, pm, midnight, noon, morning, afternoon, evening, night | |
|||
| | BBBBB | Narrow | md | |
|||
| Period standalone* | b, bb & bbb | Abbreviated | mid. | |
|||
| | bbbb | Wide | am, pm, midnight, noon, morning, afternoon, evening, night | |
|||
| | bbbbb | Narrow | md | |
|||
| Hour 1-12 | h | Numeric: minimum digits | 1, 12 | |
|||
| | hh | Numeric: 2 digits + zero padded | 01, 12 | |
|||
| Hour 0-23 | H | Numeric: minimum digits | 0, 23 | |
|||
| | HH | Numeric: 2 digits + zero padded | 00, 23 | |
|||
| Minute | m | Numeric: minimum digits | 8, 59 | |
|||
| | mm | Numeric: 2 digits + zero padded | 08, 59 | |
|||
| Second | s | Numeric: minimum digits | 0... 59 | |
|||
| | ss | Numeric: 2 digits + zero padded | 00... 59 | |
|||
| Fractional seconds | S | Numeric: 1 digit | 0... 9 | |
|||
| | SS | Numeric: 2 digits + zero padded | 00... 99 | |
|||
| | SSS | Numeric: 3 digits + zero padded (= milliseconds) | 000... 999 | |
|||
| Zone | z, zz & zzz | Short specific non location format (fallback to O) | GMT-8 | |
|||
| | zzzz | Long specific non location format (fallback to OOOO) | GMT-08:00 | |
|||
| | Z, ZZ & ZZZ | ISO8601 basic format | -0800 | |
|||
| | ZZZZ | Long localized GMT format | GMT-8:00 | |
|||
| | ZZZZZ | ISO8601 extended format + Z indicator for offset 0 (= XXXXX) | -08:00 | |
|||
| | O, OO & OOO | Short localized GMT format | GMT-8 | |
|||
| | OOOO | Long localized GMT format | GMT-08:00 | |
|||
Loading…
Reference in new issue