Angular 2/4 +日期时间选择器组件

Angular 2/4 +日期时间选择器组件
插件名称 angular2-datetimepicker
发布时间 2020年6月19日
插件作者 CuppaLabs

一个很酷的响应式Angular 2/4 + DateTimepicker组件,用于Web和Mobile。它对移动设备友好且轻巧。

安装:

# NPM
$ npm install angular2-datetimepicker --save

用法

导入AngularDateTimePickerModule到您的AppModule

import { AngularDateTimePickerModule } from 'angular2-datetimepicker';

@NgModule({
  // ...
  imports: [
    AngularDateTimePickerModule,
  ]
  // ...
})

在要使用下拉组件的组件中声明组件数据变量和选项。

import { Component, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
    
	date: Date = new Date();
	settings = {
		bigBanner: true,
		timePicker: false,
		format: 'dd-MM-yyyy',
		defaultOpen: true
	}
	constructor(){}
    ngOnInit(){
       
    }
}

在要放置日期选择器的模板中添加以下组件标签

<angular2-date-picker [(ngModel)]="date" [settings]="settings"></angular2-date-picker>

设定值

以下settings对象属性可用于配置组件。

属性类型默认描述
format String dd-MMM-yyyy hh:mm a所选日期的日期格式。
bigBanner Boolean true 标语部分显示日期详细信息。
defaultOpen Boolean false 在加载时打开日期选择器弹出框。默认设置为false。
timePicker Boolean false 启用时间选择器功能。
closeOnSelect Boolean true 要关闭弹出式窗口,请选择日期或单击“完成”按钮。

回调方法

  • onDateSelect

定义在选择日期时要调用的回调方法。

  <angular2-date-picker (onDateSelect)="onDateSelect($event)" 
			[(ngModel)]="date" 
			[settings]="settings" >
  </angular2-date-picker>

日期格式支持

格式字符串可以由以下元素组成:

  • ‘yyyy’:年份的4位数字表示(例如,AD 1 => 0001,AD 2010 => 2010)
  • ‘yy’:年份的2位数字表示,填充(00-99)。(例如,AD 2001 => 01,AD 2010 => 10)
  • ‘y’:年份的1位数字表示,例如(AD 1 => 1,AD 199 => 199)
  • “ MMMM”:一年中的月份(1月-12月)
  • “ MMM”:一年中的月份(1月-12月)
  • MM:一年中的月份,填充(01-12)
  • ‘M’:年中的月份(1-12)
  • “ LLLL”:一年中的独立月份(1月-12月)
  • ‘dd’:每月的某天,填充(01-31)
  • d:每月中的某天(1-31)
  • “ EEEE”:星期几,(周日至周六)
  • “ EEE”:星期几,(星期日至六)
  • ‘HH’:一天中的小时,填充(00-23)
  • ‘H’:一天中的小时(0-23)
  • ‘hh’:以AM / PM表示的小时数,已填充(01-12)
  • ‘h’:AM / PM中的小时,(1-12)
  • ‘mm’:以分钟为单位,填充(00-59)
  • ‘m’:分钟(0-59)
  • “ss”:分钟,秒填充(00-59)
  • s:分钟(0-59)
  • ‘sss’:毫秒,以秒为单位,填充(000-999)
  • ‘a’:AM / PM标记
  • ‘Z’:时区偏移量的4位(+符号)表示(-1200- + 1200)
  • ‘ww’:一年中的某周,填充(00-53)。第一周是一年中的第一个星期四
  • ‘w’:一年中的某周(0-53)。第一周是一年中的第一个星期四
  • ‘G’,’GG’,’GGG’:时代字符串的缩写形式(例如’AD’)
  • ‘GGGG’:时代字符串的长形式(例如’Anno Domini’)

格式字符串也可以是以下预定义的本地化格式之一:

  • “中”:对于en_US语言环境,相当于“ MMM d,yh:mm:ss a”(例如2010年9月3日下午12:05:08)
  • ‘short’:在en_US语言环境中相当于’M / d / yy h:mm a’(例如9/3/10 12:05 PM)
  • ‘fullDate’:在en_US语言环境中相当于’EEEE,MMMM d,y’(例如,2010年9月3日,星期五)
  • ‘longDate’:在en_US语言环境中等同于’MMMM d,y’(例如2010年9月3日)
  • ‘mediumDate’:在en_US语言环境中等同于’MMM d,y’(例如2010年9月3日)
  • ‘shortDate’:等于en_US语言环境的’M / d / yy’(例如9/3/10)
  • “ mediumTime”:等于en_US语言环境的“ h:mm:ss a”(例如12:05:08 PM)
  • ‘shortTime’:等于en_US语言环境的’h:mm a’(例如12:05 PM)