[TypeScript][Moment] Change timezone
Tags: typescript, momentjs
Published: 2021-07-11 00:40:33

## Intro
Sometimes I join online events.
But I don't know when those events will start because the timezone is different from Japan (I live in Japan).

So this time I will try converting.

### Environments
* Node.js ver.16.4.2
* TypeScript ver.4.3.5
* moment ver.2.29.1
* moment-timezone ver.0.5.33
* ts-loader ver.9.2.3
* webpack ver.5.42.0
* webpack-cli ver.4.7.2

## Get my own timezone
For getting my own timezone, I just create a Date instance.

```ts
const currentDate = new Date();
console.log(currentDate);
```

#### Result
```
Sun Jul 11 2021 08:39:08 GMT+0900 (Japan Standard Time)
```

The timezone came from OS settings.
So if I change them, the result will be changed.


### Convert timezone to my own one?
I can create Data instances by formatted string.

```ts
const currentDate = new Date('Jul 10 2021 19:48 EDT');
console.log(currentDate);
```

#### Result
```
Sun Jul 11 2021 08:48:00 GMT+0900 (Japan Standard Time)
```

I was able to implement everything I wanted to achieve...?


* [Date - JavaScript|MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
* [Javascript: The Definitive Guide](https://www.oreilly.com/library/view/javascript-the-definitive/9781491952016/)

## Daylight Saving Time(Summer time)
Because there are "Daylight Saving Time" in some countries, I must change their timezone according the date.
For example, if the date is "2021-03-13", I must use "EST". But if the date is "2021-03-15", I must use "EDT".

The problem is the dates when "Daylight Saving Time" start aren't same in every year.

After all, I used "moment" and "moment-timezone".

* [Moment Timezone | Home](https://momentjs.com/timezone/)
* [Moment Timezone | Docs](https://momentjs.com/timezone/docs/)
* [Time Zones Currently Being Used in United States](https://www.timeanddate.com/time/zone/usa)

Because I can't specify the time zone like "EDT" and "America / EDT", I select cities that belong to that timezone and map the names.

#### index.html
```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Convert sample</title>
        <meta charset="utf-8">
    </head>
    <body>
        <input type="date" id="convert_date_from" placeholder="Date From">
        <select id="convert_hour_from"></select>
        <select id="convert_minute_from"></select>
        <input type="text" id="convert_timezone_from" list="convert_timezone_from_list">
            <datalist id="convert_timezone_from_list">

            </datalist>
        <button onclick="Page.convert()">Convert</button>
        <div id="convert_date_to"></div>
        <script src="js/main.page.js"></script>
    </body>
</html>
```

#### main.page.ts
```ts
import moment from "moment";
import tz from 'moment-timezone';

type TimezoneValue = {
    displayName: string,
    value: string
};
const timezoneValueList: TimezoneValue[] = [
    { displayName: 'US/ET', value: 'America/New_York'},
    { displayName: 'US/CT', value: 'America/Chicago' },
    { displayName: 'US/PT', value: 'America/Los_Angeles' },
    { displayName: 'Japan', value: 'Asia/Tokyo' },
];
function init() {
    addHour();
    addMinute();
    addTimezone();
}
function addHour() {
    const hourInput = document.getElementById('convert_hour_from') as HTMLSelectElement;
    for(let i = 0; i < 24; i++) {
        const hourValue = document.createElement('option');
        const value = ("00"+ i).slice (-2);
        hourValue.text = value;
        hourValue.value = value;
        hourInput.appendChild(hourValue);
    }
}
function addMinute() {
    const minuteInput = document.getElementById('convert_minute_from') as HTMLSelectElement;
    for(let i = 0; i < 60; i++) {
        const minuteValue = document.createElement('option');
        const value = ("00"+ i).slice (-2);
        minuteValue.text = value;
        minuteValue.value = value;
        minuteInput.appendChild(minuteValue);
    }
}
function addTimezone() {
    const timezoneList = document.getElementById('convert_timezone_from_list') as HTMLDataListElement;
    for(const value of timezoneValueList) {
        const timezoneValue = document.createElement('option');
        timezoneValue.value = value.displayName;
        timezoneList.appendChild(timezoneValue);
    }
}
export function convert() {
    const dateInput = document.getElementById('convert_date_from') as HTMLInputElement;
    const hourInput = document.getElementById('convert_hour_from') as HTMLSelectElement;
    const minuteInput = document.getElementById('convert_minute_from') as HTMLSelectElement;
    const timezoneInput = document.getElementById('convert_timezone_from') as HTMLInputElement;

    const date = moment(dateInput.value).format('YYYY-MM-DD');
    const hour = hourInput.options[hourInput.selectedIndex].value;
    const minute = minuteInput.options[minuteInput.selectedIndex].value;
    const datetimeText = `${date} ${hour}:${minute}`;
    
    const timezone = timezoneValueList.find(t => t.displayName === timezoneInput.value);
    const targetTime =  momentTz.tz(datetimeText, timezone!.value);
    
    const dateOutput = document.getElementById('convert_date_to') as HTMLElement;
    dateOutput.textContent = moment(targetTime.toDate()).format('YYYY-MM-DD HH:mm');
}
init();
```