Timezone Select JS - Datasource from Wikipedia - no DateTime dependences
npm install timezone-select-js#### There are excellent benefits competitive to others:
- Support almost popular JS libraries/frameworks such as React, Angular, VueJS ...
- No DateTime dependence (neither Spacetime, Moment, Date-fns nor others).
- Official Timezone Datasource from Wikipedia.
- Easy to update Timezone Datasource with one command.
- Timezone grouped by country and offset, however, it also provides a method to get raw data of timezone (no grouping).
- Support Deprecated timezones that linked to other, such as Asia/Saigon (Vietnam), Asia/Chongqing (China), Europe/Belfast (England), Japan (Japan), Singapore (Singapore) ...
npm i timezone-select-js
`Built-in
$3
##### clientTz
- Basically, return client timezone America/New_York
- If it's a deprecated timezone, return linked timezone instead, for example if client timezone is Japan it will return Asia/Tokyo.
##### findTzByKey
Return raw timezone item
`js
{
country: '',
name: 'Singapore',
status: 'Deprecated',
offset: '+08:00',
link: 'Asia/Singapore'
}
`
##### findTzByName
Return grouped timezone item
`js
{
value: 'Asia/Singapore'
label: '(GMT+08:00) Singapore'
country: 'SG'
offset: '+08:00'
included: 'Asia/Singapore, Singapore'
}
`
##### listTz
Return list of timezone that grouped by country and offset including deprecated timezone:
`js
[
...,
{
value: 'America/Los_Angeles'
label: '(GMT-08:00) Los Angeles'
country: 'US'
offset: '-08:00'
included: 'America/Los_Angeles, PST8PDT, US/Pacific'
},
{
value: 'Asia/Tokyo'
label: '(GMT+09:00) Tokyo'
country: 'JP'
offset: '+09:00'
included: 'Asia/Tokyo, Japan'
},
...
]
`
$3
##### tzRawData
Return raw data source, anyone can use this data for different usage
`js
[
...,
{
country: 'US',
name: 'America/Los_Angeles',
status: 'Canonical',
offset: '−08:00',
link: ''
},
{
country: '',
name: 'Japan',
status: 'Deprecated',
offset: '+09:00',
link: 'Asia/Tokyo'
},
...
]
`$3
##### TimezoneSelect
Look at the example of usage belowUsage
$3
`jsx
import { listTz, clientTz, findTzByName } from 'timezone-select-js';
import React, { useMemo } from 'react';
import Select from 'react-select';const TimezoneSelect = ({
value,
onBlur,
onChange,
labelStyle = 'original',
...props
}) => {
const getOptions = useMemo(() => {
return listTz();
}, [labelStyle]);
const handleChange = tz => {
onChange && onChange(tz);
};
const constructTz = (data) => {
return typeof data === 'string' ? findTzByName(data, getOptions) : data;
};
return (
value={constructTz(value)}
onChange={handleChange}
options={getOptions}
onBlur={onBlur}
{...props}
/>
)
}
const App = () => {
const [selectedTimezone, setSelectedTimezone] = useState(clientTz());
return (
Timezone Select
Please make a selection
value={selectedTimezone}
onChange={setSelectedTimezone}
/>
)
}const rootElement = document.getElementById('root')
ReactDOM.render( , rootElement)
`
$3
`ts
import { listTz, clientTz } from 'timezone-select-js';
import {NgSelectModule, NgOption} from '@ng-select/ng-select';@Component({...})
export class ExampleComponent {
timezones = listTz();
selectedTimezone = clientTz();
}
`
`html
{{tz.label}}
bindLabel="label"
bindValue="value"
[(ngModel)]="selectedTimezone">
`$3
`js
import { listTz, clientTz } from 'timezone-select-js';new Vue({
el: '...',
template: '...',
data: {
selected: clientTz(),
timezones: listTz();
}
})
`
`html
``Pull requests are always welcome!