• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15import i18n from '@ohos.i18n';
16import router from '@ohos.router';
17import systemTime from '@ohos.systemDateTime';
18import IntlUtil from '../../utils/IntlUtil';
19import Logger from '../../utils/Logger';
20import TitleBar from '../../components/TitleBar';
21
22const TAG: string = 'DateAndTime';
23
24export class TimeZoneInfo {
25  key: string = '';
26  timeZone: string = '';
27  display: Resource | undefined = undefined;
28}
29
30@Entry
31@Component
32struct DateAndTime {
33  private intervalId: number = -1;
34  @State is24Hours: boolean = false;
35  @State date: string = '';
36  @State time: string = '';
37  @State timeZone: string = '';
38
39  aboutToAppear() {
40    this.is24Hours = i18n.System.is24HourClock();
41  }
42
43  onPageShow() {
44    this.getTimeDisplay();
45    this.intervalId = setInterval(() => {
46      this.getTimeDisplay();
47    }, 1000);
48  }
49
50  onPageHide() {
51    clearInterval(this.intervalId);
52  }
53
54  async getTimeDisplay() {
55    let timeZone = await systemTime.getTimezone();
56    let zone = i18n.getTimeZone(timeZone);
57    this.timeZone = IntlUtil.getTimeZoneString(zone);
58    let timeInfo = IntlUtil.getDateString();
59    this.date = timeInfo[0];
60    this.time = timeInfo[1];
61  }
62
63  @Builder
64  Hours24View() {
65    Row() {
66      Text($r('app.string.hours_24'))
67        .fontSize(22)
68        .fontWeight(FontWeight.Bold)
69        .layoutWeight(1)
70      Toggle({ type: ToggleType.Switch, isOn: this.is24Hours })
71        .margin({ top: 20, bottom: 20 })
72        .onChange((isOn: boolean) => {
73          this.is24Hours = !this.is24Hours;
74          Logger.info(TAG, `set24HourClock result = ${i18n.System.set24HourClock(this.is24Hours)}`);
75          this.getTimeDisplay();
76        })
77    }
78    .width('95%')
79    .padding(10)
80    .margin({ top: 20, bottom: 10 })
81    .backgroundColor($r('app.color.white'))
82    .border({ color: $r('app.color.white'), width: 1, radius: 15 })
83  }
84
85  @Builder
86  TimeView($$: Data) {
87    if ($$.isDivider) {
88      Divider()
89        .color($r('app.color.divider'))
90        .width('100%')
91        .strokeWidth(1)
92        .margin({ top: 10, bottom: 10 })
93    }
94    Row() {
95      Text($$.key)
96        .fontSize(22)
97      Blank()
98      Text($$.value)
99        .fontSize(22)
100      Image($r('app.media.more'))
101        .width(15).height(50)
102        .objectFit(ImageFit.Contain)
103        .margin({ left: 10 })
104    }
105    .width('100%')
106    .margin(10)
107    .onClick($$.handleClick)
108  }
109
110  build() {
111    Column() {
112      TitleBar({ hasBackPress: true, title: $r('app.string.date_time') })
113      Scroll() {
114        Column() {
115          this.Hours24View()
116          Column() {
117            this.TimeView({
118              key: $r('app.string.date'),
119              value: this.date,
120              isDivider: false,
121              handleClick: () => {
122                DatePickerDialog
123                  .show({
124                    lunar: false,
125                    onAccept: (result: DatePickerResult) => {
126                      Logger.info(TAG, `DatePicker onAccept,year：${result.year}`);
127                      let date = new Date();
128                      date.setFullYear(result.year, result.month, result.day);
129                      systemTime.setDate(date, () => {
130                        Logger.info(TAG, `setDate finish`)
131                        this.getTimeDisplay()
132                      });
133                    }
134                  })
135              }
136            })
137            this.TimeView({
138              key: $r('app.string.time'),
139              value: this.time,
140              isDivider: true,
141              handleClick: () => {
142                TimePickerDialog.show({
143                  useMilitaryTime: this.is24Hours,
144                  onAccept: (result: TimePickerResult) => {
145                    Logger.info(TAG, 'DatePicker onAccept');
146                    let date = new Date();
147                    date.setHours(result.hour, result.minute);
148                    systemTime.setTime(date.getTime(), () => {
149                      Logger.info(TAG, `setTime finish`)
150                      this.getTimeDisplay()
151                    });
152                  }
153                })
154              }
155            })
156            this.TimeView({
157              key: $r('app.string.time_zone'),
158              value: this.timeZone,
159              isDivider: true,
160              handleClick: () => {
161                router.pushUrl({
162                  url: 'international/pages/TimeZone'
163                });
164              }
165            })
166          }
167          .width('95%')
168          .padding(10)
169          .margin({ top: 20, bottom: 10 })
170          .backgroundColor($r('app.color.white'))
171          .border({ color: $r('app.color.white'), width: 1, radius: 15 })
172        }
173      }
174    }
175    .width('100%')
176    .height('100%')
177    .backgroundColor($r('app.color.f5f5f5'))
178  }
179}
180
181class Data {
182  key: Resource | undefined = undefined;
183  value: string = '';
184  isDivider: boolean = false;
185  handleClick: (event: ClickEvent) => void = () => {};
186}