帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:Directive  angular  attribute  Datepicker  DIR  ATT  日期  ATTR  
Angular 2 attribute directive datepicker

  • 源代码名称:ngx-mydatepicker
  • 源代码网址:http://www.github.com/kekeh/ngx-mydatepicker
  • ngx-mydatepicker源代码文档
  • ngx-mydatepicker源代码下载
  • Git URL:
    git://www.github.com/kekeh/ngx-mydatepicker.git
  • Git Clone代码到本地:
    git clone http://www.github.com/kekeh/ngx-mydatepicker
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/kekeh/ngx-mydatepicker
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • ngx-mydatepicker

    Angular 日期选取器

    Build Statuscodecovnpmnpm

    描述

    Angular 属性指令日期选择器。 兼容 Angular2+

    这里有类似的日期选取器,但是两者之间的区别在于,你可以定义输入框的样式,日历和清除按钮。

    在线演示的Bootstrap 风格输入框和glyphicons是在这里。

    安装

    要将这里组件安装到外部项目,请按照以下步骤操作:

    安装 ngx-mydatepicker --save

    向你的收费中添加英镑的MyDatePickerModule 导入,如下面的示例所示

    
    
    
    
    import { NgModule } from '@angular/core';
    
    
    import { BrowserModule } from '@angular/platform-browser';
    
    
    import { MyTestApp } from './my-test-app';
    
    
    import { NgxMyDatePickerModule } from 'ngx-mydatepicker';
    
    
    
    @NgModule({
    
    
     imports: [ BrowserModule, NgxMyDatePickerModule.forRoot() ],
    
    
     declarations: [ MyTestApp ],
    
    
     bootstrap: [ MyTestApp ]
    
    
    })
    
    
    export class MyTestAppModule {}
    
    
    
    

    使用 systemjs 软件包加载程序,将以下 ngx-mydatepicker属性添加到英镑 System.config::

    
    
    
    
    (function (global) {
    
    
     System.config({
    
    
     paths: {
    
    
     'npm:': 'node_modules/'
    
    
     },
    
    
     map: {
    
    
     // Other components are here...
    
    
    
     'ngx-mydatepicker': 'npm:ngx-mydatepicker/bundles/ngx-mydatepicker.umd.min.js'
    
    
     },
    
    
     packages: {
    
    
     }
    
    
     });
    
    
    })(this);
    
    
    
    

    用法

    使用下列两个选项之一。

    1 ngModel绑定

    在这里选项中使用ngModel绑定。 这里是一个示例应用程序。 它显示了如何使用英镑的。

    要使用 ngModel,请按如下所示定义应用程序类:

    
    
    
    
    import {INgxMyDpOptions, IMyDateModel} from 'ngx-mydatepicker';
    
    
    // other imports here...
    
    
    
    
    
    export class MyTestApp {
    
    
    
     myOptions: INgxMyDpOptions = {
    
    
     // other options...
    
    
     dateFormat: 'dd.mm.yyyy',
    
    
     };
    
    
    
     // Initialized to specific date (09.10.2018)
    
    
     model: any = { date: { year: 2018, month: 10, day: 9 } };
    
    
    
     constructor() { }
    
    
    
     // optional date changed callback
    
    
     onDateChanged(event: IMyDateModel): void {
    
    
     // date selected
    
    
     }
    
    
    }
    
    
    
    

    添加下面的代码 Fragment inside:

    
    
    
    
    <!-- input box styling is bootstrap 3.3.7 -->
    
    
    <form>
    
    
     <div class="input-group">
    
    
     <input class="form-control" style="float:none" placeholder="Select a date" ngx-mydatepicker name="mydate"
    
    
     [(ngModel)]="model" [options]="myOptions" #dp="ngx-mydatepicker" (dateChanged)="onDateChanged($event)"/>
    
    
    
     <span class="input-group-btn">
    
    
     <button type="button" class="btn btn-default" (click)="dp.clearDate()">
    
    
     <i class="glyphicon glyphicon-remove"></i>
    
    
     </button>
    
    
     <button type="button" class="btn btn-default" (click)="dp.toggleCalendar()">
    
    
     <i class="glyphicon glyphicon-calendar"></i>
    
    
     </button>
    
    
     </span>
    
    
     </div>
    
    
    </form>
    
    
    
    

    将初始日期设置为模型有两种方法。

    • 使用英镑的初始化:
    
    
    
    
    // Initialized to specific date (09.10.2018)
    
    
    model: any = { date: { year: 2018, month: 10, day: 9 } };
    
    
    
    
    • 使用英镑的JS日期初始化初始化:
    
    
    
    
    // Initialized to today
    
    
    model: any = { jsdate: new Date() };
    
    
    
    

    2.React式表单

    在这里选项中,使用React式的值访问器。 这里是一个示例应用程序。 它显示了如何使用英镑的。

    要使用React性窗体,请按如下所示定义应用程序类:

    
    
    
    
    import {INgxMyDpOptions} from 'ngx-mydatepicker';
    
    
    // other imports here...
    
    
    
    
    
    export class MyTestApp implements OnInit {
    
    
    
     myOptions: INgxMyDpOptions = {
    
    
     // other options...
    
    
     dateFormat: 'dd.mm.yyyy',
    
    
     };
    
    
    
     private myForm: FormGroup;
    
    
    
     constructor(private formBuilder: FormBuilder) { }
    
    
    
     ngOnInit() {
    
    
     this.myForm = this.formBuilder.group({
    
    
     // Empty string or null means no initial value. Can be also specific date for
    
    
     // example: {date: {year: 2018, month: 10, day: 9}} which sets this date to initial
    
    
     // value.
    
    
    
    
    
     myDate: [null, Validators.required]
    
    
     // other controls are here...
    
    
     });
    
    
     }
    
    
    
     setDate(): void {
    
    
     // Set today date using the patchValue function
    
    
     let date = new Date();
    
    
     this.myForm.patchValue({myDate: {
    
    
     date: {
    
    
     year: date.getFullYear(),
    
    
     month: date.getMonth() + 1,
    
    
     day: date.getDate()}
    
    
     }});
    
    
     }
    
    
    
     clearDate(): void {
    
    
     // Clear the date using the patchValue function
    
    
     this.myForm.patchValue({myDate: null});
    
    
     }
    
    
    }
    
    
    
    

    添加下面的代码 Fragment inside:

    
    
    
    
    <!-- input box styling is bootstrap 3.3.7 -->
    
    
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()" novalidate>
    
    
     <div class="input-group">
    
    
     <input class="form-control" style="float:none" placeholder="Select a date" ngx-mydatepicker name="myDate"
    
    
     formControlName="myDate" [options]="myOptions" #dp="ngx-mydatepicker"/>
    
    
    
     <span class="input-group-btn">
    
    
     <button type="button" class="btn btn-default" (click)="dp.clearDate()">
    
    
     <i class="glyphicon glyphicon-remove"></i>
    
    
     </button>
    
    
     <button type="button" class="btn btn-default" (click)="dp.toggleCalendar()">
    
    
     <i class="glyphicon glyphicon-calendar"></i>
    
    
     </button>
    
    
     </span>
    
    
     </div>
    
    
    
     <div class="btnGroup">
    
    
     <button class="button" type="submit" [disabled]="myForm.controls.myDate.errors">Submit</button>
    
    
     <p class="error" *ngIf="myForm.controls.myDate.errors">Date is required!</p>
    
    
     </div>
    
    
    </form>
    
    
    
    

    属性

    命令行选项属性

    选项属性的值是一个 INgxMyDpOptions属性类型。 它可以包含以下属性。

    选项默认类型说明
    dayLabels{su:'阳光',mo:'mon',:'星期二',我们: ":',:'',fr:'星期五" 'sat'}IMyDayLabels选择器上的日标签可见。
    monthLabels{ 1:'jan',2:'feb',3: '',4:'apr',5:',6: '',7:'',8:',9: '',10:'',11:'',12: 'Dec }IMyMonthLabels在选择器上可见的月份标签。
    yyyy-mm-dd字符串选择区域和回调上的日期格式。 ,d.m.,dd.mm.,dd,dd,dd,dd,dd,dd,dd,dd,dd,),),),),),)。
    showTodayBtntrue布尔型在日历上显示'今天'按钮。
    todayBtnTxt今天的雪又新添加两寸在昨天的积雪上。字符串今天的按钮文本。如果 showTodayBtn = true,可以使用。
    mo字符串日历上的第一天。 其中之一:mo,tu,我们,th,fr,sa,su
    sunHighlighttrue布尔型日历上的星期日红色。
    satHighlightfalse布尔型星期六红色在日历上。
    highlightDates没有默认值array <IMyDate>日历上的日期红色。 例如:[ {year: 2016,月: 11,天:14 }, {year: 2016,月:1,天: 15 }]
    markCurrentDaytrue布尔型日历上是否标记了当前日期( 今天)。
    markCurrentMonthtrue布尔型当前月份是否标记在日历上。 如果 monthSelector = true,可以使用
    markCurrentYeartrue布尔型是否在日历上标记了当前年份。 如果 yearSelector = true,可以使用
    monthSelectortrue布尔型如果选择月份标签,则打开一个月选择器。
    yearSelectortrue布尔型如果选择年份标签,则打开选定对象的年份。
    minYear1000号码日历中允许的最小年数。 不能是 LESS,1000.
    maxYear9999号码日历中允许的最大年数。 不能超过 9999.
    disableUntil没有默认值IMyDate从给定日期开始反向禁用日期。 例如:{year: 2016,月: 6,day: 26 }. 重置现有的disableUntil值集: {year: 0,月:0,天: 0 }
    disableSince没有默认值IMyDate禁用从给定日期开始的日期。 例如:{year: 2016,月: 7,day: 22 }. 重置现有的disableSince值集: {year: 0,月:0,天: 0 }
    disableDates没有默认值array <IMyDate>逐个禁用单个日期。 禁用日期的array。例如: [ {year: 2016,月:11,天: 14 }, {year: 2016,月: 1,天:15 }]. 重置现有disableDates值,将空 array 设置为它。
    enableDates没有默认值array <IMyDate>如果日期已经禁用,则逐个启用给定日期。 例如如果禁用日期范围,并且希望在范围内启用某些日期。 启用的天的array。例如: [ {year: 2016,月:11,天: 14 }, {year: 2016,月: 1,天:15 }]. 重置现有enableDates值,将空 array 设置为它。
    disableDateRanges没有默认值array <IMyDateRange>禁用日期范围。例如: [ {begin: {year: 2016,月:11,天: 14 }, 结束:{year: 2016,月: 11,天:20 }}]. 重置现有disableDateRanges值,将空 array 设置为它。
    disableWeekendsfalse布尔型禁用周末( 星期六和星期日)。
    disableWeekdays没有默认值array <字符串>禁用工作日。要禁用的工作日 array。 weekday与 firstDayOfWeek option选项的字符串相同。 例如:['tu','we'] 禁用星期二和星期三。
    markDates没有默认值array <IMyMarkedDates>标记不同颜色的日期。 例如:[ {dates: [ {year: 2016,月: 11,天:14 }, {year: 2016,月:12,天: 16 }], 颜色:'#004198'},{dates: [ {year: 2017,月:10,天: 1 }, {year: 2017,月: 11,天:4 }], 颜色: '绿色'}]要重置存在markDates值为空。
    markWeekends没有默认值IMyMarkedDate标记周末( 星期六和星期日)。 例如:{marked: true,颜色: 'red }。颜色的值可以是任何CSS颜色代码。 要重置现有的markWeekends集,请执行以下操作: {marked: false,颜色:''}
    disableHeaderButtonstrue布尔型如果disableUntil或者disableSince完全禁用了前一个月或者下个月的标题按钮,则禁止更改日历视图。
    showWeekNumbersfalse布尔型周号是否可见或者不在日历上。 可以用于 firstDayOfWeek = mo
    selectorHeight232px字符串选择器高度以像素为单位。
    selectorWidth252px字符串选择器宽度以像素为单位。
    alignSelectorRightfalse布尔型对齐选择器右侧。
    openSelectorTopOfInputfalse布尔型打开输入字段的选择器顶部。 如果这里选项为 true,则无法显示选择器箭头。
    closeSelectorOnDateSelecttrue布尔型选择器是否已经关闭或者是否在日期选择。
    closeSelectorOnDocumentClicktrue布尔型是否已经关闭选择器或者在文档中单击。
    allowSelectionOnlyInCurrentMonthtrue布尔型是否允许日期选择,而不是当前月份。
    showSelectorArrowtrue布尔型是否显示或者不显示选择器( 日历) 箭头。
    appendSelectorToBodyfalse布尔型是否将选择器( 日历) 附加到 body 元素。
    ariaLabelPrevMonth上一月字符串上月button的Aria标签文字。
    ariaLabelNextMonth下个月字符串Aria标签文字下月按钮。
    ariaLabelPrevYear上一年字符串Aria标签文字上一年的。
    ariaLabelNextYear明年字符串Aria标签文字下一年按钮。
    • 选项数据( 并非所有列出的属性)的示例:
    
    
    
    
     myOptions: INgxMyDpOptions = {
    
    
     todayBtnTxt: 'Today',
    
    
     dateFormat: 'yyyy-mm-dd',
    
    
     firstDayOfWeek: 'mo',
    
    
     sunHighlight: true,
    
    
     disableUntil: {year: 2016, month: 8, day: 10}
    
    
     };
    
    
    
    

    defaultMonth属性

    如果未指定初始日期,则在打开日历时,通常将默认选择当前日期。 如果你希望将不同年份和月份作为新选择的日期选取操作的默认值,请指定一个收费的属性。

    defaultMonth属性的值可以是:

    用户定义函数

    你可以调用指令的函数。 将局部变量定义为以下输入字段:

    
    
    
    
    <input ngx-mydatepicker name="mydate" [(ngModel)]="model" [options]="myOptions" #dp="ngx-mydatepicker"/>
    
    
    
    

    这个英镑的#dp="ngx-mydatepicker" 定义名为 dp的局部变量。 你可以使用它来调用指令的函数,例如 ( 单击)"dp。openCalendar ( )

    openCalendar函数

    打开日历例如:

    
    
    
    
    <button type="button" (click)="dp.openCalendar()">Open</button>
    
    
    
    

    closeCalendar函数

    关闭日历。例如:

    
    
    
    
    <button type="button" (click)="dp.closeCalendar()">Close</button>
    
    
    
    

    toggleCalendar函数

    如果日历打开,则关闭日历;如果关闭日历,则打开日历。 例如:

    
    
    
    
    <button type="button" (click)="dp.toggleCalendar()">Toggle</button>
    
    
    
    

    clearDate函数

    从输入框和模型中清除日期。 例如:

    
    
    
    
    <button type="button" (click)="dp.clearDate()">Clear</button>
    
    
    
    

    isDateValid函数

    如果输入框中的日期有效,则返回 true。 否则返回 false。这个函数还调用英镑的回调。

    
    
    
    
    <input ngx-mydatepicker [(ngModel)]="model" [options]="myDatePickerOptions" #dp="ngx-mydatepicker"/>
    
    
    
    
    
    
    
    
    @ViewChild('dp') ngxdp: NgxMyDatePickerDirective;
    
    
    
    checkDateValidity(): void {
    
    
     let valid: boolean = this.ngxdp.isDateValid();
    
    
     console.log('Valid date in the input box: ', valid);
    
    
    }
    
    
    
    

    回调

    dateChanged回调

    • 在选定日期。移除或者输入字段类型有效时调用

    • 事件参数:

      • event.date: 以下格式的日期对象: { 日:22,月: 11年:2016 }
      • event.jsdate: Javascript日期对象
      • event.formatted: 与dateFormat选项格式相同的日期字符串是: '2016-11-22'
      • event.epoc: Epoc时间戳: 1479765600
    • 事件参数类型为 IMyDateModel

    • dateChanged回调的示例:

    
    
    
    
    onDateChanged(event: IMyDateModel) {
    
    
     console.log('onDateChanged(): ', event.date, ' - jsdate: ', new Date(event.jsdate).toLocaleDateString(), ' - formatted: ', event.formatted, ' - epoc timestamp: ', event.epoc);
    
    
    }
    
    
    
    

    inputFieldChanged回调

    • 当输入字段中的值更改。选择日期或者日期时调用( 可以在验证中使用 true 或者 false 指示日期)。

    • 事件参数:

      • event.value: 输入字段的值。 例如:'''
      • event.dateFormat: 与dateFormat选项格式相同的日期格式字符串。 例如:'yyyy-MM-dd"'
      • event.valid: 布尔值表示输入字段值有效或者不正确。 例如:true
    • 事件参数类型为 IMyInputFieldChanged

    • 输入字段更改回调的示例:

    
    
    
    
    onInputFieldChanged(event: IMyInputFieldChanged) {
    
    
     console.log('onInputFieldChanged(): Value: ', event.value, ' - dateFormat: ', event.dateFormat, ' - valid: ', event.valid);
    
    
    }
    
    
    
    

    calendarViewChanged回调

    • 在日历视图更改时调用( 年或者月更改)

    • 事件参数:

      • event.year: 日历中的年份数。 例如:2016
      • event.month: 日历中的月份编号。 例如:11
      • event.first: 选定月份和年的第一天。 IMyWeekday类型的类型。 例如:{number: 1,weekday: tu }
      • event.last: 选定月份和年的最后一天。 IMyWeekday类型的类型。 例如:{number: 30,weekday: }我们"
    • 事件参数类型为 IMyCalendarViewChanged

    • weekday属性的值与 选项的值相同

    • 日历视图更改回调的示例:

    
    
    
    
    onCalendarViewChanged(event: IMyCalendarViewChanged) {
    
    
     console.log('onCalendarViewChanged(): Year: ', event.year, ' - month: ', event.month, ' - first: ', event.first, ' - last: ', event.last);
    
    
    }
    
    
    
    

    calendarToggle回调

    • 在打开或者关闭日历时调用

      • 事件:从 1到 4的数字表示事件的原因
        • 1 = 日历已经打开
        • 2 = 按日期关闭的日历选择
        • 3 = 日历按钮关闭的日历
        • 4 = 按外部键关闭的日历( 文档单击)
        • 5 = 由ESC键关闭的日历
    • 日历切换回调的示例:

    
    
    
    
     onCalendarToggle(event: number): void {
    
    
     console.log('onCalendarClosed(): Reason: ', event);
    
    
     }
    
    
    
    

    组件开发这里组件

    • 首先 fork 和克隆这个 repo。

    • 安装所有依赖项:

    • 安装
    • npm安装 --global
    • 构建英镑的npmdist 文件夹,并执行英镑的tslint:

    • gulp
    • 执行单元测试和覆盖( 生成的输出为测试输出文件夹):

    • 测试
    • 运行示例应用程序:

    • npm启动
    • 向浏览器打开英镑 http://localhost:5000 to
    • 构建本地npm安装软件包:

    • gulp
    • cd npmdist
    • npm
      • 本地安装软件包创建为 npmdist 文件夹。 例如:ngx-mydatepicker-0.0.1.tgz
    • 将本地npm软件包安装到你的项目中:

    • 安装 path_to_npmdist/ngx-mydatepicker-0.0.1.tgz

    演示

    在线演示在这里是

    兼容( 测试)

    • Firefox ( 最新)
    • Chrome ( 最新)
    • Chromium ( 最新)
    • 边缘
    • IE11
    • Safari

    许可证

    • 许可证:MIT

    作者

    • 作者:kekeh

    关键字

    • 日期选取器
    • Angular2 +
    • 打字


    文章标签:angular  DIR  日期  ATT  Directive  ATTR  attribute  Datepicker  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语