帮酷LOGO
  • 显示原文与译文双语对照的内容
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 ]
    })exportclassMyTestAppModule {}

    使用 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...exportclassMyTestApp {
     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>
     <divclass="input-group">
     <inputclass="form-control"style="float:none"placeholder="Select a date"ngx-mydatepickername="mydate" [(ngModel)]="model" [options]="myOptions" #dp="ngx-mydatepicker" (dateChanged)="onDateChanged($event)"/>
     <spanclass="input-group-btn">
     <buttontype="button"class="btn btn-default" (click)="dp.clearDate()">
     <iclass="glyphicon glyphicon-remove"></i>
     </button>
     <buttontype="button"class="btn btn-default" (click)="dp.toggleCalendar()">
     <iclass="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 todaymodel: any= { jsdate: newDate() };

    2.反应式表单

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

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

    import {INgxMyDpOptions} from'ngx-mydatepicker';// other imports here...exportclassMyTestAppimplementsOnInit {
     myOptions:INgxMyDpOptions= {
     // other options... dateFormat: 'dd.mm.yyyy',
     };
     private myForm:FormGroup;
     constructor(privateformBuilder: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 functionlet date =newDate();
     this.myForm.patchValue({myDate: {
     date: {
     year: date.getFullYear(),
     month: date.getMonth() +1,
     day: date.getDate()}
     }});
     }
     clearDate():void {
     // Clear the date using the patchValue functionthis.myForm.patchValue({myDate: null});
     }
    }

    添加下面的代码 Fragment inside:

    <!-- input box styling is bootstrap 3.3.7 --><form [formGroup]="myForm" (ngSubmit)="onSubmit()"novalidate>
     <divclass="input-group">
     <inputclass="form-control"style="float:none"placeholder="Select a date"ngx-mydatepickername="myDate"formControlName="myDate" [options]="myOptions" #dp="ngx-mydatepicker"/>
     <spanclass="input-group-btn">
     <buttontype="button"class="btn btn-default" (click)="dp.clearDate()">
     <iclass="glyphicon glyphicon-remove"></i>
     </button>
     <buttontype="button"class="btn btn-default" (click)="dp.toggleCalendar()">
     <iclass="glyphicon glyphicon-calendar"></i>
     </button>
     </span>
     </div>
     <divclass="btnGroup">
     <buttonclass="button"type="submit" [disabled]="myForm.controls.myDate.errors">Submit</button>
     <pclass="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属性的值可以是:

    用户定义函数

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

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

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

    openCalendar函数

    打开日历例如:

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

    closeCalendar函数

    关闭日历。例如:

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

    toggleCalendar函数

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

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

    clearDate函数

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

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

    isDateValid函数

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

    <inputngx-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: ', newDate(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 +
    • 打字



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