moment-timezone-picker
Version:
A simple angular moment timezone picker
132 lines (111 loc) • 4.93 kB
Markdown
# MomentTimezonePicker
[](https://nodei.co/npm/moment-timezone-picker/)
## Versions
| Angular | Version |
|---------|---------|
| 17 | 9.x.x |
| 16 | 8.x.x |
| 15 | 7.x.x |
| 14 | 6.x.x |
| 13 | 5.x.x |
| 12 | 4.x.x |
| 11 | 3.x.x |
| 10 | 2.x.x |
| 8 | 1.x.x |
| 7 | 0.x.x |
For older version see [OLD_VERSIONS_README.md](./OLD_VERSION_README.md)
## Dependencies
For select input [@ng-select/ng-select](https://github.com/ng-select/ng-select)
For time core [moment-timezone](https://momentjs.com/timezone/)
## Getting started
### Step 1: Install
#### NPM
```shell
npm i moment-timezone-picker --save
```
### Step 2: Import the MomentTimezonePickerModule
```js
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MomentTimezonePickerModule } from 'moment-timezone-picker'; //add this
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MomentTimezonePickerModule //add this
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
### Step 3: Add in component html
#### 1) As model
```html
<ng-moment-timezone-picker [(ngModel)]="yourModel">
</ng-moment-timezone-picker>
```
#### 2) As reactive form
```html
<div [formGroup]="your">
<ng-moment-timezone-picker [formControlName]="'yourControlName'">
</ng-moment-timezone-picker>
</div>
```
### Step 4: Include package theme
In component `*.scss` or `*.sass` import theme
```scss
@import "~node_modules/moment-timezone-picker/assets/moment-timezone-picker.theme";
```
Or write own styles :)
### Step 5: Configuration
#### Inputs
| Input | Type | Default | Required | Description |
|-------------------------|------------|-------------------|----------|------------------------------------------------------------------------|
| [customPlaceholderText] | `string` | `Choose...` | no | Allows you to localize the placeholder text. |
| [customNotFoundText] | `string` | `No zone found` | no | Allows you to localize not found text |
| [getUserZone] | `boolean` | `false` | no | Allows you to guess user timezone. If `true` also emits value on init. |
| [clearable] | `boolean` | `false` | no | Sets that if select can be clearable. |
| [virtualScroll] | `boolean` | `true` | no | Sets select to use virtual scroll. |
| [disabled] | `boolean` | `false` | no | Disables the ng-select component |
| [config] | `object` | `[Object object]` | no | See interface `SelectConfig` |
| [valueTransformFN] | `function` | `undefined` | no | See `valueTransformFN Type` |
#### Object: TZone
| Field | Type | Example |
|-----------|----------|--------------------------|
| abbr | `string` | `GMT` |
| group | `string` | `Europe` |
| nameValue | `string` | `Europe/London` |
| timeValue | `string` | `+00:00` |
| name | `string` | `Europe/London (+00:00)` |
#### Object: SelectConfig
Default value
```ts
config: SelectConfig = {
hideSelected: false,
dropdownPosition: 'auto',
appearance: 'underline',
clearOnBackspace: true,
closeOnSelect: true,
appendTo: null
};
```
For more info read [this topic](https://github.com/ng-select/ng-select).
> ❗NOTE: only some properties will be configurable
#### valueTransformFN Type
```typescript
valueTransformFN: (obj: TZone | null) => any;
```
> ❗Please note that for backward support we need to pass `nameValue`, because this field is the most specific to find timezone.
### Contributor
- [Roman Yanush](https://github.com/Romko775/)