Angular 2+的时区选择器 - ng2-timezone-selector

Angular 2+的时区选择器 - ng2-timezone-selector
插件名称 ng2-timezone-selector
发布时间 2020年6月28日
插件作者 samuelnygaard

一个简单的Angular模块,用于使用moment-timezone创建时区选择器。

安装:

# NPM
$ npm install ng2-timezone-selector --save

使用:

导入库后,您可以在Angular应用程序中使用组件:

<!-- 现在可以使用库组件在app.component.html中使用双重绑定: -->
<ng2-timezone-picker
    [(timezone)]="user.timezone"
    [placeholder]="placeholderString">
</ng2-timezone-picker>
<!-- 中的库组件现在可以使用或者使用单一绑定和更改函数  -->
<ng2-timezone-picker
    [timezone]="user.timezone"
    (change)="changeTimezone($event)"
    placeholder="Select timezone"
    showOffset="true"
    guess="true">
</ng2-timezone-picker>
// 在app.component.ts中的使用示例:
user = {};
placeholderString = 'Select timezone';

changeTimezone(timezone) {
  this.user.timezone = timezone;
}

组件配置

您可以使用以下输入属性配置组件:

  • timezone: string-必需:必须定义。时区字符串。如果您使用双向数据绑定,[(timezone)]="timezoneString"则它将在选择时区时更改。
  • placeholder: string-可选:default = ''。在未选择时区时显示的占位符字符串。
  • disabled: boolean-可选:default = false。禁用组件。
  • showOffset: boolean-可选:default = false。在下拉菜单中显示GMT偏移的条件。
  • guess: boolean-可选:default = false。如果设置为,true并且timezone参数为nullundefined则猜测用户的时区。
  • country: string– 可选的。国家等值字符串(例如'US''GB''AU')。如果您正在使用双向数据绑定,例如:[(country)]="countryIsoCode"它将时区更改为提供的iso代码(如果iso代码有效),并且如果更改了时区,则会将其值更改countryIsoCode为国家/地区的iso。
  • allowClear: boolean-可选:default = false。使您能够清除对时区的选择。

您可以使用(change)="changeFunction($event)(countryChange)="countryIsoCode = $event输出属性配置组件:

  • change: function($event)-选择或更改时区时的触发功能,该$event参数为时区字符串。
  • countryChange: function($event: string)-更改时区时的触发功能,$event参数为国家/地区代码。